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

时间：2023-03-10 01:07:14
增强基本选择器[selector_3.html]

增强基本选择器[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)")选择所有未选中的复选框。

 <html>

   <head>

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>

   </head>

   <body>

     <ul>

         <li>list item 1</li>

         <li>list item 2</li>

         <li>list item 3</li>

         <li>list item 4</li>

         <li>list item 5</li>

     </ul>

     <input type="checkbox" checked/>

     <input type="checkbox" checked/>

     <input type="checkbox"/>

     <table border="1">

       <tr><td>line1[0]</td></tr>

       <tr>

           <td>line2[1]</td>

       </tr>

       <tr><td>line3[2]</td></tr>

     </table>

     <h1>h1</h1>

     <h2>h2</h2>

     <h3>h3</h3>

     <h3>h4</h3>

     <h3>h5</h3>

     <h3>h6</h3>

     <p>p</p>

     <script type="text/javascript">

     /*1)查找UL中第一个元素的内容

         alert(   $("ul li:first").html()   );

         */

         //alert($("ul li:last").html() );

       /*2)查找UL中最后个元素的内容

         alert(   $("ul li:last").html()   );

         */

       /*4)查找表格的索引值为偶数的行个数，0,2,4,6,...

           alert( $("table tr:even").size() );

           */

           alert( $("table tr:odd").size() );

       /*5)查找表格的索引值为奇数的行个数，1,3,5,7,...

           alert( $("table tr:odd").size() );

           */

       /*6)查找表格中第二行的内容，从索引号0开始

           var $tr = $("table tr:eq(1)");

           var html = $tr.html();

           alert(html);

           */

           alert( $("table tr:eq(1)").html() );

       /*7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大

           var $tr = $("table tr:gt(0)");

           var size = $tr.size();

           alert(size);

           */ 

       /*8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小

           var $tr = $("table tr:lt(2)");

           var size = $tr.size();

           alert(size);

           */ 

       /*9)给页面内所有标题<h1><h2><h3>加上红色背景色

           $(":header").css("background-color","red");

           */

           $(":header").css("background-color","red");

       //3)查找所有未选中的input元素个数

          alert ( $(":checkbox:not(:checked)").size() );

     </script>

   </body>

 </html>

相关文章