目录

jquery选择器

基本选择器

  • id选择器
  • 标签选择器
  • class选择器
  • * ,选出所有元素
  • 组选择器

示例

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         // $(document).ready(function(){ 写法等同 $(function(){})
         $(document).ready(function(){
            //1.选择 id 为 one 的元素  #id
            $("#btn1").click(function(){
               $("#one").css("background-color","#bbffaa");
            });

            //2.选择 class 为 mini 的所有元素  .class
            $("#btn2").click(function(){
               $(".mini").css("background-color","#bbffaa");
            });

            //3.选择 元素名是 div 的所有元素 标签名选择器  直接传入标签名
            $("#btn3").click(function(){
               $("div").css("background-color","#bbffaa");
            });

            //4.选择所有的元素  所有元素选择器   *
            $("#btn4").click(function(){
               $("*").css("background-color","#bbffaa");
            });

            //5.选择所有的 span 元素和id为two的元素    [所有的 span 元素:标签选择器  标签名]
            //                      [id为two的元素:id选择器  #id]
            //                      组选择器  $(s1,s2...)
            $("#btn5").click(function(){
               $("span,#two").css("background-color","#bbffaa");
            });
         });
      </script>
   </head>
   <body>
<!--   <div>
      <h1>基本选择器</h1>
      <p>1、#id   id选择器   给核心函数$(),传入#+元素id值就会按照id查找出元素document.getElementById("id")<br/>
         2element 元素选择器  标签名选择器  给核心函数$(),传入标签名就会按照标签名找出元素document.getElementsByTagName("tagName")</br>
         3.class 类名选择器  按照元素的class值查找出相应元素
         4*   匹配所有会匹配所有的元素   $(*)会选出所有的dom对象
         5selector1,selector2.....selectorN组选择器他会匹配满足这些选择器的所有元素
         $(selector1) + $(selector2) +………………+$(selectorN)
         
         注意点
         1id选择器返回的肯定是单个的对象其他的这几个返回的都是jquery对象的集合
         2返回的是jquery对象查询到的是响应的dom对象会被封装返回
         3组选择器中的selector可以是任意类型
      </p>
   </div>  -->   
      <input type="button" value="选择 id 为 one 的元素" id="btn1" />
      <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
      <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
      <input type="button" value="选择 所有的元素" id="btn4" />
      <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
      
      <br>
      <div class="one" id="one">
         id  one,class  one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <span class="one" id="span">^^span元素^^</span>
   </body>
</html>

层级选择器

  • 后代选择器, ancestor descendant
  • 子元素选择器,parent > child
  • 相邻元素选择器,prev + next
  • 兄弟元素选择器,prev ~ siblings

示例

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
      
      /*
      ancestor descendant:在给定的祖先元素(ancestor)下匹配所有的后代元素(descendant)  把两个选择器用空格隔开:选择后代元素
      parent > child  :在给定的父元素下匹配所有的子元素>   
      prev + next :匹配所有紧接在 prev 元素后的 next 元素
      prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素
            
            */
         $(document).ready(function(){
            //1.选择 body 内的所有 div 元素  
            $("#btn1").click(function(){
               $("body div").css("background", "#bbffaa");
            });

            //2.在 body 内, 选择div子元素  
            $("#btn2").click(function(){
               $("body>div").css("background", "#bbffaa");
            });

            //3.选择 id 为 one 的下一个 div 元素  
            $("#btn3").click(function(){
               $("#one+div").css("background", "#bbffaa");
            });

            //4.选择 id 为 two 的元素后面的所有 div 兄弟元素  所有的后面兄弟,#two ~ div
            $("#btn4").click(function(){
               $("#two~div").css("background", "#bbffaa");
            });
         });
      </script>
   </head>
   <body> 
   
<!--   <div>
      <h1>层级选择器:根据元素的层级关系选择元素</h1>
      ancestor descendant  后代选择器选择所有祖先元素是ancestor的后代元素
      parent > child           子元素选择器只要是parent的儿子就会被选出来
      prev + next          选择下一个相邻元素prev的下一个next元素
      prev ~ siblings       选出prev之后的所有相邻元素
   </div>  -->
      <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
      <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
      <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
      <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
      <br><br>
      <div class="one" id="one">
         id  one,class  one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <span id="span">^^span元素^^</span>
   </body>
</html>

过滤选择器

基本过滤选择器

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            function anmateIt(){
               $("#mover").slideToggle("slow", anmateIt);
            }
            anmateIt();
         });
