jQuery选择器之过滤选择器之基础过滤选择器

最新推荐文章于 2022-11-21 13:58:20 发布
最新推荐文章于 2022-11-21 13:58:20 发布
阅读量906 收藏 2
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/world_java/article/details/9621289
版权

过滤选择器之基础过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

1、:first

用法: $(”tr:first”) ;   返回值  单个元素的组成的集合

说明: 匹配找到的第一个元素


2、:last

用法: $(”tr:last”)   返回值  集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.


3、:not(selector)

用法: $(”input:not(:checked)”)返回值  集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).


4、:even

用法: $(”tr:even”)   返回值  集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0


5、: odd

用法: $(”tr:odd”) 返回值  集合元素

说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数


6、:eq(index)

用法: $(”tr:eq(0)”)    返回值  集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值


7、:gt(index)

用法: $(”tr:gt(0)”)    返回值  集合元素
说明: 匹配所有大于给定索引值的元素.


8、:lt(index)

用法: $(”tr:lt(2)”)    返回值  集合元素  

说明: 匹配所有小于给定索引值的元素.


9、:header(固定写法)

用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.


10、:animated(固定写法)  

返回值  集合元素

说明: 匹配所有正在执行动画效果的元素 


练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
		 <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
		 <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
		 <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
		 <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
		 <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
		 <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
		 <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
		
	
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		<br>
			<div id="mover" >
			 	  动画
			</div>
		<br>
		
		
	</body>
<script language="JavaScript">
	function move(){//动画效果
		$("#mover").slideToggle("slow",move);
	}
	move();
	
//<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>


//<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>


//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>

//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>


//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>

	
//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>


//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
	
//<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
	

//<input type="button" value="改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
	

//<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
 	
	
	
</script>
   
</html>


答案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
		 <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
		 <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
		 <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
		 <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
		 <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
		 <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
		 <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
		
	
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		<br>
			<div id="mover" >
			 	  动画
			</div>
		<br>
		
		
	</body>
<script language="JavaScript">
	function move(){
		$("#mover").slideToggle("slow",move);
	}
	move();
	
//<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
	$("#b1").click(function(){
		$("div:first").css("background","#0000FF");
	});

//<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
	$("#b2").click(function(){
		$("div:last").css("background","#0000FF");
	});

//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
	$("#b3").click(function(){
		$("div:not(.one)").css("background","#0000FF");
	});

//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
	$("#b4").click(function(){
		$("div:even").css("background","#0000FF");
	});

//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
	$("#b5").click(function(){
		$("div:odd").css("background","#0000FF");
	});
	
//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
	$("#b6").click(function(){
		$("div:gt(3)").css("background","#0000FF");
	});

//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
	$("#b7").click(function(){
		$("div:eq(3)").css("background","#0000FF");
	});

//<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
	$("#b8").click(function(){
		$("div:lt(3)").css("background","#0000FF");
	});

//<input type="button" value="改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
	$("#b9").click(function(){
		$(":header").css("background","#0000FF");
	});

//<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
 	$("#b10").click(function(){
		$(":animated").css("background","#0000FF");
	});
	
	
</script>
   
</html>


