jQuery-9种选择器

jQuery 9种选择器

 

1、基本选择器-5个

  

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5   </head>
 6   <body>
 7       <div id="div1ID">div1</div>
 8       <div id="div2ID">div2</div>
 9       <span class="myClass">span1</span>
10       <span class="myClass">span2</span>
11       <span class="myClass">span3</span>
12       <p>p</p>
13       <script type="text/javascript">
14       
15           //1)查找ID为"div1ID"的元素--a)#id
16             //var $div = $("#div1ID");//一定要注意要加#号
17             //alert($div[0].nodeName);
18           alert($("#div1ID").html());
19           
20           //2)查找DIV元素的个数[size()方法和length属性]--b)element
21           //alert($("div").size());
22           //alert($("div").length);
23           
24           //3)查找所有样式是"myClass"的元素的个数--c).class
25           //alert($(".myClass").size());
26           
27           //4)查找所有DIV,SPAN,P元素的个数--d)selector1,selector2,selectorN
28           //alert($("div,span,p").length);
29           
30           //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
31           //alert($("#div1ID,.myClass,p").size());
32           
33       </script>
34   </body>
35 </html>

 

2、层级选择器-4个

  

form input:  查询form下所有input元素,含有后代关系,即包括儿子和孙子及后代
form>input:查询form下所有input元素,只有父子关系,没有后代关系
form+input:查询与form同级的第一个input元素,是兄弟关系
form~input:查询与form同级的所有input元素,是兄弟关系

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5   </head>
 6   <body>
 7     <form>
 8         <input type="text" value="a"/>        
 9         <table>
10             <tr>
11                 <td>
12                     <input type="checkbox" value="b"/>
13                 </td>
14             </tr>            
15         </table>
16         <input type="text" value="a1"/>
17     </form>
18     <input type="radio" value="c"/>
19     <input type="radio" value="d"/>
20     <input type="radio" value="e"/>
21     <script type="text/javascript">
22         //1)找到表单form下所有的input元素的个数--空格:代表后代,包括儿子,孙子及后代
23         //alert($("form input").size());
24         
25           //2)找到表单form下所有的直接儿子input元素个数-->:代表直接儿子,不包括孙子及后代
26           //alert($("form>input").size());
27           
28           //3)找到表单form同级第一个input元素的value属性值--+:代表同级第一个元素
29           //alert($("form+input").val());    
30           
31           //4)找到所有与表单form同级的input元素个数--~:代表同级所有的元素
32           //alert($("form~input").size());
33     </script>
34   </body>
35 </html>

 

 

3、增强型基本选择器--

  

:first:查询第一个元素
:last:查询最后个元素
:checked:查询选中的复选框
:not(:checked):查询未选中的复选框
:even:查找表格的1、3、5...行(即索引值0、2、4...)--查找的是索引值为偶数(html页面中所有表格,第一个算起,以此类推)
:odd: 查找表格的0、2、4...行(即索引值1、3、5...)--查找的是索引值为奇数
:eq():索引从0开始 equals
:gt():大于索引号 greater than
:lt():小于索引号 less than
:header:查询所有<h1/2/3/4/5/6>标签
.css("key","value")为查询到的所有标签添加CSS样式

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5   </head>
 6   <body>
 7     <ul>
 8         <table><tr><td><li>list item 0</li></td></tr></table>
 9         <li>list item 1</li>
10         <li>list item 2</li>
11         <li>list item 3</li>
12         <li>list item 4</li>
13         <li>list item 5</li>
14         <table><tr><td><li>list item 6</li></td></tr></table>
15         <!--<table><tr><td><li>list item 7</li></td></tr></table>
16         <table><tr><td><li>list item 8</li></td></tr></table>!-->
17     </ul>
18     <input type="checkbox" checked/>
19     <input type="checkbox" checked/>
20     <input type="checkbox"/>
21     <table border="1">
22         <tr><td>line1</td></tr>
23         <tr><td>line2</td></tr>
24         <tr><td>line3</td></tr>
25     </table>    
26     <h1>h1</h1>
27     <h2>h2</h2>
28     <h3>h3</h3>
29     <p>p</p>
30     <script type="text/javascript">
31         //1)查找UL中第一个元素的内容
32         //alert($("ul li:first").html());//list item 0
33         //alert($("ul>li:first").html());//list item 1
34         
35           //2)查找UL中最后个元素的内容
36           //alert($("ul li:last").html());//list item 6
37           //alert($("ul>li:last").html());//list item 5
38         
39           //3)查找所有未选中的input元素个数
40           //alert($("input:not(:checked)").size());
41           
42           //4)查找表格的1、3、5...奇数行个数[从0开始计数]
43           //alert($("table tr:even").size());
44           
45           //5)查找表格的2、4、6...偶数行个数[从0开始计数]
46           //alert($("table tr:odd").size());
47           
48           //6)查找表格中第二行的内容,从索引号0开始
49           //alert($("table tr:eq(1)").html());
50           
51           //7)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
52           //alert($("table tr:gt(0)").size());
53           
54           //8)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
55           //alert($("table tr:lt(2)").size());
56           
57           //9)给页面内所有标题<h1><h2><h3>加上红色背景色
58           //$(":header").css("background","#ff0000;");
59     </script>
60   </body>
61 </html>

 

