jQuery整理笔记二----jQuery选择器整理

最新推荐文章于 2022-10-13 17:37:31 发布

hai_cheng001

最新推荐文章于 2022-10-13 17:37:31 发布

阅读量2.6k

点赞数 5

分类专栏： jQuery jQuery 文章标签： jquery选择器过滤选择器层级选择器

本文链接：https://blog.csdn.net/caohaicheng/article/details/23911159

版权

jQuery 同时被 2 个专栏收录

21 篇文章 11 订阅

订阅专栏

jQuery

20 篇文章 1 订阅

订阅专栏

一、基本选择器

1、ID选择器

JavaScript提供了原生方法实现在DOM中选择指定ID值得元素。用法如下：

var element=document.getElementById("id");

jQuery简化了其操作： var $element=$("#id");

实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在执行效率上要低于JavaScript的原生方法。

2、类型选择器

跟ID选择器一样，JavaScript同样提供了原生的方法用来在DOM中选择指定类型的元素。

var elements=document.getElementByTagName(tagName"");

jQuery对其包装后的简化方法是 var $elements=$("tagName");

3、类选择器

JavaScript没有提供内置的类选择方法，我们可以自己为其拓展一个，代码如下：

document.getElementsByClassName=function(className){

     var el=[],

         _el=document.getElementsByTagName("*");   //获取所有元素

         for(var i=0;i<_el.length;i++){

            if(_el[i]==className){

              el[el.length]=_el[i];

            }

          }

    return el;

}

下面举个例子，一个页面有4个div,通过JavaScript使div1和div3的前景色设置成红色，通过jQuery将div2和div4的前景色设置成蓝色

代码如下实例2-1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  document.getElementsByClassName=function(className){

     var el=[],
         _el=document.getElementsByTagName("*");   //获取所有元素
         for(var i=0;i<_el.length;i++){
            if(_el[i].className==className){
              el[el.length]=_el[i];
            }
          }
		 return el;
	}

	window.οnlοad=function (){
		var redDiv= document.getElementsByClassName("red");
		for(var i=0;i<redDiv.length;i++){
		  redDiv[i].style.color="red";
		}
	};

	$(function(){
		$(".blue").css("color","blue");
	})
  </script>
 </head>

 <body>
  <div id="" class="red">
	div1
  </div>
  <div id="" class="blue">
	div2
  </div>
  <div id="" class="red">
	div3
  </div>
  <div id="" class="blue">
	
  </div>

 </body>
</html>

上述例子可以看得到jQuery的写法要相对简单一些，而且jQuery已经是一个成熟的框架了，它内部封装的类选择器方法要比咱们自定义的效率高。

4、通配选择器（"*"）

该选择器可以匹配上下文中的所有元素，下面示例将选择body下的所有元素

实例2-2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
	$(function(){
		$("body *").css("color","red");
		$("div *").css("color","blue");
	})
  //-->
  </script>
 </head>

 <body>
	<div id="" class="">
		div1
		<span class="">div下的span</span>
		<table>
		<tr>
			<td>div下的table</td>
		</tr>
		</table>
	</div>
	</br>
	<span class="">span1</span>
	</br>
	<textarea name="" rows="3" cols="80">textarea1</textarea>
		
	<table>
	</br>
	<tr>
		<td>table1</td>
	</tr>
	</table>
 </body>
</html>

5、分组选择器

jQuery支持CSS的分组选择器，通过这种方式可以扩大选择器的选择范围，同时增强jQuery选择器的应用能力，选个多组元素可以通过逗号分隔符来分隔多个不同的选择器。，这些选择器可以是任意类型的，也可以是复合选择器。

实例2-3：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
	$(function(){
		$("h2,#wrap,span.red,[title='text']").css("color","red");//分别选择了元素h2、id为wrap的、span下的class为red的、title为text的
	})
  </script>
 </head>

 <body>
	<h2>H2</h2>
	<div id="wrap" class="">
		DIV
	</div>
	<div id="" class="red">
		DIV_CLASS_RED
	</div>
	<span class="red">SPAN</span>
	<p title="text">P</p>
 </body>
</html>

二、层级选择器

层级选择器就是根据HTML文档结构中节点之间的包含或者并列关系，决定匹配元素的一种方法。

1、关系选择器

