jQuery的九类选择器

时间:2022-12-18 16:42:17

一、基本选择器

 1 <body>
 2     <script type="text/javascript">
 3         $(function(){//页面加载完毕后执行该函数
 4             //查找id为"mydiv"的元素个数
 5             alert($("#mydiv").length);//1
 6             //查找标签是div的元素个数
 7             alert($("div").length);//3
 8             //查找类名为myclass的元素的个数
 9             alert($(".mylass").length);//2
10             //找到所有元素的个数
11             alert($("*").length);//15
12             //查找id为"mydiv"和标签为span的元素的个数
13             alert($("#mydiv,span").length)//2
14         })
15     </script>
16     <div id="mydiv"></div>
17     <div id="div1"></div>
18     <div class="mylass"></div>
19     <span class="mylass">i am a span</span>
20   
21  </body>

二、层级选择器

 1 <body>
 2     <script type="text/javascript">
 3         $(function(){
 4             //查找form表单下所有后代input元素个数
 5             alert($("form input").length);//2
 6             //查找form表单下所有子代input元素个数
 7             alert($("form>input").length);//1
 8             //查找紧挨着label标签后的input标签个数
 9             alert($("label+input").length);//2
10             //查找和form标签同一级别的input标签个数
11             alert($("form~input").length);//1
12         });
13     </script>
14     <form>
15         <label>Name:</label>
16         <input type="button" value="用户1"><br><br>
17         <fieldset> <!--该标签用于组合表单中的相关元素-->
18             <label>Newsletter:</label>
19             <input type="button" value="用户2"><br><br>
20         </fieldset>
21 
22     </form>
23     <input name="username3"/>
24  </body>

三、增强选择器

 1 <body>
 2     <script type="text/javascript">
 3         $(function(){
 4             //获取第一个元素
 5             alert($("li:first").text());//list item 1
 6             //获取最后一个元素
 7             alert($("li:last").text());//list item 5
 8             //获取所有未选中的input标签
 9             alert($("input:not(:checked)").length);//1
10             //匹配所有索引值为偶数的元素,从0开始计数
11             alert($("li:even").length);//3
12             //匹配所有索引值为奇数的元素,从0开始计数
13             alert($("li:odd").length);//2
14             //查找索引值为2的元素
15             alert($("li:eq(1)").text());//list item 3
16             //匹配所有索引值大于2的元素
17             alert($("li:gt(2)").text());//list item 4list item 5
18             //匹配所有索引值小于2的元素
19             alert($("li:lt(2)").text());//list item 1list item 2
20             //给所有的如h1,h2,h3之类的标题元素加颜色
21             $(":header").css("color","red")
22             //查找所有复选框的个数
23             alert($(":checkbox").length);//1
24 
25         });
26     </script>
27     <ul>
28         <li>list item 1</li>
29         <li>list item 2</li>
30         <li>list item 3</li>
31         <li>list item 4</li>
32         <li>list item 5</li>
33     </ul>
34     <input type="text" name="input1">
35     <input name="input2" checked="true"/>
36     <input type="checkbox" />
37 
38 
39     <h1>Header 1</h1>
40     <p>Contents 1</p>
41     <h2>Header 2</h2>
42     <p>Contents 2</p>
43   
44  </body>

四、内容选择器

 1 <body>
 2     <script type="text/javascript">
 3         $(function(){
 4             //查找含有“John”的div元素个数
 5             alert($("div:contains('John')").length);//2
 6             //查找不含有文本的div元素
 7             alert($("div:empty").length);//1
 8             //匹配div标签中含有p标签的元素个数
 9             alert($("div:has(p)").length);//1
10             //查找所有div标签中含有子元素或者文本的元素个数
11             alert($("div:parent").length);//5
12         });
13     </script>
14 
15     <div>John Resig</div>
16     <div>George Martin</div>
17     <div>Malcom John Sinclair</div>
18     <div>J. Ohn</div>
19     <div></div>
20     <div><p>hello!</p></div>
21   
22  </body>

五、可见性选择器

 1 <body>
 2     <script type="text/javascript">
 3         $(function(){
 4             alert($(":hidden").length);//10
 5             //查找div标签中有隐藏属性的元素个数
 6             alert($("div:hidden").length);//1
 7             //查找div标签中所有可见元素的个数
 8             alert($("div:visible").length);//2
 9         });
10     </script>
11     <div style="display:none"></div>
12     <div id="mydiv"></div>
13     <div></div>
14   
15  </body>

