jQuery - 遍历（二）之 后代
2016-08-07 本文已影响14人
AshengTan
jQuery 遍历，用于根据所要查找的元素相对于其他元素的关系来查找到该元素。
jQuery 提供了一系列的方法来向下遍历 DOM 树，以便查找到所选元素的后代元素（子元素、孙元素等）。
children(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 可选。参数为空则返回所选元素的所有直接子元素，非空则返回所选元素的直接子元素中与选择器匹配的元素；只会向下一级对 DOM 树进行遍历。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历02_后代01_children()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
* {
margin: auto;
}
#div1 * {
padding: 5px;
border: 5px solid lightgray;
color: darkgray;
}
#div1 {
width: 400px;
height: 400px;
border: 5px solid lightgray;
color: darkgray;
}
#p1 {
width: 300px;
height: 300px;
}
#p2 {
width: 300px;
height: 20px;
margin-top: 5px;
}
#s1 {
display: block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">div（当前元素）
<p id="p1">p（子元素）
<span id="s1">span（孙元素）</span>
</p>
<p id="p2">p（子元素）</p>
</div>
<script>
$(function () {
$("#div1").children().css("border", "5px solid red");
});
</script>
</body>
</html>
效果演示：
children(selector).png
find(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 必选。返回所选元素的所有匹配的后代元素，一路向下直到最后一级后代。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历02_后代02_find()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
* {
margin: auto;
}
#div1 * {
padding: 5px;
border: 5px solid lightgray;
color: darkgray;
}
#div1 {
width: 400px;
height: 400px;
border: 5px solid lightgray;
color: darkgray;
}
#p1 {
width: 300px;
height: 300px;
}
#s1 {
display: block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">div（当前元素）
<p id="p1">p（子元素）
<span id="s1">span（孙元素）</span>
</p>
</div>
<script>
$(function () {
$("#div1").find("#s1").css("border", "5px solid red");
});
</script>
</body>
</html>
效果演示：
find(selector).png