表2-1 关系选择器
选择器	说明
ancestor descendant	在给定祖先元素下匹配所有后代元素。ancestor，表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如：$("form input")可以匹配表单下的所有input元素。
parent>child	在给定父元素下匹配所有子元素。perent表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如：$("table>tr")可以匹配table下的所有tr元素
prev + next	匹配所有紧接在prev元素后的next元素。prev表示任何有效选择器，next表示一个有效选择器并且紧接着第一个选择器。例如：$("lable + input")匹配所有跟在lable后面的input元素
prev ~ siblings	匹配prev元素之后的所有siblings元素。prev表示任何有效选择器，siblings表示一个选择器，并且它是作为prev选择器的同辈。例如：$("form ~ input")匹配所有跟form元素同辈的input元素。

通过上面的表格我们不一定能完全明白这几个选择器的细节地方，还是写个实例演示一下。

实例2-4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 关系选择器演示实例 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
	$(function(){
		$("div").css("border","solid 1px red");			//控制所有div元素的边框宽度为1 颜色为红色
		$("div>div").css("margin","2em");				//控制div下属的所有子div缩进两个中文字符
		$("div div").css("background","#ff0");			//控制一级div下属的所有div元素的背景色为#ff0
		$("div div div").css("background","#f0f");		//控制第三层div背景色为#f0f
		$("div + p").css("margin","2em");				//控制与div相邻的p元素缩进两个中文字符，只匹配div后面紧接着那个p元素
		$("div:eq(1) ~ p").css("background","blue");	//控制页面第二个div（eq(1)代表取第二个)之后所有的与第二个div同辈的p元素的背景色为蓝色
	})
  //-->
  </script>
 </head>

 <body>
	 <p>段落文本10</p>
	<div id="" class="">一级div元素
		<div id="" class="">二级div元素
			<div id="" class="">三级div元素
				
			</div>
			<p>段落文本31</p>
			<p>段落文本32</p>
		</div>
		<p>段落文本21</p>
		<p>段落文本22</p>
	</div>
	<p>段落文本11</p>
	<p>段落文本12</p>	
 </body>
</html>

2、子元素选择器

这个写个实例吧。

实例2-5：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
	$(function(){
		//$("ul li:nth-child(1)").css("background","#ff6")		//匹配每个ul元素下的第一个li元素，可能匹配0个或者多个
		//$("ul li:nth-child(3n+2)").css("background","#6ff")	//匹配每个ul元素下第3n+2个li元素，n取值为0，1,2，.......
		//$("ul li:first-child").css("color","red");			//匹配每个ul元素下的第一个li元素
		//$("ul li:first").css("color","red");					//匹配第一个ul元素下的第一个li元素 跟上面的那个是有区别的
		//$("ul li:last-child").css("color","blue");			//匹配每个ul元素下的最后一个li元素
		//$("ul li:last").css("color","red");					//匹配最后一个ul元素下的最后一个li元素
		$("ul li:only-child").css("color","red")				//如果li元素是ul元素下的唯一子元素(只有一个li元素,没有其他元素)，
																//那么可以匹配，否则不可匹配
	})
 //-->
 </script>
 <body>
	<ul>
		<li>列表11</li>
		<li>列表12</li>
		<li>列表13</li>
		<li>列表14</li>
		<li>列表15</li>
		<li>列表16</li>
	</ul>
	<ul>
		<li>列表21</li>
		<li>列表22</li>
		<li>列表23</li>
		<li>列表24</li>
		<li>列表25</li>
		<li>列表26</li>
	</ul>
 </body>
</html>

注意：

A、:nth-child(even) :nth-child(odd) //分别是匹配偶数位元素和奇数位元素可以用2n和2n+1替代

B、我们用过的eq(n)选择器是从0开始计数的，而刚刚整理的那些选择器是从1开始计数的，使用的时候要注意

三、过滤选择器

过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器与CSS的伪类选择器语法格式相同，即以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器、可见过滤器。下面分别介绍：

1、定位过滤器

定位过滤器主要通过编号和排位筛选特定位置上的元素，或者过滤掉特定元素.