/*
 * 
 :first   :获取第一个元素
 :last     :获取最后一个
 :not(selector)    :除了selector之外的元素
 :even :   选择索引为偶数的元素
 :odd :       选择索引为奇数的元素
 :eq(index) :  选择索引等于index的元素
 :gt(index) :选择索引 大于index的元素
 :lt(index) : 选择索引小于index的元素
 :header :   选中所有的标题标签   h1~h6
 :animated :选中所有正在执行动画的元素
 
 1、div:gt(3)
 
*/
         $(document).ready(function(){
            //1.选择第一个 div 元素  先选出div 不能有空格  s1  s2表示的后代元素选择器 
            $("#btn1").click(function(){
               $("div:first").css("background", "#bbffaa");
               //alert($(":first")[0]);  html标签
            });

            //2.选择最后一个 div 元素
            $("#btn2").click(function(){
               $("div:last").css("background", "#bbffaa");
            });

            //3.选择class不为 one 的所有 div 元素
            // 选择class为one的所有div元素 $("div.one")
            $("#btn3").click(function(){
               $("div:not(.one)").css("background", "#bbffaa");
            });

            //4.选择索引值为偶数的 div 元素,索引计算是按顺序计算下标的, 因为html加载是按照顺序进行扫描的,解析一个就是一个
            $("#btn4").click(function(){
               $("div:even").css("background", "#bbffaa");
            });

            //5.选择索引值为奇数的 div 元素
            $("#btn5").click(function(){
               $("div:odd").css("background", "#bbffaa");
            });

            //6.选择索引值为大于 3 的 div 元素
            $("#btn6").click(function(){
               $("div:gt(3)").css("background", "#bbffaa");
            });

            //7.选择索引值为等于 3 的 div 元素
            $("#btn7").click(function(){
               $("div:eq(3)").css("background", "#bbffaa");
            });

            //8.选择索引值为小于 3 的 div 元素  less than 
            $("#btn8").click(function(){
               $("div:lt(3)").css("background", "#bbffaa");
            });

            //9.选择所有的标题元素
            $("#btn9").click(function(){
               $(":header").css("background", "#bbffaa");
            });

            //10.选择当前正在执行动画的所有元素
            $("#btn10").click(function(){
               $(":animated").css("background", "#bbffaa");
            });
            //11、选出所有没执行动画的最后一个div
            $("#btn11").click(function(){
               $("div:not(:animated):last").css("background", "#bbffaa");
            });
            
         });
      </script>
   </head>
   <body>    
<!--   <div>
   :first           选择第一个元素
   :last        选择最后一个元素
   :not(selector)     选出不是selector的元素
   :even        索引偶数选择器 0 开始计数
   :odd         索引奇数
   :eq(index)    索引等于index的元素 
   :gt(index)        索引大于index的元素
   :lt(index)        索引小于index的元素
   :header       选择h1等这些标题元素
   :animated     选择正在执行动画的元素
   </div> -->
      <input type="button" value="选择第一个 div 元素" id="btn1" />
      <input type="button" value="选择最后一个 div 元素" id="btn2" />
      <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
      <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
      <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
      <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
      <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
      <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
      <input type="button" value="选择所有的标题元素" id="btn9" />
      <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
      <input type="button" value="选出所有没执行动画的最后一个div" id="btn11" />
      <h3>基本选择器.</h3>
      <br><br>
      <div class="one" id="one">
         id  one,class  one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <div id="mover">正在执行动画的div元素.</div>
   </body>
</html>

内容过滤选择器

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            function anmateIt(){
               $("#mover").slideToggle("slow", anmateIt);
            }
   
            anmateIt();             
         });
         
         /** 
         :contains(text)   选择包含text文本的元素
         :empty             选择空元素 (1、没有子元素2、没有文本元素)<div></div>
         :has(selector)      选择含有selector元素的元素
         :parent       选择含有子元素的元素,与:empty相反
         */
         $(document).ready(function(){
            //1.选择 含有文本 'di' 的 div 元素
            $("#btn1").click(function(){
               $("div:contains('di')").css("background", "#bbffaa");
            });

            //2.选择不包含子元素(或者文本元素) 的 div 空元素
            $("#btn2").click(function(){
               $("div:empty").css("background", "#bbffaa");
            });

            //3.选择含有 class 为 mini 元素的 div 元素
            $("#btn3").click(function(){
               $("div:has(.mini)").css("background", "#bbffaa");
            });

            //4.选择含有子元素(或者文本元素)的div元素
            $("#btn4").click(function(){
               $("div:parent").css("background", "#bbffaa");
            });
         });
      </script>
   </head>
   <body>    
      <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
      <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
      <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
      <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
      
      <br><br>
      <div class="one" id="one">
         id  one,class  one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <div id="mover">正在执行动画的div元素.</div>
   </body>
