jQuery 选择器

一、基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).

选择器	描述	返回
#id	根据给定的id匹配一个元素	单个元素组成的集合
.class	根据给定的类名匹配元素	集合元素
element	根据给定的元素名匹配元素	集合元素
*	匹配所有元素	集合元素
selector1,selector2, selector3....	将每一个选择器匹配到的元素合并后一起返回	集合元素

示例代码如下：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <style type="text/css">
 7             div, span, p {
 8                  140px;
 9                 height: 140px;
10                 margin: 5px;
11                 background: #aaa;
12                 border: #000 1px solid;
13                 float: left;
14                 font-size: 17px;
15                 font-family: Verdana;
16             }
17             
18             div.mini {
19                  55px;
20                 height: 55px;
21                 background-color: #aaa;
22                 font-size: 12px;
23             }
24             
25             div.hide {
26                 display: none;
27             }            
28         </style>
29         
30         <!-- 导入 jQuery 库 -->
31         <script type="text/javascript" src="jquery-1.7.2.js"></script>
32         <script type="text/javascript">
33             //1.基本选择器
34             $(function(){
35                 //1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")
36                 //2. 为选择的 jQuery 对象添加 onclick 响应函数: 
37                 // $("#btn1").click(function(){}), 响应函数的代码
38                 //写在 function(){} 的中括号中.
39                 $("#btn1").click(function(){
40                     $("#one").css("background", "#ffbbaa");
41                 });
42                 $("#btn2").click(function(){
43                     $(".mini").css("background", "#ffbbaa");
44                 });
45                 $("#btn3").click(function(){
46                     $("div").css("background", "#ffbbaa");
47                 });
48                 $("#btn4").click(function(){
49                     $("*").css("background", "#ffbbaa");
50                 });
51                 $("#btn5").click(function(){
52                     $("span,#two").css("background", "#ffbbaa");
53                 });
54             })
55         
56         </script>
57         
58     </head>
59     <body>        
60         <input type="button" value="选择 id 为 one 的元素" id="btn1" />
61         <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
62         <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
63         <input type="button" value="选择 所有的元素" id="btn4" />
64         <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
65         
66         <br><br>
67         <div class="one" id="one">
68             id 为 one,class 为 one 的div
69             <div class="mini">class为mini</div>
70         </div>
71         <div class="one" id="two" title="test">
72             id为two,class为one,title为test的div
73             <div class="mini" title="other">class为mini,title为other</div>
74             <div class="mini" title="test">class为mini,title为test</div>
75         </div>
76         <div class="one">
77             <div class="mini">class为mini</div>
78             <div class="mini">class为mini</div>
79             <div class="mini">class为mini</div>
80             <div class="mini"></div>
81         </div>
82         <div class="one">
83             <div class="mini">class为mini</div>
84             <div class="mini">class为mini</div>
85             <div class="mini">class为mini</div>
86             <div class="mini" title="tesst">class为mini,title为tesst</div>
87         </div>
88         <div style="display:none;" class="none">style的display为"none"的div</div>
89         <div class="hide">class为"hide"的div</div>
90         <div>
91             包含input的type为"hidden"的div<input type="hidden" size="8">
92         </div>
93         <span id="span">^^span元素^^</span>
94     </body>
95 </html>

View Code

二、层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

选择器	描述	返回
$("ancestor descendant")	选取ancestor的所有的descendant（后代）元素	集合元素
$("parent > child")	选取parent元素下的child（子）元素，与 $("ancestor descendant")有区别， $("ancestor descendant")选择的是后代元素	集合元素
$("prev + next")	选取紧接在prev后面的下一个next元素	集合元素
$("prev ~ siblings")	选取prev元素后面的所有siblings元素	集合元素

注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

