jQuery增强型基本选择器

最新推荐文章于 2025-10-31 15:14:16 发布

转载最新推荐文章于 2025-10-31 15:14:16 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/357712148/2113187

文章标签：

#javascript #ViewUI

:first：查询第一个元素
:last：查询最后个元素
:checked：查询选中的复选框
:not(:checked)：查询未选中的复选框
:even：偶数
:odd：奇数
:eq()：索引从0开始
:gt():大于索引号
:lt()：小于索引号
:header：查询所有<h1/2/3/4/5/6>标签
.css("key","value")为查询到的所有标签添加CSS样式

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.6.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</td></tr>
      <tr><td>line2</td></tr>
      <tr><td>line3</td></tr>
    </table>    
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
    <script type="text/javascript">

        //1)查找UL中第一个元素的内容
        // alert($("ul li:first").html());
        // alert($("ul>li:first").html());

        //2)查找UL中最后个元素的内容
        // alert($("ul>li:last").html());

        //3)查找所有未选中的input元素个数
        //alert($("input:not(:checked)").size());
        //alert($("input:checked").size())

        //4)查找表格的1、3、5...奇数行个数[从0开始计数]
        //alert($("table tr:even").size());

        //5)查找表格的2、4、6...偶数行个数[从0开始计数]
        //alert($("table tr:odd").size());

        //6)查找表格中第二行的内容，从索引号0开始
        //alert($("table tr:eq(1)").html());

        //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
        //alert($("table tr:gt(0)").size());

        //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
        //alert($("table tr:lt(2)").size());

        //9)给页面内所有标题<h1><h2><h3>加上红色背景色
        $(":header").css("background","red");

    </script>
  </body>
</html>

转载于:https://blog.51cto.com/357712148/2113187