</html>

可见性过滤选择器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            function anmateIt(){
               $("#mover").slideToggle("slow", anmateIt);
            }
   
            anmateIt();    
         });
         /**
         :hidden   所有隐藏的元素
         :visible  所有可见元素
         
         */
         $(document).ready(function(){
            //1.选取所有可见的  div 元素
            $("#btn1").click(function(){
               $("div:visible").css("background", "#bbffaa");
            });

            //2.选择所有不可见的 div 元素
            //不可见:display属性设置为none,或visible设置为hidden
            $("#btn2").click(function(){
               $("div:hidden").show("slow").css("background", "#bbffaa");
            });

            //3.选择所有不可见的 input 元素
            $("#btn3").click(function(){
               //alert($("input:hidden")[0].value);
               /* alert($().attr("value")); */
               // attr: 只传属性名是获取值,传属性名和属性值是赋值
               alert($("input:hidden").attr("value"));
            });    
         });
      </script>
   </head>
   <body>    
      <input type="button" value="选取所有可见的  div 元素" id="btn1">
      <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
      <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
      
      <br>
      <div class="one" id="one">
         id  one,class  one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
      </div>
      <div id="mover">正在执行动画的div元素.</div>
   </body>
</html>

属性过滤选择器

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div,span,p {
   width: 140px;
   height: 140px;
   margin: 5px;
   background: #aaa;
   border: #000 1px solid;
   float: left;
   font-size: 17px;
   font-family: Verdana;
}

div.mini {
   width: 55px;
   height: 55px;
   background-color: #aaa;
   font-size: 12px;
}

div.hide {
   display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   /**
[attribute]          包含attribute属性的元素
[attribute=value]     attribute属性值等于value的元素         name="username"
[attribute!=value]        attribute属性值不等于value的元素 
[attribute^=value]        attribute属性的value值以value开头的
[attribute$=value]        attribute属性的value值以value结尾
[attribute*=value]        attribute属性的value值包含value的
[attrSel1][attrSel2][attrSelN]  同时满足[]里的所有条件的元素
   
   
   */
   $(function() {
      //1.选取含有 属性title 的div元素
      $("#btn1").click(function() {
         $("div[title]").css("background", "#bbffaa");
      });
      //2.选取 属性title值等于'test'的div元素
      $("#btn2").click(function() {
         $("div[title='test']").css("background", "#bbffaa");
      });
      //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
      $("#btn3").click(function() {
         $("div[title!='test']").css("background", "#bbffaa");
      });
      //4.选取 属性title值 以'te'开始 的div元素
      $("#btn4").click(function() {
         $("div[title^='te']").css("background", "#bbffaa");
      });
      //5.选取 属性title值 以'est'结束 的div元素
      $("#btn5").click(function() {
         $("div[title$='est']").css("background", "#bbffaa");
      });
      //6.选取 属性title值 含有'es'的div元素
      $("#btn6").click(function() {
         $("div[title*='es']").css("background", "#bbffaa");
      });
      //7.组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素
      //对于属性过滤选择器,如果多个写在一起,则后面过滤的对象是前面选择器过滤的结果
      $("#btn7").click(function() {
         $("div[id][title*='es']").css("background", "#bbffaa");
      });
      //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
      $("#btn8").click(function() {
         $("div[title!='test'][title]").css("background", "#bbffaa");
      });
   });
</script>
</head>
<body>
   <input type="button" value="选取含有 属性title 的div元素." id="btn1" />
   <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
   <input type="button"
      value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
   <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
   <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
   <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
   <input type="button"
      value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素."
      id="btn7" />
   <input type="button"
      value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />

   <br>
   <br>
   <div class="one" id="one">
      id  one,class  one 的div
      <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display: none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <div>
      包含input的type为"hidden"的div<input type="hidden" value="123456789"
         size="8">
   </div>
   <div id="mover">正在执行动画的div元素.</div>
</body>
</html>

子元素过滤选择器

注意::nth-child 虽然使用空格表示后代元素,但是如果使用的是nth-child还是只会找子元素,跟使用>效果一样。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();	
				
				/**
子元素过滤选择器				子元素的都要使用父元素[空格]子元素的方式  因为选的 是子元素,
						所以按照基本选择器后代元素的写法		
:nth-child 				选择第几个子元素  $("ul li:nth-child(2)"),还可以使用表达式,例如2n-1,n从1开始,会依次选择1,3,5,相当于奇数选择器
:first-child 			选择第一个子元素
:last-child 			选择最后一一个子元素
:only-child 			选出只有一个子元素的元素,返回他的子元素
注意:js有文本节点、属性节点,jquery只有元素节点

				*/
				//1.选取每个class为one的div父元素下的第2个子元素
				$("#btn1").click(function(){
					//索引值从1开始
					//父元素选择器[空格]子元素选择器
					$("div.one :nth-child(2)").css("background","#bbffaa");
				});
				//2.选取每个class为one的div父元素下的第一个子元素
				$("#btn2").click(function(){
					$("div.one :first-child").css("background","#bbffaa");
				});
				//3.选取每个class为one的div父元素下的最后一个子元素
				$("#btn3").click(function(){
					$("div.one :last-child").css("background","#bbffaa");
				});
				//4.如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素
				$("#btn4").click(function(){
					$("div.one :only-child").css("background","#bbffaa");
				});
				
			});
		</script>
	</head>
	<body>		
		<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
		<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
		<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
		<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/>
		
		<br><br>
		<div class="one" id="one">
			id  one,class  one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