示例代码如下：

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>Untitled Document</title>
  6         <style type="text/css">
  7             div, span, p {
  8                  140px;
  9                 height: 140px;
 10                 margin: 5px;
 11                 background: #aaa;
 12                 border: #000 1px solid;
 13                 float: left;
 14                 font-size: 17px;
 15                 font-family: Verdana;
 16             }
 17             
 18             div.mini {
 19                  55px;
 20                 height: 55px;
 21                 background-color: #aaa;
 22                 font-size: 12px;
 23             }
 24             
 25             div.hide {
 26                 display: none;
 27             }            
 28         </style>
 29         <script type="text/javascript" src="jquery-1.7.2.js"></script>
 30         <script type="text/javascript">
 31             //层次选择器
 32             $(function(){
 33                 
 34                 $("#btn1").click(function(){
 35                     $("body div").css("background", "#ffbbaa");
 36                 });
 37                 $("#btn2").click(function(){
 38                     $("body > div").css("background", "#ffbbaa");
 39                 });
 40                 $("#btn3").click(function(){
 41                     $("#one + div").css("background", "#ffbbaa");
 42                 });
 43                 
 44                 $("#btn4").click(function(){
 45                     $("#two ~ div").css("background", "#ffbbaa");
 46                 });
 47                 $("#btn5").click(function(){
 48                     $("#two").siblings("div").css("background", "#ffbbaa");
 49                 });
 50                 $("#btn6").click(function(){
 51                     //以下选择器选择的是近邻 #one 的 span 元素, 若该span
 52                     //和 #one 不相邻, 选择器无效. 
 53                     //$("#one + span").css("background", "#ffbbaa");
 54                     $("#one").nextAll("span:first").css("background", "#ffbbaa");
 55                 });
 56                 $("#btn7").click(function(){
 57                     $("#two").prevAll("div").css("background", "#ffbbaa");
 58                 });
 59                 
 60             })
 61         
 62         </script>
 63     </head>
 64     <body>        
 65         <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
 66         <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
 67         <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
 68         <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
 69         <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
 70         <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
 71         <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" />
 72         
 73         <br><br>
 74         <div class="one" id="one">
 75             id 为 one,class 为 one 的div
 76             <div class="mini">class为mini</div>
 77         </div>
 78         <div class="one" id="two" title="test">
 79             id为two,class为one,title为test的div
 80             <div class="mini" title="other">class为mini,title为other</div>
 81             <div class="mini" title="test">class为mini,title为test</div>
 82         </div>
 83         <div class="one">
 84             <div class="mini">class为mini</div>
 85             <div class="mini">class为mini</div>
 86             <div class="mini">class为mini</div>
 87             <div class="mini"></div>
 88         </div>
 89         <div class="one">
 90             <div class="mini">class为mini</div>
 91             <div class="mini">class为mini</div>
 92             <div class="mini">class为mini</div>
 93             <div class="mini" title="tesst">class为mini,title为tesst</div>
 94         </div>
 95         <div style="display:none;" class="none">style的display为"none"的div</div>
 96         <div class="hide">class为"hide"的div</div>
 97         <div>
 98             包含input的type为"hidden"的div<input type="hidden" size="8">
 99         </div>
100         <span id="span">^^span元素^^</span>
101         <span id="span">--span元素--</span>
102     </body>
103 </html>

View Code

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

三、基本过滤选择器

选择器	描述	返回
:first	选取第一个元素	单个元素的集合
:last	选取最后一个元素	集合元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素
:even	选取索引是偶数的所有元素，索引从0开始	集合元素
:odd	选取索引是奇数的所有元素，索引从0开始	集合元素
:eq(index)	选取索引等于index的元素，索引从0开始	集合元素
:gt(index)	选取索引大于index的元素，索引从0开始	集合元素
:lt(index)	选取索引小于index的元素，索引从0开始	集合元素
:header	选取所有的标签元素，如h1，h2等	集合元素
:animated	选取当前正在执行动画的所有元素	集合元素

