Jquery children()方法
Jquery children()方法
jQuery中的
children()方法返回给定选择器的直接子级。它是 JQuery中的内置方法。此方法仅遍历DOM树下的单个级别。我们可以使用
find()方法向下遍历多个级别。
children()方法返回给定选择器的直接子级。它是 JQuery中的内置方法。此方法仅遍历DOM树下的单个级别。我们可以使用
find()方法向下遍历多个级别。
假设我们有一个jQuery对象表示元素集，因此
children()方法在DOM树中向下搜索，并构造一个包含匹配元素子集的新jQuery对象。
children()方法在DOM树中向下搜索，并构造一个包含匹配元素子集的新jQuery对象。
children()方法不返回文本节点。我们可以使用
contents()方法获取所有带有文本节点的子级。
contents()方法获取所有带有文本节点的子级。
使用
children()方法的语法如下:
children()方法的语法如下:
语法
$(selector).children(filter)
此方法接受可选参数，即
filter 。
filter 。
filter: 是可选值用于缩小搜索范围。它是一个选择器表达式，其类型可以与传递给
$()函数的类型相同。
$()函数的类型相同。
现在，我们将看到一些使用
children()方法。在第一个示例中，我们不使用可选参数值，而在第二个示例中，我们在使用可选值来缩小搜索范围。
children()方法。在第一个示例中，我们不使用可选参数值，而在第二个示例中，我们在使用可选值来缩小搜索范围。
Example1
在此示例中，有一个div元素以及两个
ul元素，标题
h2 和段落元素。在这里，我们使用
children()方法来获取
div的直接子级元素。这两个
ul 元素都是
div 元素的直接子元素，因此，
children()方法将同时返回这两个
ul 元素作为
div 元素的直接子元素。
ul元素，标题
h2 和段落元素。在这里，我们使用
children()方法来获取
div的直接子级元素。这两个
ul 元素都是
div 元素的直接子元素，因此，
children()方法将同时返回这两个
ul 元素作为
div 元素的直接子元素。
我们必须单击给定的按钮才能看到效果。
<!DOCTYPE html>
<html>
<head>
<style>
.main * {
display: block;
font-size: 20px;
position: relative;
border: 2px solid black;
color: black;
padding: 10px;
margin: 17px;
}
</style>
<script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
$("div").children().css({ "font-size": "30px", "color": "blue", "border": "6px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
<div id = "div1"> div element
<ul> First ul element
<h2> Heading h2 </h2>
</ul>
<ul> Second ul element
<p> Paragraph element </p>
</ul>
</div>
<button onclick = "fun()"> click me </button>
</body>
</html>
输出
之后单击给定的按钮，输出将是-
现在，在在下一个示例中，我们将使用
children()方法的可选参数。
children()方法的可选参数。
Example2
在此示例中，我们是使用
过滤器值来缩小搜索范围。这里，有两个
ul 元素，它们都是
div 元素的直接子代。我们将传递第一个
ul 元素，其类名称为
first 作为
children()方法的可选参数
过滤器值来缩小搜索范围。这里，有两个
ul 元素，它们都是
div 元素的直接子代。我们将传递第一个
ul 元素，其类名称为
first 作为
children()方法的可选参数
因此，该方法将返回相应的
ul 元素，该元素现在是给定选择器的所有子元素之间的前一个子元素。
ul 元素，该元素现在是给定选择器的所有子元素之间的前一个子元素。
<!DOCTYPE html>
<html>
<head>
<style>
.main * {
display: block;
font-size: 20px;
position: relative;
border: 2px solid black;
color: black;
padding: 10px;
margin: 17px;
}
</style>
<script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
$("div").children("ul.first").css({ "font-size": "30px", "color": "blue", "border": "6px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
<div id = "div1"> div element
<ul class = "first"> First ul element
<h2> Heading h2 </h2>
</ul>
<ul> Second ul element
<p> Paragraph element </p>
</ul>
</div>
<button onclick = "fun()"> click me </button>
</body>
</html>
输出
执行上述代码后，输出为-
单击按钮后，我们可以看到该函数将返回具有类名称
first 。在这里，该函数将不返回第二个ul元素，它也是
div 元素的直接子代。
first 。在这里，该函数将不返回第二个ul元素，它也是
div 元素的直接子代。
单击按钮后，输出为-
