jQuery过滤选择器包括 简单过滤选择器、内容过滤选择器、属性过滤选择器、子元素过滤选择器、表单域属性过滤选择器、可见性过滤选择器。
1.简单过滤选择器
（1）:first 选择器。选择第一个匹配元素。 $("td:first").css("border","2px solid blue");
（2）:last 选择器。选择最后一个匹配元素。 $("td:last").css("border","2px solid blue");
（3）:odd 选择器。选择所有基数元素。 $("td:odd").css("border","2px solid blue");
（4）:even 选择器。选择所有偶数元素。 $("td:even").css("border","2px solid blue");
（5）:eq(index) 选择器。从匹配的集合中选择索引等于给定值的元素。 $(td:eq(0))".css("border","2px solid blue");
（6）:gt(index) 选择器。索引大于给定值的所有元素。
（7）:lt(index) 选择器。索引小于给定值的所有元素。
（8）:not(selector...) 选择器。去除某些选择器后的所有元素。 $("td:not(:first,:last)").css(...);
（9）:header 选择器。选择所有诸如 h1,h2,h3 之类的标题元素。 $(":header")
（10）:animated 选择器。选择所有正在执行动画效果的元素。 $(td:animated);
实例：效果图和代码如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
6 <title>表单域选择器应用示例</title>
7 <script language="javascript" type="text/javascript">
8 $(document).ready(function() {
9 $(":header").css("color", "#999");//设置表格的标题字体颜色
10 $("tr:first").css("background", "#FCF");//设置表格第一行的背景色
11 $("td:last").css("background", "#000");//设置表格中最后一个单元格的颜色
12 $("td:odd").css("background", "yellow");//设置索引为奇数的单元格的背景色为黄色
13 $("td:even").html("偶数");//给索引为偶数的单元格添加文本
14 $("td:eq(1)").css("border", "1px solid red");//设置索引为1的单元格的边框
15 $("td:gt(6)").css("border", "1px solid blue");//设置索引大于6的单元格的边框
16 $("td:lt(6)").css("color", "blue");//设置索引小于6的单元格的字体颜色
17 $("td:not(:first,:last)").css("color", "red");//设置除了第一个和最后一个之外的单元格的字体颜色
18 });
19 </script>
20 </head>
21 <body>
22 <h3 align="center">简单过滤选择器应用示例</h3>
23 <table width="480" height="160" border="1">
24 <tr>
25 <td> </td>
26 <td> </td>
27 <td> </td>
28 <td> </td>
29 <td> </td>
30 </tr>
31 <tr>
32 <td> </td>
33 <td> </td>
34 <td> </td>
35 <td> </td>
36 <td> </td>
37 </tr>
38 <tr>
39 <td> </td>
40 <td> </td>
41 <td> </td>
42 <td> </td>
43 <td> </td>
44 </tr>
45 </table>
46 </body>
47 </html>
2.内容过滤选择器
（1）:contains() 选择器。 $("p:contains('你好')").css(...); //为p标签中包含“你好”的段落设置样式。
（2）:has()选择器。 $(div:has(p)).css(...); //为 div 包含 p 子元素设置样式。
（3）:empty 选择器。 $("td:empty").css(..); // 为空单元格设置样式。
（4）:parent 选择器。功能与 empty 选择器相反。 $("td:parent").css(...); //为内容不空的单元格设置样式。
3.属性过滤选择器
（1）包含属性选择器。 $("div[id]") 选择所有包含 id 属性的 div 元素。
（2）属性等于选择器。 $("input[name=username]").attr("value","lihui"); //input 的name属性为username的文本框值设置为 lihui。
（3）属性包含选择器。 $("input[name*='news']").val("name 中包含 news 的元素");
（4）属性包含单词选择器。 $("input[name~='news']").val("name 中包含 news 单词的元素");
（5）属性不等于选择器。 $("input[name!='username']")
（6）属性开始选择器。 $("input[value^='lih']") value值以 lih 开头的 input 元素
（7）属性结尾选择器。 $("input[value$=hui]") value值为 hui 结尾的 input 元素
（8）复合属性选择器。 $("input[id][name^='li']").val("符合条件"); //为包含id属性且name属性以 li 开头的文本框赋值为“符合条件”。
4.子元素过滤选择器
（1）:first-child
（2）:last-child
（3）:nth-child(index/even/odd/equation)
（4）:only-child
实例：效果和代码如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
6 <title>子元素选择器应用示例</title>
7 <script language="javascript" type="text/javascript">
8 $(document).ready(function() {
9 $("ul li:first-child").css("text-decoration", "underline").css("color","blue");
10 $("ul li:last-child").css("text-decoration", "underline").css("color","red");
11 $("ul li:nth(1)").css("text-decoration", "bold").css("color","#CC44CC");
12 $("ul li:only-child").css("text-decoration", "underline").css("color","#55CCFF");
13 });
14 </script>
15 </head>
16 <body bgcolor="#DDDDDD">
17 <h3 align="center">子元素过滤选择器应用示例</h3>
18 <ul>
19 <li>中国</li>
20 <li>美国</li>
21 <li>英国</li>
22 </ul>
23 <ul>
24 <li>1111</li>
25 <li>2222</li>
26 <li>3333</li>
27 </ul>
28 <ul>
29 <li>only child</li>
30 </ul>
31 </body>
32 </html>
5.表单域属性过滤选择器
（1）:checked 可以是 input（单选按钮或复选框）, :radio（单选按钮）, :checkbox（复选框）。
（2）:enabled 用于所有可用的表单域
（3）:disabled 用于所有被禁用的表单域
（4）:selected 用于选择从列表框选择所有选中的 option 元素。
实例：效果及代码如下：
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>表单域属性过滤选择器应用示例</title>
6 <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
7 <script language="javascript" type="text/javascript">
8 $(document).ready(function(){
9 $("input:checked").css("border","1px solid red");
10 $("input:disabled").css("background","#FCF");
11 $("input:enabled").val("可用文本框");
12 $("select option:selected").length();//获取下拉框中被选中的个数
13 })
14 </script>
15 </head>
16
17 <body>
18 <h3 align="center">表单域属性过滤选择器应用示例</h3>
19 <table width="602" height="81" border="1">
20 <tr>
21 <td width="118">复选框：</td>
22 <td width="443"><input type="checkbox" checked="checked" />被选中的复选框
23 <input type="checkbox" checked="checked" />被选中的复选框
24 <input type="checkbox" />没有被选中的复选框
25 </td>
26 </tr>
27 <tr>
28 <td>可用文本框：</td>
29 <td><input type="text"/></td>
30 </tr>
31 <tr>
32 <td>不可用文本框：</td>
33 <td><input type="text" disabled="disabled" /></td>
34 </tr>
35 <tr>
36 <td>下拉列表</td>
37 <td>
38 <select name="test" >
39 <option>浙江</option>
40 <option>湖南</option>
41 <option selected="selected">北京</option>
42 <option selected="selected">天津</option>
43 <option>广州</option>
44 <option>湖北</option>
45 </select>
46 </td>
47 </tr>
48 </table>
49
50 </body>
51 </html>
6.可见性过滤选择器
（1）:hidden 用于选择所有不可见元素
$("selector:hidden")
（2）:visible 用于选择所有可见元素
$("selector:visible")
