常用过滤函数
将jquery对象转为DOM对象
<ul> <li id="foo">foo</li> <li id="bar">bar</li> </ul>
<script> console.log( $( "li" ).get() ); </script>
最终效果
[<li id="foo">, <li id="bar">]
减少匹配元素的集合为指定的索引的哪一个元素。,注意,返回的是jQuery对象
实例：为索引值是为 2 的 div 添加适当的 class，将其变成蓝色。
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.blue { background:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$("body").find("div").eq(2).addClass("blue");
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
返回第一个元素,不需要参数
实例：高亮段落中的第一个span 。
<!DOCTYPE html>
<html>
<head>
<style>.highlight{background-color: yellow}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>Look:</span> <span>This is some text in a paragraph.</span> <span>This is a note about it.</span></p>
<script>$("p span").first().addClass('highlight');</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
获取匹配元素集合中最后一个元素。
实例:高亮段落中的最后一个span
<!DOCTYPE html>
<html>
<head>
<style>.highlight{background-color: yellow}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>Look:</span> <span>This is some text in a paragraph.</span> <span>This is a note about it.</span></p>
<script>$("p span").last().addClass('highlight');</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
返回一个包含jQuery对象集合中的所有DOM元素的数组。
实例:选择文档中所有的div，并且返回一个DOM元素数组，然后利用浏览器内置的reverse方法反转整个数组。
<!DOCTYPE html>
<html>
<head>
<style>
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Reversed - <span></span>
<div>One</div>
<div>Two</div>
<div>Three</div>
<script>
function disp(divs) {
var a = [];
for (var i = 0; i < divs.length; i++) {
a.push(divs[i].innerHTML);
}
$("span").text(a.join(" "));
}
disp( $("div").toArray().reverse() );
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。
实例:开始搜索段落所有后代的span元素，和$("p span")一样
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$("p").find("span").css('color','red');
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
获得匹配元素集合中每个元素的子元素，选择器选择性筛选。
实例:查找每个 div 的所有子元素。
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:16px; font-weight:bolder; }
span { color:blue; }
p { margin:5px 0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello (this is a paragraph)</p>
<div><span>Hello Again (this span is a child of the a div)</span></div>
<p>And <span>Again</span> (in another paragraph)</p>
<div>And One Last <span>Time</span> (most text directly in a div)</div>
<script>$("div").children().css("border-bottom", "3px double red");</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
