jquery系列之三——筛选
1. 匹配第N个元素：.eq(index|-index)
注意：参数index指示元素基于0的位置,这个元素的位置是从0算起。
-index指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)
示例1：获取匹配的第二个元素
html:
<p> This is just a test.</p> <p> So is this</p>
jquery:
$("p").eq(1)结果:
<p> So is this</p>
示例二：获取匹配的倒数第二个元素
html:
<p> This is just a test.</p> <p> So is this</p>
jquery:
$("p").eq(-2)结果:
<p> This is just a test.</p>
2. 获取第一个元素：.first()
示例：获取匹配的第一个元素。
html:
<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>jquery:
$('li').first()结果:
[ <li>list item 1</li> ]
3. 获取最后一个元素：.last()
示例：获取匹配的最后一个元素。
html:
<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>jquery:
$('li').last()结果:
[ <li>list item 5</li> ]
4. 检查当前的元素是否含有某个特定的类，如果有，则返回true：.hasClass(class)
它等价于：is('.'+class)
示例：给包含有某个类的元素进行一个动画。
html:
<div class="protected"></div> <div></div>
jquery:
$("div").click(function(){
if($(this).hasClass("protected") )
$(this).animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});5. 筛选包含指定元素的元素：.has(expr|ele)
示例：给含有ul的li加上背景色。
html:
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>jquery:
$('li').has('ul').css('background-color', 'red');6. 删除与指定表达式匹配的元素：.not(expr|ele)
示例：从p元素中删除带有id为select 的元素。
html:
<p>Hello</p> <p id="selected">Hello Again</p>
jquery:
$("p").not($("#selected"))结果:
[ <p>Hello</p> ]
7. 选取匹配的子集：.slice(start, [end])
示例1：选择第一个p元素。
html:
<p>Hello</p> <p>cruel</p> <p>World</p>
jquery:
$("p").slice(0, 1);结果:
[ <p>Hello</p> ]
示例2：选取第最后一个p元素。
html:
<p>Hello</p> <p>cruel</p> <p>World</p>
jquery:
$("p").slice(-1);结果:
[ <p>World</p> ]
8. 查找子元素：.children([expr])
注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
示例1：查找div中的每个子元素。
html:
<p>Hello</p> <div> <span>Hello Again</span> </div> <p>And Again</p>
jquery:
$("div").children()结果:
[ <span>Hello Again</span> ]
示例2：查找div中的.selected 的类子元素。
html:
<div> <span>Hello</span> <p class="selected">Hello Again</p> <p>And Again</p> </div>
jquery:
$("div").children(".selected")结果:
[ <p class="selected">Hello Again</p> ]
9. 查找所有与指定表达式匹配的元素：.find(expr|obj|ele)
注意：
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
示例1：从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
html:
<p> <span>Hello</span>, how are you? </p>
jquery:
$("p").find("span")结果:
[ <span>Hello</span> ]
10. 查找当前元素后面的同辈元素：.next([expr])
示例1：找到每个段落的后面紧邻的同辈元素。
html:
<p>Hello</p> <p>Hello Again</p> <div> <span>And Again</span> </div>
jquery:
$("p").next()结果:
[
<p>Hello Again</p>,
<div>
<span>And Again</span>
</div>
]示例2：找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
html:
<p>Hello</p> <p class="selected">Hello Again</p> <div> <span>And Again</span> </div>
jquery:
$("p").next(".selected")结果:
[ <p class="selected">Hello Again</p> ]
11. 查找当前元素后面所有的同辈元素：.nextAll([expr])
示例：给第一个div之后的所有元素加个类。
html:
<div></div> <div></div> <div></div> <div></div>
jquery:
$("div:first").nextAll().addClass("after");结果:
[ <div class="after"></div> <div class="after"></div> <div class="after"></div> ]
12. 查找所有与指定表达式匹配的父亲元素：.parent([expr])
示例1：查找每个段落的父元素。
html:
<div> <p>Hello</p> <p>Hello</p> </div>
jquery:
$("p").parent()结果:
[ <div> <p>Hello</p> <p>Hello</p> </div> ]
示例2：查找段落的父元素中每个类名为selected的父元素。
html:
<div> <p>Hello</p> </div> <div class="selected"> <p>Hello Again</p> </div>
jquery:
$("p").parent(".selected")结果:
[
<div class="selected">
<p>Hello Again</p>
</div>
]13. 查找所有与指定表达式匹配的祖先元素：.parents([expr])
注意：不包含根元素
示例1：找到每个span元素的所有祖先元素。
html:
<html>
<body>
<div>
<p>
<span>Hello</span>
</p>
<span>Hello Again</span>
</div>
</body>
</html>jquery:
$("span").parents()结果:
[
<body>
<div>
<p>
<span>Hello</span>
</p>
<span>Hello Again</span>
</div>
</body>
]示例2：找到每个span的所有是p元素的祖先元素。
jquery:
$("span").parents("p")结果:
[
<p>
<span>Hello</span>
</p>
]14. 查找当前元素之前紧邻的一个同辈元素：.prev([expr])
注意：只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
示例1：找到每个段落紧邻的前一个同辈元素。
html:
<p>Hello</p> <div> <span>Hello Again</span> </div> <p>And Again</p>
jquery:
$("p").prev()结果:
[ <div> <span>Hello Again</span> </div> ]
示例2：找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
html:
<div> <span>Hello</span> </div> <p class="selected">Hello Again</p> <p>And Again</p>
jquery:
$("p").prev(".selected")结果:
[ <p class="selected">Hello Again</p> ]
15. 查找当前元素之前所有同辈元素集合：.prevAll([expr])
示例1：给最后一个之前的所有div加上一个类（注意，并不包括它本身）。
html:
<div></div> <div></div> <div></div> <div></div>
jquery:
$("div:last").prevAll().addClass("before");结果:
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]
16. 查找当前元素的所有同辈元素集合：.siblings([expr])
示例1：找到每个div的所有同辈元素。
html:
<p>Hello</p> <div> <span>Hello Again</span> </div> <p>And Again</p>
jquery:
$("div").siblings()结果:
[ <p>Hello</p>, <p>And Again</p> ]
示例2：找到每个div的所有同辈元素。
html:
<div> <span>Hello</span> </div> <p class="selected">Hello Again</p> <p>And Again</p>
jquery:
$("div").siblings(".selected")结果:
[ <p class="selected">Hello Again</p> ]