六、属性选择器

 1 <body>
 2      <script type="text/javascript">
 3         $(function(){
 4             //查找input标签中存在id属性的元素个数
 5             alert($("input[id]").length);//3
 6             //差找input标签中value="username"的元素个数
 7             alert($("input[value='username']").length);//2
 8             //查找input标签中value!="username"的元素个数
 9             alert($("input[value!='username']").length);//3
10             //查找input标签中id属性以n开头的元素个数
11             alert($("input[id^='n']").length);//1
12             //查找input标签中id属性以name2结尾的元素个数
13             alert($("input[id$='name2']").length);//1
14             //查找input标签中id属性包含user的元素个数
15             alert($("input[id*='user']").length);//2
16             //查找input标签中存在id属性,且name属性是lisi的元素个数
17             alert($("input[id][name='lisi']").length);//1
18         });
19      </script>
20      <input id="username1" name="zhangsan"/><br>
21      <input id="username2" name="lisi"/><br>
22      <input id="name3"/><br>
23      <input value="username"><br>
24      <input value="username"><br>
25   
26  </body>

七、子元素选择器

 1 <body>
 2     <script type="text/javascript">
 3         $(function(){
 4             //查找每个ul下的第二个li元素
 5             alert($("ul li:nth-child(2)").text());//KarlTanes
 6             //查找每个ul下第一个li元素
 7             alert($("ul li:first-child").text());//JohnGlenGlen
 8             //查找每个ul下最后一个li元素
 9             alert($("ul li:last-child").text());//BrandonRalphGlen
10             ////查找每个ul下只有一个子元素的li
11             alert($("ul li:only-child").text());//Glen
12         })
13     </script>
14     <ul>
15         <li>John</li>
16         <li>Karl</li>
17         <li>Brandon</li>
18     </ul>
19     <ul>
20         <li>Glen</li>
21         <li>Tane</li>
22         <li>Ralph</li>
23     </ul>
24     <ul>
25         <li>Glen</li>
26     </ul>
27   
28  </body>

八、表单选择器

 1 <body>
 2     <script type="text/javascript">
 3         $(function(){
 4             //查找所有input,textarea,select和button的元素个数
 5             alert($(":input").length);//13
 6             //查找所有单行文本框的元素个数
 7             alert($(":text").length);//1
 8             //查找所有密码框的元素个数
 9             alert($(":password").length);//1
10             //查找所有单选按钮的元素个数
11             alert($(":radio").length);//1
12             //查找所有复选框的元素个数
13             alert($(":checkbox").length);//1
14             //查找所有提交按钮的元素个数
15             alert($(":submit").length);//2
16             //查找所有图像域的元素个数
17             alert($(":image").length);//1
18             //查找所有重置按钮的元素个数
19             alert($(":reset").length);//1
20             //查找所有单行文本框的元素个数
21             alert($(":text").length);//1
22             //查找所有按钮的元素个数
23             alert($(":button").length);//2
24             //查找所有文件域的元素个数
25             alert($(":file").length);//1
26             //查找input标签中所有不可见元素或者type类型是hidden的元素
27             alert($("input:hidden").length);//2
28         });
29     </script>
30 
31     1:<input type="text"/><br><br>
32     2:<input type="password"/><br><br>
33     3:<input type="radio"/><br><br>
34     4:<input type="checkbox"/><br><br>
35     5:<input type="submit" value="提交"/><br><br>
36     6:<input type="image"/><br><br>
37     7:<input type="reset" value="重置"/><br><br>
38     8:<input type="button" value="button"/><br><br>
39     9:<input type="file" style="display:none"/><br><br>
40     10:<input type="hidden"/>
41 
42     <textarea id="textarea"></textarea><br><br>
43 
44     <select>
45         <option></option>
46     </select><br><br>
47 
48     <button>button</button><br><br>
49 
50   
51  </body>

九、表单对象属性选择器

 1 <body>
 2     <script type="text/javascript">
 3         $(function(){
 4             //查找所有可用的元素个数
 5             alert($("input:enabled").length);//4
 6             //查找所有不可用的元素个数
 7             alert($("input:disabled").length);//1
 8             //查找input标签中被选中的元素个数
 9             alert($("input:checked").length);//2
10             //查找所有别选中的option元素个数
11             alert($("select option:selected").length);//1
12         })
13     </script>
14     <form>
15         <input name="username" disabled="disabled" ><br>
16         <input name="username"/><br>
17         <input type="checkbox" checked="true"><br>
18         <input type="checkbox"  name="name1" checked="checked"><br>
19         <input type="checkbox"><br>
20     </form>
21     <select>
22        <option value="1">Flowers</option>
23        <option value="2" selected="selected">Gardens</option>
24        <option value="3">Trees</option>
25     </select>
26  </body>

若有错误,欢迎指正