示例代码如下：

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>Untitled Document</title>
  6         <style type="text/css">
  7             div, span, p {
  8                  140px;
  9                 height: 140px;
 10                 margin: 5px;
 11                 background: #aaa;
 12                 border: #000 1px solid;
 13                 float: left;
 14                 font-size: 17px;
 15                 font-family: Verdana;
 16             }
 17             
 18             div.mini {
 19                  55px;
 20                 height: 55px;
 21                 background-color: #aaa;
 22                 font-size: 12px;
 23             }
 24             
 25             div.hide {
 26                 display: none;
 27             }            
 28         </style>
 29         <script type="text/javascript" src="jquery-1.7.2.js"></script>
 30         <script type="text/javascript">
 31             //基本过滤选择器
 32             $(document).ready(function(){
 33                 function anmateIt(){
 34                     $("#mover").slideToggle("slow", anmateIt);
 35                 }
 36                 anmateIt();
 37                 
 38                 $("#btn1").click(function(){
 39                     $("div:first").css("background", "#ffbbaa");
 40                 });
 41                 $("#btn2").click(function(){
 42                     $("div:last").css("background", "#ffbbaa");
 43                 });
 44                 $("#btn3").click(function(){
 45                     $("div:not(.one)").css("background", "#ffbbaa");
 46                 });
 47                 
 48                 $("#btn4").click(function(){
 49                     $("div:even").css("background", "#ffbbaa");
 50                 });
 51                 $("#btn5").click(function(){
 52                     $("div:odd").css("background", "#ffbbaa");
 53                 });
 54                 $("#btn6").click(function(){
 55                     $("div:gt(3)").css("background", "#ffbbaa");
 56                 });
 57                 
 58                 $("#btn7").click(function(){
 59                     $("div:eq(3)").css("background", "#ffbbaa");
 60                 });
 61                 $("#btn8").click(function(){
 62                     $("div:lt(3)").css("background", "#ffbbaa");
 63                 });
 64                 $("#btn9").click(function(){
 65                     $(":header").css("background", "#ffbbaa");
 66                 });
 67                 
 68                 $("#btn10").click(function(){
 69                     $(":animated").css("background", "#ffbbaa");
 70                 });
 71                 $("#btn11").click(function(){
 72                     $("#two").nextAll("span:first").css("background", "#ffbbaa");
 73                 });
 74                 
 75             });
 76             
 77             
 78         </script>
 79     </head>
 80     <body>        
 81         <input type="button" value="选择第一个 div 元素" id="btn1" />
 82         <input type="button" value="选择最后一个 div 元素" id="btn2" />
 83         <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
 84         
 85         <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
 86         <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
 87         <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
 88         
 89         <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
 90         <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
 91         <input type="button" value="选择所有的标题元素" id="btn9" />
 92         
 93         <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
 94         <input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" />
 95         
 96         <h3>基本选择器.</h3>
 97         <br><br>
 98         <div class="one" id="one">
 99             id 为 one,class 为 one 的div
100             <div class="mini">class为mini</div>
101         </div>
102         <div class="one" id="two" title="test">
103             id为two,class为one,title为test的div
104             <div class="mini" title="other">class为mini,title为other</div>
105             <div class="mini" title="test">class为mini,title为test</div>
106         </div>
107         <div class="one">
108             <div class="mini">class为mini</div>
109             <div class="mini">class为mini</div>
110             <div class="mini">class为mini</div>
111             <div class="mini"></div>
112         </div>
113         <div class="one">
114             <div class="mini">class为mini</div>
115             <div class="mini">class为mini</div>
116             <div class="mini">class为mini</div>
117             <div class="mini" title="tesst">class为mini,title为tesst</div>
118         </div>
119         <div style="display:none;" class="none">style的display为"none"的div</div>
120         <div class="hide">class为"hide"的div</div>
121         <div>
122             包含input的type为"hidden"的div<input type="hidden" size="8">
123         </div>
124         <span id="span">^^span元素 111^^</span>
125         <span id="span">^^span元素 222^^</span>
126         <div id="mover">正在执行动画的div元素.</div>
127     </body>
128 </html>

View Code

四、内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

选择器	描述	返回
:contains(text)	选取含有文本内容text的元素	集合元素
:empty	选取不包含子元素或者文本的空元素	集合元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素
:parent	选取含有子元素或则文本的元素	集合元素

