jQuery过滤选择器
（1）基本过滤选择器
:first 选取第1个元素 单个元素$("div:first")选取所有 <div>元素中第一个<div>元素
:last 选取最后1个元素单个元素$("div:last")选取所有 <div>元素中最后一个<div>元素
:not(selector)去除所有与给定选择器匹配的元素 集合元素$("input:not(.myClass)")选取class不是myClass的<input>元素
:even 选取索引(从0开始)是偶数的所有元素 集合元素 $("input:even")选取索引是偶数的<input>元素
:odd 选取索引(从0开始)是奇数的所有元素 集合元素$("input:odd")选取索引是奇数的<input>元素
:eq(index) 选取索引(从0开始)等于index的元素 单个元素$("input:eq(1)")选取索引等于1的<input>元素
:gt(index) 选取索引(从0开始)大于index的元素 集合元素$("input:gt(1)")选取索引大于1的<input>元素
:lt(index) 选取索引(从0开始)小于index的元素 集合元素$("input:lt(1)")选取索引小于1的<input>元素
:header 选取所有的标题元素，即<h1>到<h6> 集合元素$(":header")选取页面中所有的标题元素
:animated 选取当前正在执行动画的所有元素 集合元素$("div:animated")选取当前正在执行动画的<div>元素
（2）内容过滤选择器
:contains(text)
:empty()
:parent
（3）可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
:visible
:hidden
（4）子元素过滤选择器
:first-child
:last-child
:only-child
:nth-child
这里值得一提的是:nth-child()，这个选择器的详细功能如下：
1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.0.js"></script>
</head>
<body>
<input type="button" value="向下滑动" id="slidebtn"/>
<input type="button" value="停止动态元素" id="stopbtn"/>
<p>请选择你喜欢的水果</p>
<div id="choice">
<div style="display: none;">
<input type="checkbox" value="apple" />苹果<br />
<input type="checkbox" value="orange" />橘子<br />
<input type="checkbox" value="banana" />香蕉<br />
<input type="checkbox" value="pear" />梨<br />
<input type="checkbox" value=" watermelon" />西瓜<br />
<input type="checkbox" value="grape" />葡萄<br />
</div>
</div>
<div id="tab">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</table>
</div>
<div id="content">
<div style="display: none;">
<p>你好，世界</p>
</div>
<div>
<p>你好，世界</p>
<p>世界</p>
<p></p>
<p></p>
<p>你好</p>
</div>
</div>
<div id="log"></div>
</body>
<script>
$(function(){
$("#tab table").css("border","black solid 1px").css("width","500px").css("height","200px");
//基本过滤选择器
//:odd
$("#tab table tr:odd").css("background-color","bisque");
//:even
$("#tab table tr:even").css("background-color","deepskyblue");
//:first
$("#tab table tr:first").css("background-color","dodgerblue");
//:last
$("#tab table tr:last").css("background-color","black");
$("#slidebtn").click(function(){
$("#choice div").slideToggle(5000);
});
//:animated
$("#stopbtn").click(function(){
$("div:animated").stop();
});
//内容过滤选择器
//:contains(text)
$("#content div p:contains(你好)").css("font-size","40px");
//:empty
var len=$("#content p:empty").length;
$("#log").css("border","solid 1px blue");
$("#log")[0].innerHTML+='$("#content div p:empty").length-->'+len+'<br/>';
//:parent
$("#content div:parent").css("background-color","darkorange").css("margin","10px");
//可见性过滤选择器
//:visible
$("#content div:visible").fadeOut(5000);
//:hidden
$("#content div:hidden").fadeIn(5000);
//子元素选择器
//first-child
$("#content p:first-child").css("color","darkmagenta");
//last-child
$("#content p:last-child").css("color","red");
//only-child
$("div p:only-child").css("background-color","black");
//nth-child
//$("#choice div input:nth-child(2n)").css("checked"."checked");
});
</script>
</html>
