JQuery[05] 过滤器-优快云博客

本文介绍了jQuery中用于筛选和操作DOM元素的基本过滤器和选择器，包括：选取第一个或最后一个元素、不满足条件的元素、索引为奇数或偶数的元素、指定索引位置的元素。

:first 选取第一个元素

$("span:first") 选择第一个span元素

:last 选取最后一个元素

同first

:not 选择不满足选择器条件的元素

$("input:not(.css)") 选择class属性不是css的input元素

:even

:odd

选取索引是奇数、偶数的元素

$("input:even") 选择索引是奇数的input元素

:eq

:gt

:lt

选取索引等于（eq）大于（gt）小于（lt）的元素

$("input:gt(2)") 选择索引大于2的input元素

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>基本的过滤器</title>
 5     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             //设置表格属性
 9             $("#tb1 tr").height("30px");
10             $("#tb1 td").width("40px").each(function (item) { //设置单元格内容
11                 $(this).text(item);
12             }).mousemove(function () {
13                 var myindex = $(this).text();
14                 var eq = $("#tb1 td:eq(" + myindex + ")").text();
15                 var lt = $("#tb1 td:lt(" + myindex + ")").text();
16                 var gt = $("#tb1 td:gt(" + myindex + ")").text();
17                 $("#tips").text("eq:" + eq + "\nlt:" + lt + "\ngt:" + gt);
18             });
19 
20             //设置交错背景色
21             $("#tb1 tr:odd").css("background-color", "rgb(128,128,128)");
22             $("#tb1 tr:even").css("background-color", "green");
23         });
24     </script>
25 </head>
26 <body>
27     <table id="tb1" border="0" style="margin:0 auto;">
28         <tr><td></td><td></td><td></td><td></td><td></td></tr>
29         <tr><td></td><td></td><td></td><td></td><td></td></tr>
30         <tr><td></td><td></td><td></td><td></td><td></td></tr>
31         <tr><td></td><td></td><td></td><td></td><td></td></tr>
32         <tr><td></td><td></td><td></td><td></td><td></td></tr>
33         <tr><td></td><td></td><td></td><td></td><td></td></tr>
34         <tr><td></td><td></td><td></td><td></td><td></td></tr>
35         <tr><td></td><td></td><td></td><td></td><td></td></tr>
36         <tr><td></td><td></td><td></td><td></td><td></td></tr>
37         <tr><td></td><td></td><td></td><td></td><td></td></tr>
38     </table>
39 
40     <pre id="tips"></pre>
41 </body>
42 </html>