示例代码如下：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <link rel="stylesheet" type="text/css" href="css/style.css">
 7         <style type="text/css">
 8             div, span, p {
 9                  140px;
10                 height: 140px;
11                 margin: 5px;
12                 background: #aaa;
13                 border: #000 1px solid;
14                 float: left;
15                 font-size: 17px;
16                 font-family: Verdana;
17             }
18             
19             div.mini {
20                  55px;
21                 height: 55px;
22                 background-color: #aaa;
23                 font-size: 12px;
24             }
25             
26             div.hide {
27                 display: none;
28             }            
29         </style>
30         <script type="text/javascript" src="jquery-1.7.2.js"></script>
31         <script type="text/javascript">
32             //内容过滤选择器
33             $(document).ready(function(){
34                 
35                 $("#btn1").click(function(){
36                     $("div:contains('di')").css("background", "#ffbbaa");
37                 });
38                 $("#btn2").click(function(){
39                     $("div:empty").css("background", "#ffbbaa");
40                 });
41                 $("#btn3").click(function(){
42                     $("div:has(.mini)").css("background", "#ffbbaa");
43                 });
44                 
45                 $("#btn4").click(function(){
46                     $("div:parent").css("background", "#ffbbaa");
47                     //$("div:not(:empty)").css("background", "#ffbbaa");
48                 });
49                 
50             });
51             
52         </script>
53     </head>
54     <body>        
55         <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
56         <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
57         <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
58         <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
59         
60         <br><br>
61         <div class="one" id="one">
62             id 为 one,class 为 one 的div
63             <div class="mini">class为mini</div>
64         </div>
65         <div class="one" id="two" title="test">
66             id为two,class为one,title为test的div
67             <div class="mini" title="other">class为mini,title为other</div>
68             <div class="mini" title="test">class为mini,title为test</div>
69         </div>
70         <div class="one">
71             <div class="mini">class为mini</div>
72             <div class="mini">class为mini</div>
73             <div class="mini">class为mini</div>
74             <div class="mini"></div>
75         </div>
76         <div class="one">
77             <div class="mini">class为mini</div>
78             <div class="mini">class为mini</div>
79             <div class="mini">class为mini</div>
80             <div class="mini" title="tesst">class为mini,title为tesst</div>
81         </div>
82         <div style="display:none;" class="none">style的display为"none"的div</div>
83         <div class="hide">class为"hide"的div</div>
84         <div>
85             包含input的type为"hidden"的div<input type="hidden" size="8">
86         </div>
87         <div id="mover">正在执行动画的div元素.</div>
88     </body>
89 </html>

View Code

五、可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

选择器	描述	返回
:hidden	选取所有不可见的元素	集合元素
:visible	选取所有可见的元素	集合元素

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素

