jQuery parent()和children()树遍历函数示例
jQuery提供了许多树遍历函数，我们可以使用它们来获取父级，子级，同级，上一个和下一个元素。
我们将逐一研究每种jQuery树遍历方法-今天，我们将研究两种jQuery遍历方法，即" parent()"和" children()"。
jQuery parent()函数
jQuery parent()方法用于获取所选HTML元素的直接父元素。
返回父元素后，您可以对其执行所需的操作。
这是使用jQuery parent()的语法：
- $(" child").parent()
这将返回父元素的直接父元素
- $(" child").parent(" filter")
过滤器是传递给parent()方法的可选参数。
jQuery parent()函数示例
下面的示例演示了parent()方法的用法。
jquery-parent.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Traversing Parent</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("h4").parent().css("background-color","yellow");
});
</script>
</head>
<body>
<span id="spanParent">Span Element - Parent of h4 element
<h4>This is an h4 element - child of Span.</h4>
</body>
</html>
在此示例中，父元素是<span id =" spanParent">，而<h4>是子元素。
parent()方法用于获取直接父元素(即<span>元素)并更改背景颜色。
parent()方法仅遍历HTM DOM树的上一层。
可选参数提供其他过滤选项，以缩小遍历范围。
下图显示了以上HTML页面产生的输出，请注意span元素的背景颜色为黄色。
jQuery children()函数
jQuery children()方法用于获取所选HTML元素的直接子级。
您可以使用children()方法遍历所选父元素的子元素。
您可以使用此方法对子元素执行所需的操作，例如更改背景颜色，启用，禁用，隐藏，显示等。
这是使用jQuery children()函数的语法：
- $(" parentElement").children()
无需任何参数即可使用。
这用于返回parentElement的所有直接子代。
- $(" parentElement").children(" childElement")
parentElement和childElement可以是任何HTML元素。
这将返回parentElement的所有匹配的childElement。
此方法中的参数childElement是可选的，它提供了一个附加的过滤选项来获取子元素。
jQuery children()函数示例
下面的示例演示了children()方法的用法。
jquery-children.html
<html>
<head>
<title>jQuery Traversing Children</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
//below code will run for all divs
$("div").children("p").css("background-color","yellow");
$("#spanParent").children("h4").css("background-color","green");
});
</script>
</head>
<body>
<div style="border:1px solid;">
<h3>h3 - Child of div</h3>
<p> p -Child of div</p>
Span - Child of Div
<p>Second p - Child of div</p>
</div>
<p> p element - Not a child of div</p>
<span id="spanParent">
<h4>This is an h4 element (child of Span).</h4>
</body>
</html>
在此示例中，您可以看到两个父元素：<div id =" divParent">和<span id =" spanParent">。
children()方法用于获取子元素并更改元素的颜色。
我们使用children方法返回父<div>元素的子元素<p>并将所有子<p>元素的颜色更改为黄色。
请注意，此方法不会更改div元素外部的p元素。
同样，span元素具有子元素h4，在此示例中，我们更改了该元素的颜色。
子方法仅向下遍历HTM DOM树的下一级。
此方法不用于遍历文本节点。
