增强基本选择器[selector_3.html]

浏览数：20 / 时间：2015年06月09日

增强基本选择器[selector_3.html]
$("ul li:first")
$("ul li:last")
$("table tr:even")
$("table tr:odd")
$("table tr:eq(0)")
$("table tr:gt(0)")
$("table tr:lt(2)")
$(":header")
$(":checkbox:not(:checked)")选择所有未选中的复选框。

 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.8.2.js"></script>
 5   </head>
 6   <body>
 7     <ul>
 8         <li>list item 1</li>
 9         <li>list item 2</li>
10         <li>list item 3</li>
11         <li>list item 4</li>
12         <li>list item 5</li>
13     </ul>
14     <input type="checkbox" checked/>
15     <input type="checkbox" checked/>
16     <input type="checkbox"/>
17     <table border="1">
18       <tr><td>line1[0]</td></tr>
19       <tr>
20           <td>line2[1]</td>
21       </tr>
22       <tr><td>line3[2]</td></tr>
23     </table>    
24     <h1>h1</h1>
25     <h2>h2</h2>
26     <h3>h3</h3>
27     <h3>h4</h3>
28     <h3>h5</h3>
29     <h3>h6</h3>
30     <p>p</p>
31     <script type="text/javascript">
32     /*1)查找UL中第一个元素的内容
33         alert(   $("ul li:first").html()   );
34         */
35         //alert($("ul li:last").html() );
36       /*2)查找UL中最后个元素的内容
37         alert(   $("ul li:last").html()   );
38         */
39           
40       /*4)查找表格的索引值为偶数的行个数，0,2,4,6,...
41           alert( $("table tr:even").size() );
42           */
43       
44           alert( $("table tr:odd").size() );
45       /*5)查找表格的索引值为奇数的行个数，1,3,5,7,...
46           alert( $("table tr:odd").size() );
47           */
48       
49       /*6)查找表格中第二行的内容，从索引号0开始
50           var $tr = $("table tr:eq(1)");
51           var html = $tr.html();
52           alert(html);
53           */
54           alert( $("table tr:eq(1)").html() );
55       /*7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
56           var $tr = $("table tr:gt(0)");
57           var size = $tr.size();
58           alert(size);
59           */ 
60 
61       /*8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
62           var $tr = $("table tr:lt(2)");
63           var size = $tr.size();
64           alert(size);
65           */ 
66       
67       /*9)给页面内所有标题<h1><h2><h3>加上红色背景色
68           $(":header").css("background-color","red");
69           */
70           $(":header").css("background-color","red");
71       //3)查找所有未选中的input元素个数
72          alert ( $(":checkbox:not(:checked)").size() );
73           
74       
75     </script>
76   </body>
77 </html>