示例代码如下：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <link rel="stylesheet" type="text/css" href="css/style.css">
 7                 <style type="text/css">
 8             div, span, p {
 9                  140px;
10                 height: 140px;
11                 margin: 5px;
12                 background: #aaa;
13                 border: #000 1px solid;
14                 float: left;
15                 font-size: 17px;
16                 font-family: Verdana;
17             }
18             
19             div.mini {
20                  55px;
21                 height: 55px;
22                 background-color: #aaa;
23                 font-size: 12px;
24             }
25             
26             div.hide {
27                 display: none;
28             }            
29         </style>
30         <script type="text/javascript" src="jquery-1.7.2.js"></script>
31         <script type="text/javascript">
32             //可见性过滤选择器
33             $(document).ready(function(){
34                 
35                 $("#btn1").click(function(){
36                     $("div:visible").css("background", "#ffbbaa");
37                 });
38                 $("#btn2").click(function(){
39                     //alert($("div:hidden").length);
40                     //show(time): 可以使不可见的元素变为可见, time 表示时间, 以
41                     //毫秒为单位
42                     //jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该
43                     //方法的 jQuery 对象: 可以继续调用该对象的其他方法. 
44                     $("div:hidden").show(2000).css("background", 
45                             "#ffbbaa");
46                 });
47                 $("#btn3").click(function(){
48                     //val() 方法可以返回某一个表单元素的 value 属性值. 
49                     alert($("input:hidden").val());
50                     //alert($("input:hidden").attr("value"));
51                 });
52                 
53             });
54             
55         </script>
56     </head>
57     <body>        
58         <input type="button" value="选取所有可见的  div 元素" id="btn1">
59         <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
60         <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
61         
62         <br><br>
63         <div class="one" id="one">
64             id 为 one,class 为 one 的div
65             <div class="mini">class为mini</div>
66         </div>
67         <div class="one" id="two" title="test">
68             id为two,class为one,title为test的div
69             <div class="mini" title="other">class为mini,title为other</div>
70             <div class="mini" title="test">class为mini,title为test</div>
71         </div>
72         <div class="one">
73             <div class="mini">class为mini</div>
74             <div class="mini">class为mini</div>
75             <div class="mini">class为mini</div>
76             <div class="mini"></div>
77         </div>
78         <div class="one">
79             <div class="mini">class为mini</div>
80             <div class="mini">class为mini</div>
81             <div class="mini">class为mini</div>
82             <div class="mini" title="tesst">class为mini,title为tesst</div>
83         </div>
84         <div style="display:none;" class="none">style的display为"none"的div</div>
85         <div class="hide">class为"hide"的div</div>
86         <div>
87             包含input的type为"hidden"的div
88             <input type="hidden" value="123456789000" size="8">
89         </div>
90         <div id="mover">正在执行动画的div元素.</div>
91     </body>
92 </html>

View Code

六、属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

选择器	描述	返回
[attribute]	选取拥有此属性的元素	集合元素
[attribute=value]	选取指定属性的值为value的元素	集合元素
[attribute!=value]	选取指定属性的值不等于value的元素	集合元素
[attribute^=value]	选取指定属性的值以value开始的元素	集合元素
[attribute$=value]	选取指定属性的值以value结束的元素	集合元素
[attribute*=value]	选取指定元素的值含有value的元素	集合元素
[selector1][selector2] ......[selecotrN]	用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围	集合元素

示例代码如下：

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>Untitled Document</title>
  6         <link rel="stylesheet" type="text/css" href="css/style.css">
  7         <style type="text/css">
  8             div, span, p {
  9                  140px;
 10                 height: 140px;
 11                 margin: 5px;
 12                 background: #aaa;
 13                 border: #000 1px solid;
 14                 float: left;
 15                 font-size: 17px;
 16                 font-family: Verdana;
 17             }
 18             
 19             div.mini {
 20                  55px;
 21                 height: 55px;
 22                 background-color: #aaa;
 23                 font-size: 12px;
 24             }
 25             
 26             div.hide {
 27                 display: none;
 28             }            
 29         </style>
 30         <script type="text/javascript" src="jquery-1.7.2.js"></script>
 31         <script type="text/javascript">
 32             //属性过滤选择器
 33             $(function(){
 34                 
 35                 $("#btn1").click(function(){
 36                     $("div[title]").css("background", "#ffbbaa");
 37                 });
 38                 $("#btn2").click(function(){
 39                     $("div[title='test']").css("background", "#ffbbaa");
 40                 });
 41                 $("#btn3").click(function(){
 42                     //选取的元素中包含没有 title 的 div 元素. 
 43                     $("div[title!='test']").css("background", "#ffbbaa");
 44                 });
 45                 
 46                 $("#btn4").click(function(){
 47                     $("div[title^='te']").css("background", "#ffbbaa");
 48                 });
 49                 
 50                 $("#btn5").click(function(){
 51                     $("div[title$='est']").css("background", "#ffbbaa");
 52                 });
 53                 $("#btn6").click(function(){
 54                     $("div[title*='es']").css("background", "#ffbbaa");
 55                 });
 56                 $("#btn7").click(function(){
 57                     $("div[id][title*='es']").css("background", "#ffbbaa");
 58                 });
 59                 
 60                 $("#btn8").click(function(){
 61                     $("div[title][title!='test']").css("background", "#ffbbaa");
 62                 });
 63                 
 64             })
 65         </script>
 66     </head>
 67     <body>        
 68         <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
 69         <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/>
 70         <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/>
 71         <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/>
 72         
 73         <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/>
 74         <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/>
 75         <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/>
 76         <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>
 77         
 78         <br><br>
 79         <div class="one" id="one">
 80             id 为 one,class 为 one 的div
 81             <div class="mini">class为mini</div>
 82         </div>
 83         <div class="one" id="two" title="test">
 84             id为two,class为one,title为test的div
 85             <div class="mini" title="other">class为mini,title为other</div>
 86             <div class="mini" title="test">class为mini,title为test</div>
 87         </div>
 88         <div class="one">
 89             <div class="mini">class为mini</div>
 90             <div class="mini">class为mini</div>
 91             <div class="mini">class为mini</div>
 92             <div class="mini"></div>
 93         </div>
 94         <div class="one">
 95             <div class="mini">class为mini</div>
 96             <div class="mini">class为mini</div>
 97             <div class="mini">class为mini</div>
 98             <div class="mini" title="tesst">class为mini,title为tesst</div>
 99         </div>