4、内容选择器-4个

  

 

:contains('john'):表示包含指定字符串的标签,字符串大小写敏感
:empty:表示查询空标签的元素
:has('p'):表示查询有子元素的元素
  .addClass("样式名"):为查询到的所有标签添加样式
:parent:表示查询非空标签

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4      <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5     <style type="text/css">
 6         .myClass{
 7             font-size:44px;
 8             color:blue
 9         }
10     </style>
11   </head>
12   <body>
13       <p>hha</p>
14     <div><p>John Resig hacket</p></div>
15     <div><p>George Martin</p></div>
16     <div>Malcom John Sinclair hacket</div>
17     <div>J. Ohn</div>
18     <p></p>
19     <p></p>
20     <div></div>
21     <script type="text/javascript">
22     
23         //1)查找所有包含文本"John"的div元素的个数
24         //alert($("div:contains('hacket')").size());
25         
26           //2)查找所有p元素为空的元素个数
27           //alert($("p:empty").size());
28           
29           //3)给所有包含p元素的div元素添加一个myClass样式
30           //$("div:has('p')").addClass("myClass");
31           
32           //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
33           alert($("p:parent").size());
34           
35     </script>
36   </body>
37 </html>

 

5、可见性选择器-2个

  

:hidden:表示查询所有隐蔽的标签
:visible:表示查询所有显示的标签
  或:not(:hidden)

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4      <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5   </head>
 6   <body>
 7     <table border="1" align="center">
 8       <tr style="display:none">
 9           <td>Value 1</td>
10       </tr>
11       <tr>
12           <td>Value 2</td>
13       </tr>
14       <tr>
15           <td>Value 3</td>
16       </tr>
17     </table>
18     <script type="text/javascript">
19         //1)查找隐藏的tr元素的个数
20         //alert($("table tr:hidden").size());
21         //alert($("tr:hidden").size());
22             
23          //2)查找所有可见的tr元素的个数
24          //alert($("table tr:visible").size());
25          alert($("table tr:not(:hidden)").size());
26     </script>
27   </body>
28 </html>

 

6、属性选择器

  

