收藏
批改状态：未批改
老师批语：
将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对象
<!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>点击 "运行实例" 按钮查看在线实例
返回第一个元素,不需要参数
<!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>点击 "运行实例" 按钮查看在线实例
获取匹配元素集合中最后一个元素。
<!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元素的数组。
<!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对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。
<!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>点击 "运行实例" 按钮查看在线实例
获得匹配元素集合中每个元素的子元素，选择器选择性筛选。
<!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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