100         <div style="display:none;" class="none">style的display为"none"的div</div>
101         <div class="hide">class为"hide"的div</div>
102         <div>
103             包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
104         </div>
105         <div id="mover">正在执行动画的div元素.</div>
106     </body>
107 </html>

View Code

七、子元素过滤选择器

选择器	描述	返回
:nth-child(index/even/odd/equation)	选取每个父元素下的第index个子元素或者奇偶元素（index从1开始）	集合元素
:first-child	选取每个父元素的第一个子元素	集合元素
:last-child	选取每个父元素的最后一个子元素	集合元素
:only-child	如果某个元素是它父元素中唯一的子元素，那么将被匹配	集合元素

nth-child() 选择器详解如下：
　　(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
　　(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
　　(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素
　　(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

示例代码如下：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <link rel="stylesheet" type="text/css" href="css/style.css">
 7                 <style type="text/css">
 8             div, span, p {
 9                  140px;
10                 height: 140px;
11                 margin: 5px;
12                 background: #aaa;
13                 border: #000 1px solid;
14                 float: left;
15                 font-size: 17px;
16                 font-family: Verdana;
17             }
18             
19             div.mini {
20                  55px;
21                 height: 55px;
22                 background-color: #aaa;
23                 font-size: 12px;
24             }
25             
26             div.hide {
27                 display: none;
28             }            
29         </style>
30         <script type="text/javascript" src="jquery-1.7.2.js"></script>
31         <script type="text/javascript">
32             //子元素过滤选择器
33             $(document).ready(function(){
34                 
35                 $("#btn1").click(function(){
36                     //选取子元素, 需要在选择器前添加一个空格. 
37                     $("div.one :nth-child(2)").css("background", "#ffbbaa");
38                 });
39                 $("#btn2").click(function(){
40                     $("div.one :first-child").css("background", "#ffbbaa");
41                 });
42                 $("#btn3").click(function(){
43                     $("div.one :last-child").css("background", "#ffbbaa");
44                 });
45                 
46                 $("#btn4").click(function(){
47                     $("div.one :only-child").css("background", "#ffbbaa");
48                 });
49                 
50             });
51         </script>
52     </head>
53     <body>        
54         <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
55         <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
56         <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
57         <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
58         
59         <br><br>
60         <div class="one" id="one">
61             id 为 one,class 为 one 的div
62             <div class="mini">class为mini</div>
63         </div>
64         <div class="one" id="two" title="test">
65             id为two,class为one,title为test的div
66             <div class="mini" title="other">class为mini,title为other</div>
67             <div class="mini" title="test">class为mini,title为test</div>
68         </div>
69         <div class="one">
70             <div class="mini">class为mini</div>
71             <div class="mini">class为mini</div>
72             <div class="mini">class为mini</div>
73             <div class="mini"></div>
74         </div>
75         <div class="one">
76             <div class="mini">class为mini</div>
77             <div class="mini">class为mini</div>
78             <div class="mini">class为mini</div>
79             <div class="mini" title="tesst">class为mini,title为tesst</div>
80         </div>
81         <div style="display:none;" class="none">style的display为"none"的div</div>
82         <div class="hide">class为"hide"的div</div>
83         <div>
84             包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
85         </div>
86         <div id="mover">正在执行动画的div元素.</div>
87     </body>
88 </html>

View Code

八、表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

选择器	描述	返回
:enable	选取所有可用元素	集合元素
:disable	选取所有不可以元素	集合元素
:checked	选取所有被选中的元素（单选框，复选框）	集合元素
:selected	选取所有被选中选项元素（下拉列表）	集合元素

示例代码如下：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <script type="text/javascript" src="jquery-1.7.2.js"></script>
 7         <script type="text/javascript">
 8             //表单对象属性过滤选择器
 9             $(function(){
10                 $("#btn1").click(function(){
11                     //使所有的可用的单行文本框的 value 值变为 尚硅谷
12                     alert($(":text:enabled").val());
13                     $(":text:enabled").val("尚硅谷");
14                 });
15                 $("#btn2").click(function(){
16                     $(":text:disabled").val("www.atguigu.com");
17                 });
18                 $("#btn3").click(function(){
19                     var num = 
20                         $(":checkbox[name='newsletter']:checked").length;
21                     alert(num);
22                 });
23                 
24                 $("#btn5").click(function(){
25                     //实际被选择的不是 select, 而是 select 的 option 子节点
26                     //所以要加一个 空格. 
27                     //var len = $("select :selected").length
28                     //alert(len);
29                     
30                     //因为 $("select :selected") 选择的是一个数组
31                     //当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. 
32                     //alert($("select :selected").val());
33                     
34                     //jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
35                     //得到的 DOM 对象, 而不是一个 jQuery 对象
36                     $("select :selected").each(function(){
37                         alert(this.value);
38                     });
39                 });
40                 
41                 $("#btn4").click(function(){
42                     $(":checkbox[name='newsletter']:checked").each(function(){
43                         alert(this.value);
44                     });
45                 });
46             })
47         </script>
48         
49     </head>
50     <body>
51         <h3>表单对象属性过滤选择器</h3>
52          <button id="btn1">对表单内 可用input 赋值操作.</button>
53            <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
54          <button id="btn3">获取多选框选中的个数.</button>
55          <button id="btn4">获取多选框选中的内容.</button><br /><br />
56          <button id="btn5">获取下拉框选中的内容.</button><br /><br />
57          
58         <form id="form1" action="#">            
59             可用元素: <input name="add" value="可用文本框1"/><br>
60             不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>
61             可用元素: <input name="che" value="可用文本框2"/><br>
62             不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br>
63             <br>
64             
65             多选框: <br>
66             <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
67             <input type="checkbox" name="newsletter" value="test2" />test2
68             <input type="checkbox" name="newsletter" value="test3" />test3
69             <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
70             <input type="checkbox" name="newsletter" value="test5" />test5
71             
72             <br><br>
73             下拉列表1: <br>
74             <select name="test" multiple="multiple" style="height: 100px">
75                 <option>浙江</option>
76                 <option selected="selected">辽宁</option>
77                 <option>北京</option>
78                 <option selected="selected">天津</option>
79                 <option>广州</option>
80                 <option>湖北</option>
81             </select>
82             
83             <br><br>
84             下拉列表2: <br>
85             <select name="test2">
86                 <option>浙江</option>
87                 <option>辽宁</option>
88                 <option>北京</option>
89                 <option>天津</option>
90                 <option>广州</option>
91                 <option>湖北</option>
92             </select>
93             
94             <textarea rows="" cols=""></textarea>
95         </form>        
96     </body>
97 </html>

View Code

九、表单选择器