div[id]:表示查询含有id属性的div元素
input[name='newsletter']:表示查询含有name属性,且其值是"newsletter"的input元素
input[name!='newsletter:表示查询含有name属性,且其值不是"newsletter"的input元素
input[name^='newsletter:表示查询含有name属性,且其值以"news"开头的input元素
input[name$='letter':表示查询含有name属性,且其值以"letter"结尾的input元素
input[name*='news']::表示查询含有name属性,且其包含"news"的input元素

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4      <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5   </head>
 6   <body>
 7     <div>
 8          <p>Hello!</p>
 9     </div>
10     <div id="test2"></div>
11     <input type="checkbox" name="newsletter" value="Hot Fuzz" />
12     <input type="checkbox" name="newsletter" value="Cold Fusion" id="myID" />
13     <input type="checkbox" name="newsaccept" value="Evil Plans" />
14     <script type="text/javascript">
15         //1)查找所有含有id属性的div元素个数
16         //alert($("div[id]").size());
17         
18           //2)查找所有name属性是newsletter的input元素,并将其选中
19           //alert($("input[name='newsletter']").size());
20           
21           //3)查找所有name属性不是newsletter的input元素,并将其选中
22           //alert($("input[name!='newsletter']").size());
23           //$("input[name!='newsletter']").attr("checked","checked");
24         
25           //4)查找所有name以'news'开始的input元素,并将其选中
26           //$("input[name^='news']").attr("checked","checked");
27           
28           //5)查找所有name 以'letter'结尾的input元素,并将其选中
29           //$("input[name$='letter']").attr("checked","checked");
30           
31           //6)查找所有name包含'news'的input元素,并将其选中
32           //$("input[name*='news']").attr("checked","checked");
33           
34           //7)找到所有含有id属性,并且它的name属性是以"letter"结尾的input元素,并将其选中
35           //$("input[id][name$='letter']").attr("checked","checked");
36     </script>
37   </body>
38 </html>

7、子元素选择器

  

:first-child:表示查询第一个子元素
:last-child:表示查询最后一个子元素
:only-child:表示查询只有一个子元素的元素
:nth-child(编号从1开始),表示查询指定编号的元素

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5   </head>
 6   <body>
 7     <ul>
 8       <li>John</li>
 9       <li>Karl</li>
10       <li>Brandon</li>
11     </ul>
12     <ul>
13       <li>Glen</li>
14       <li>Tane</li>
15       <li>Ralph</li>
16     </ul>
17     <ul>
18       <li>Jack</li>
19     </ul>
20     <script type="text/javascript">
21         //1)迭代每个ul中第1个li元素中的内容,索引从1开始
22         /*$("ul li:first-child").each(function(){//$("ul li:first")如果是这个,只找到第一个ul的li的内容
23             alert($(this).html());
24         });*/    
25 
26         //2)迭代每个ul中最后1个li元素中的内容,索引从1开始
27         /*$("ul li:last-child").each(function(){
28             alert($(this).html());
29         });*/                
30             
31         //3)在ul中查找是唯一子元素的li元素的内容
32         /*$("ul li:only-child").each(function(){
33             alert($(this).html());
34         });*/
35                 
36         //4)迭代每个ul中第2个li元素中的内容,索引从1开始
37         /*$("ul li:nth-child(2)").each(function(){
38             alert($(this).html());
39         });*/        
40     </script>
41   </body>
42 </html>

 

 

8、表单选择器

  

:input:查找所有input元素的个数,注:包含所有input,textarea,select和button元素
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:file

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5   </head>
 6   <body>
 7     <form>
 8         <input type="button" value="Input Button"/><br/>
 9         <input type="checkbox" /><br/>
10         <input type="file" /><br/>
11         <input type="hidden" /><br/>
12         <input type="image" /><br/>
13         <input type="password" /><br/>
14         <input type="radio" /><br/>
15         <input type="radio" /><br/>
16         <input type="reset" /><br/>
17         <input type="submit" /><br/>
18         <input type="text" /><br/>
19         <select><option>Option</option></select><br/>
20         <textarea></textarea><br/>
21         <button>Button</button><br/>
22     </form>
23     <script type="text/javascript">
24         
25         //1)查找所有input元素的个数,
26           //alert($("input").size());//10
27           //alert($(":input").size());//14 注:包含所有input,textarea,select和button元素
28           
29           //2)查找所有文本框的个数
30           //alert($(":text").size());    
31           
32           //3)查找所有密码框的个数
33           //alert($(":password").size());
34           
35           //4)查找所有单选按钮的个数
36           //alert($(":radio").size());
37           
38           //5)查找所有复选框的个数
39           //alert($(":checkbox").size());
40           
41           //6)查找所有提交按钮的个数,非IE可能将<button>当作一个提交按钮
42           //alert($(":submit").size());//2
43           //alert($(":submit").val());
44         
45           //7)匹配所有图像域的个数
46           //alert($(":image").size());
47           
48           //8)查找所有重置按钮的个数
49           //alert($(":reset").size());
50           
51           //9)查找所有普通按钮的个数
52           //alert($(":button").size());
53           
54          //10)查找所有文件域的个数
55          //alert($(":file").size());
56          
57          //11)查找所有input元素为隐藏域的个数
58          //alert($(":input:hidden").size());
59     </script>
60   </body>
61 </html>

 

9、表单对象属性

  

:enabled:表示查询可用的元素
:disabled:表示查询不可用的元素
:checked:表示查询选中的复选/单选框的元素
:selected:表示查询选中的下拉框元素

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 5   </head>
 6   <body>
 7     <form>
 8       <input name="email" disabled="disabled" />
 9       <input name="password" disabled="disabled" />
10       <input name="id" />
11       <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
12       <input type="checkbox" name="newsletter" value="Weekly" />
13       <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
14       <select>
15           <option value="1">Flowers</option>
16           <option value="2" selected="selected">Gardens</option>
17           <option value="3">Trees</option>
18       </select>
19     </form>
20     <script type="text/javascript">
21         //1)查找所有可用的input元素的个数
22         //alert($(":input:enabled").size());5//:input <select>也算作一个input
23         //alert($("input:enabled").size());4
24         
25          //2)查找所有不可用的input元素的个数
26          //alert($(":input:disabled").size());    
27          
28          //3)查找所有选中的复选框元素的个数
29          //alert($(":checkbox:checked").size());
30          
31          //4)查找所有未选中的复选框元素的个数
32          //alert($(":checkbox:not(:checked)").size());
33          
34          //5)查找所有选中的选项元素的个数
35         //alert($("select option:selected").size());
36     </script>
37   </body>
38 </html>

 

 

阅读更多
个人分类: JavaWeb
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