jQuery遍历之children()方法_$("#").children().val-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37036642/article/details/76652419

本文介绍了jQuery的children()方法，用于查找元素的直接子元素。通过实例展示了如何使用children()无参数及传递选择器表达式来筛选特定子元素，并通过代码实现改变选中子元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery遍历之children()方法

jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。

children()无参数

允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象

注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素

.children()方法选择性地接受同一类型选择器表达式

$("div").children(".selected")

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 120px;
}

.left div {
width: 150px;
height: 70px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}

a {
display: block;
}
</style>
<script src=" http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>
<h2>children方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button id="bt1">点击：children无参数</button>
<button id="bt2">点击：children传递表达式</button>
<script type="text/javascript">
$("#bt1").click(function() {
$('.div').children().css('border','3px solid red' )
})
</script>

<script type="text/javascript">
$("#bt2").click(function() {
//找到所有class=div的元素
//找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
$('.div').children(':last').css('border', '3px solid blue')
})
</script>

</body>

</html>