jQuery过滤选择器 通过过滤条件选取需要的元素
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")