以上效果实现代码实例2-6：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			$("tr:first").css("color","red");					//设置第一行字体为红色
			$("tr:eq(0)").css("font-size","20px");				//设置第一行字体大小为20像素 font-size:20px
			$("tr:last").css("color","blue");					//设置最后一行字体为蓝色
			$("tr:even").css("background","#ffd");				//设置偶数行背景色为#ffd
			$("tr:odd").css("background","#dff");				//设置技术行背景色为#dff
			$("tr:gt(3)").css("font-size","14px");				//设置从第五行开始所有的字体大小为14px
			$("tr:lt(4)").css("font-size","14px");				//设置1-4行字体大小为14px
			
		})
  //-->
  </script>
 </head>

 <body>
	<table>
	<tr>
		<th>选择器</th>
		<th>说  明</th>
	</tr>
	<tr>
		<td>:first</td>
		<td>匹配找到的第一个元素，例如，$("tr:first")表示匹配表格的第一行</td>
	</tr>
	<tr>
		<td>:last</td>
		<td>匹配找到的最后一个元素，例如，$("tr:last")表示匹配表格的最后一行</td>
	</tr>
	<tr>
		<td>:not</td>
		<td>去除所有与给定选择器匹配的元素。例如，$("input:not(:checked)")可以匹配所有未选中的input元素</td>
	</tr>
	<tr>
		<td>:even</td>
		<td>匹配所有索引值为偶数的元素，从0开始计数。例如$("tr:even"),可以匹配表格的偶数行</td>
	</tr>
	<tr>
		<td>:odd</td>
		<td>上面是偶数，这个是奇数</td>
	</tr>
	<tr>
		<td>:eq</td>
		<td>匹配一个给定索引值的元素，例如，$("tr:eq(0)")可以匹配第一个tr</td>
	</tr>
	<tr>
		<td>:gt</td>
		<td>匹配所有大于给定索引值的元素，从0开始计数。例如，$("tr:gt(0)")可以匹配表格的第二行以及后面的行</td>
	</tr>
	<tr>
		<td>:lt</td>
		<td>上面是大于，这个是小于，eq就相当于等于呗</td>
	</tr>
	<tr>
		<td>:header</td>
		<td>匹配如h1\h2\h3类标题元素</td>
	</tr>
	<tr>
		<td>:animated</td>
		<td>匹配所有正在执行动画效果的元素</td>
	</tr>
	</table>
 </body>
</html>

2、内容过滤器

内容过滤器主要根据匹配元素所包含的的子元素或者文本内容进行过滤。主要有四种方式：

表2-2 内容选择器
选择器	说明
:contains	匹配包含给定文本的元素，例如，$("div:contains('图片')") 匹配所有包含文本"图片"的div元素
:has	匹配含有选择器所匹配的元素的元素，例如，$("div:has(p)")匹配所有包含p元素的div元素
:empty	匹配所有不包含子元素或者文本的空元素
:parent	匹配含有子元素或者文本的元素，与empty相互对应

实例2-7：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			$("li:empty").text("空内容");				//匹配空li元素
			$("div ul:parent").css("background","#ff1");//匹配div下包含的不为空的ul元素
			$("h2:contains('标题')").css("color","red");//匹配包含文本内容"标题"的h2元素
			$("p:has(span)").css("color","blue");		//包含span元素的p元素	
		})
  //-->
  </script>
 </head>

 <body>
	 <div id="" class="">
		<h2>标题</h2>
		<p>段落文本1</p>
		<p><span>段落文本2</span></p>
		<ul>
			<li></li>
			<li></li>
		</ul>
	 </div>
 </body>
</html>

执行效果如下：

3、可见过滤器

可见过滤器就是根据元素的可见或者隐藏来进行匹配的

表2-3 可见过滤器
选择器	说明
:hidden	匹配所有不可见元素，或者type为hidden的元素
:visible	匹配所有可见元素

这个比较简单好记

实例2-8：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
	$(function(){
		$("p:odd").hide();
		$("p:odd").css("color","red");
		$("p:visible").css("color","blue");
		$("p:hidden").show();
	})
  //-->
  </script>
 </head>

 <body>
	<p>段落文本1</p>
	<p>段落文本2</p>
	<p>段落文本3</p>
	<p>段落文本4</p>
 </body>
</html>

执行效果：

四、属性选择器

属性选择器一般是根据元素的属性和其值作为过滤的条件来匹配相应的DOM元素

1、七种属性选择器

表2-4 属性选择器
选择器	说明
[attribute]	匹配包含给定属性的元素，例如，$("div[id]") 匹配所有包含id属性的div元素
[attridute=value]	匹配属性等于特定值的元素，属性值的引号大多数是可选的，如果属性值包含"]"时，需要加引号以避免冲突。
[attridute!=value]	跟上面的相对应，很好理解
[attridute^=value]	匹配给定的属性是以某些值开始的元素，例如，$("input[name^='text']")表示所有name属性值是以text开始的input元素
[attridute$=value]	匹配给定的属性是以某些值结尾的元素，跟上面的相对应
[attridute*=value]	匹配给定的属性是包含某些值得元素
[selector1][selector2][selector3]	复合属性选择器，需要同时满足多个条件时使用，例如，$(input[name*='text'][id])表示匹配所有name属性值包含text的且包含id属性的input元素。