我叫阿狸猫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery过滤性选择器
marsedely的专栏
04-26 622
:first过滤选择器 本章我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。 在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？ 在下面的示例代码中你可能注意到我们会使用  $(“li:first”) 注意：书写时以“：”号开头。 运行结果：
jQuery的基本过滤选择器
越努力越幸运的博客
06-27 425
jQuery的基本过滤选择器 基本过滤选择器有很多，通过在元素后加冒号：表示，简略介绍如下： ：first 指代第一个（div：first表示第一个div） ：last 指代最后一个（div：last表示最后一个div） ：not（selector） 指代去除所有与给定选择器匹配的元素（input：not（：checked）表示所有未选中的input） ：even 指代所有索引值为偶数的元素，从0开始计数（tr：even表示第0、2、4、6…的tr元素） ：odd 指代所有索引值为奇数的元素，从0开始计数
jQuery选择器——基本过滤选择器
xiaouncle的博客
07-30 732
前一章介绍了层次选择器，今天我们学习一下jQuery的另一种选择器：基本过滤选择器。过滤选择器可以过滤掉自己不想要的东西，也就是说过滤后留下的都是自己需要的。
第1章 WEB前端开发工程师-jQuery框架 1-7：jQuery 内容过滤选择器
zjl-wgf
06-17 136
jQuery 内容过滤选择器 本节课所讲内容： 1.jQuery过滤选择器 主讲教师：Head老师 一.jQuery内容过滤选择...
jQuer基本y选择器，层次选择器，基本过滤选择器
qq_51592187的博客
04-16 119
jQuery基本选择器，层次选择器，基本过滤选择器 一，基本选择器 <!DOCTYPE<!-- html> <html> <head> <meta charset="utf-8"> <title>基本选择器</title><script type="text/javascript" src="jquery-3.1.0.js"></script> <script type="text/ja
jQuery基本过滤选择器
dly的博客
12-19 372
jQuery基本过滤选择器**过滤选择器格式 “：关键字”**:first , 第一个 :last ,最后一个 :eq(index) ，获得指定索引 :gt(index) 大于 :lt(index) 小于 :even 偶数，从 0 开始计数。例如：查找表格的1、3、5…行（即索引值0、2、4…） :odd 奇数 :not(selector) 去除所有与给定选择器匹配的元素 :h
jQuery选择器之基本过滤选择器用法实例分析
10-17
主要介绍了jQuery选择器之基本过滤选择器用法,结合实例形式分析了jQuery常见的基本过滤、属性过滤、内容过滤、子元素过滤等相关操作技巧,需要的朋友可以参考下
jquery选择器之内容过滤选择器详解
10-26
内容过滤选择器是jQuery选择器的一个重要类别，它们允许开发者根据元素的内容来筛选和操作元素。本文将详细解析jQuery中的四个主要内容过滤选择器：`:contains(text)`、`:empty`、`:has(selector)`和`:parent`。 1....
jquery选择器之基本过滤选择器详解
10-26
jQuery选择器是jQuery库中的核心功能之一，它极大地简化了在JavaScript中操作DOM元素的方式。在jQuery中，过滤选择器是一种特殊的选择器，用于从已选中的元素集合中进一步筛选出满足特定条件的元素。本篇文章将深入...
jquery选择器之层级过滤选择器详解
10-26
本篇文章主要是对jquery选择器之层级过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
过滤选择器
MerryLiuOnly的博客
05-12 493
过滤选择器 标题1.基本过滤选择器 a、:first 用法： $(“tr:first”); 返回值 单个元素组成的集合 说明：匹配找到的第一个元素 b、:last == 用法：$(“tr:last”) 返回值 集合元素== 说明：匹配找到的最后一个元素。与：first对应。 c、:even 用法：$(“tr:even”) 返回值 集合元素 说明：匹配所有索引值为偶数的元素，从0开始计数。 d、:odd 用法：$(“tr:odd”) 说明：匹配所有索引值为奇数的元素，从0开始计数。 e、==:not
jquery学习day1
最新发布
weixin_44807430的博客
11-21 318
无名之辈
jQuery过滤器
陈 浩
11-04 946
在jQuery中可以使用过滤器对选取的数据进行过滤，从而选择更明确的元素。jQuery过滤器的通常用法如下， $(“选择器 : 过滤器”) 1．基本过滤器 1.1 :first      使用 :first 过滤器可以匹配到找到的第一个元素。例如，使用 $(“tr:first”) 可以选择表格的第一行 1.2 :last      使用 :last 过滤器可以匹配到找到的最后一个元素。
用jquery获取tbody下的第一个tr的最后一个td里面的第一个a标签
热门推荐
码农界的小学生
06-15 1万+
使用jquery提供的两个选择器实现： :first 选择器选取第一个元素 :last 选择器选取最后一个元素。 $("table tr:first td:last a:first");
jQuery-强大的jQuery选择器 (详解)[转]
ywj_316的博客
01-21 122
1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有&lt;a&gt;元素...
jQuery选择器
寻找天空之城
06-12 464
jQuery选择器基本选择器1.标签名选择器$("div") 匹配文档中所有div2.id选择器$("#id")3.类选择器$(".类名")4.分组选择器$("div,#id,class")5.所有元素选择器$("*")&lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;基本选择器练习&
jQuery核心函数之选择器
yuanmomoya的博客
08-29 292
主要讲通过选择器，去获取文档（网页）中的内容，标签、文本、表单等。说白了就是想法去得到你要 分为四个部分：                 基本选择器：类似于CSS,写CSS的四种方式，通过id、class、选择元素（为一个或者多个标签添加样式）、复合选择，我们可以通过id、class、元素名、复合选择选择器来获取                  层次选择器：把网页看成一个有层次的倒树，...
J2EE学习篇之--JQuery技术详解
810364804
06-18 178
前面我们讲解了的J2EE的技术都是服务端的技术，下面我们来看一下前端的一些开发技术，这一篇我们来看一下jQuery技术 简介： jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,...
jquery内容过滤选择器：内容过滤选择器它是根据元素内部文本内容进行选中。
boss_way的博客
11-01 4564
1.1． 内容过滤选择器 内容过滤选择器它是根据元素内部文本内容进行选中。   :Contains（text）：匹配包含给定文本的元素 :Empty：匹配所有不包含子元素或者文本的空元素 :Has(selector):匹配含有选择器所匹配的元素的元素 :addClassL(“类名”)：给所有的标签添加类名 :Parent：匹配含有子元素或者文本的元素 示例： $(fu
jQuery 选择器（61种）整理总结
10-21
jQuery选择器是jQuery库中的核心功能之一，它极大地简化了DOM元素的选择和操作。在JavaScript中，传统的DOM操作相对复杂，而jQuery通过其丰富的选择器集合，使得开发者能够更高效、更简洁地选取页面上的特定元素。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值