表单选择器、表单对象属性选择器

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(function(){
            
            
/**
:input        选择所有的input框  匹配所有 input, textarea, select 和 button(button按钮在form表单里也会被当成submit) 元素
:text     选择所有的text框(单行文本框)
:password  选择所有的password框
:radio        选择所有的radio框
:checkbox  选择所有的checkbox框
:submit    选择所有的submit
:image        选择所有的image,几乎不用
:reset        选择所有的reset框
:button    选择所有的button按钮
:file     选择所有的文件筐
:hidden    选择所有的隐藏域

表单对象的属性
:enabled      可用的,可以输入
:disabled     不可用的,不可以输入
:checked      选择的,checkbox或者单选按钮的选择  复选框、单选框等,不包括select中的option
:selected     选择的,下拉列表的选择  匹配所有选中的option元素
*/
            //1.对表单内 可用input 赋值操作
            $("#btn1").click(function(){
               // .val() 获取值;.val(xxx) 设置value值
               $("input:enabled").val("New Value");
            });
            //2.对表单内 不可用input 赋值操作
            $("#btn2").click(function(){
               $("input:disabled").val("New Value Too");
            });
            //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
            $("#btn3").click(function(){
               alert($(":checkbox:checked").size());
               
            });
            //4.获取多选框选中的内容
            $("#btn4").click(function(){
               var eles = $(":checkbox:checked");//返回的jquery对象,数组-->dom对象
               for(var i=0;i<eles.size();i++){
                  //alert(eles[i].value);
                  alert($(eles[i]).val());
               }
            });
            //5.获取下拉框选中的内容  
            $("#btn5").click(function(){
               //注意这个选择器的特殊,因为select里面的option是真正的被选择项,
               //所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
               //必须按照基本选择器选择后代的方法选
               //alert($(":selected").size());
               //$(":selected").css("color","red");
               //alert();
               $(":selected").each(function(){
                  //  this代表当前遍历的对象(js的对象)
                  alert(this.innerText);
               });
      
            });
         }) 
      </script>
   </head>
   <body>
      <h3>表单对象属性过滤选择器</h3>
       <button id="btn1">对表单内 可用input 赋值操作.</button>
       <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
       <button id="btn3">获取多选框选中的个数.</button>
       <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
       
      <form id="form1" action="#">         
         可用元素: <input name="add" value="可用文本框1"/><br>
         不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
         可用元素: <input name="che" value="可用文本框2"/><br>
         不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
         <br>
         
         多选框: <br>
         <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
         <input type="checkbox" name="newsletter" value="test2" />test2
         <input type="checkbox" name="newsletter" value="test3" />test3
         <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
         <input type="checkbox" name="newsletter" value="test5" />test5
         
         <br><br>
         下拉列表1: <br>
         <select name="test" multiple="multiple" style="height: 100px" id="sele1">
            <option>浙江</option>
            <option selected="selected">辽宁</option>
            <option>北京</option>
            <option selected="selected">天津</option>
            <option>广州</option>
            <option>湖北</option>
         </select>
         
         <br><br>
         下拉列表2: <br>
         <select name="test2">
            <option>浙江</option>
            <option>辽宁</option>
            <option selected="selected">北京</option>
            <option>天津</option>
            <option>广州</option>
            <option>湖北</option>
         </select>
      </form>       
   </body>
</html>