2、使用属性选择器示例

看一个示例，在这个示例中将根据超链接文件的类型，分别为不同类型的文件添加图标。

实例2-8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
	$(function(){
		var $a1=$("a[href$=pdf]");
		$a1.html($a1.attr("href")+"<img src='images/pdf.jpg'/>");
		var $a2=$("a[href$=rar]");
		$a2.html($a2.attr("href")+"<img src='images/rar.jpg'/>");
		var $a3=$("a[href$=jpg],[href$=bmp]");
		$a3.html($a3.attr("href")+"<img src='images/jpg.jpg'/>");
		var $a4=$("a[href^='http']");
		$a4.html($a4.attr("href")+"<img src='images/html.jpg'/>");	
		

	})
  //-->
  </script>
 </head>

 <body>
  <a href="1.pdf">超链接</a><br>
  <a href="2.rar">超链接</a><br>
  <a href="3.jpg">超链接</a><br>
  <a href="4.bmp">超链接</a><br>
  <a href="http://www.baidu.com">超链接</a>
 </body>
</html>

执行前后效果：

五、表单选择器

表单是页面中使用频率较高的元素之一，但是很多表单域都是使用input元素来定义的，为了方便用户能够灵活操作表单，jQuery专门定义了表单选择器，使用表单选择器可以方便地获取表单中某类表单域对象。

1、基本表单选择器

表2-5 表单选择器
选择器	说明
:input	匹配所有input、textarea、select和button元素
:text	匹配所有单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:image	匹配所有图像域
:reset	匹配所有重置按钮
:button	匹配所有普通按钮
:file	匹配所有文件域
:hidden	匹配所有隐藏域

下面看一个表单实例

实例2-9：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			$("#form1 :text").val("修改后的文本域");
			$("#form1 :password").val("修改后的密码域");
			$("#form1 :checkbox").val("修改后的复选框");
			$("#form1 :radio").val("修改后的单选框");
			$("#form1 :image").val("修改后的图像域");
			$("#form1 :file").val("修改后的文件框");
			$("#form1 :hidden").val("修改后的隐藏域");
			$("#form1 :button").val("修改后的普通按钮");
			$("#form1 :submit").val("修改后的提交按钮");
			$("#form1 :reset").val("修改后的重置按钮");
		})
  //-->
  </script>
 </head>

 <body>
	<form id="form1" method="post" >
		<input type="text" name="" value="文本域"><br>
		<input type="password" name="" value="密码域"><br>
		<input type="checkbox" name="" value="复选框">复选框<br>
		<input type="radio" name="" value="单选按钮">单选按钮<br>
		<input type="image" src="" value="图像域"><br>
		<input type="file" src="" value="文件域"><br>
		<input type="hidden" name="" value="隐藏域"><br>
		<input type="button" value="普通按钮" οnclick=""><br>
		<input type="submit" value="提交按钮" οnclick=""><br>
		<input type="reset"  value="重置按钮" οnclick=""><br>
	 </form>
 </body>
</html>

处理前后效果图：

注意：$("#form1 text") 在form1后面有一个空格

2、高级表单选择器

除了简单的表单域选择器外，jQuery还根据表单域中特有的属性定义了4个表单属性选择器，这些选择器与基础表单选择器不同，它们可以选择任何类型的表单域，因为它主要根据表单属性来选择。

表2-6 高级表单选择器
选择器	说明
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有被选中的元素（复选框、单选按钮等，不包括select的option）
:selected	匹配所有选中的option元素

实例2-10：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			$("#form1 :disabled").val("不可用");
			$("#form1 :enabled").val("可用");
			$("#form1 :checked").removeAttr("checked");
			$("#form1 :selected").removeAttr("selected");
		})
  //-->
  </script>
 </head>

 <body>
	<form id="form1" method="post" >
		<input type="text" name=""  disabled="disabled" value="文本域"><br>
		<input type="text"          disabled="disabled" value="文本域"><br>
		<input type="text"  value="文本域"><br>
		<input type="checkbox" name="" value="复选框" checked="checked">复选框<br>
		<input type="radio" name="" value="单选按钮">单选按钮<br>
		<select name="">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3" selected>3</option>
		</select>
	 </form>
 </body>
</html>

前后效果：