: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>
来源: http://www.bubuko.com/infodetail-2589222.html