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 charset="utf-8">
<title>childred()</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div>
<ul>
<li>php.cn</li>
<li>php 中文网</li>
</ul>
<p> php </p>
</div>
<script>
$("div").children().css("color", "red");
</script>
</body>
</html>如上代码，当我们写上 $("div").children().css("color", "red"); 他就会去找div 下面的子元素，所以div 中的元素都会变成红色，下面我们来看另外一种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>childred()</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div>
<ul>
<li>php.cn</li>
<li>php 中文网</li>
</ul>
<p> php </p>
</div>
<script>
$("div").children(':first').css("color", "red");
</script>
</body>
</html>如上代码，我们会看到p标签内的元素的颜色没有发生变化，因为我们children() 中有一个参数，first 第一个，所以会去找div 中的第一个子元素
可以看出<ul>是我们div 的第一个元素，所以 li 标签内的元素会发生变化，大家可以在本地写一段代码试试
零个脑袋一个大
children是找到所有的子元素，<div> <ul> <li> <ul> <li>123</li> <li>456</li> </ul> </li> <li>php 中文
5年前 添加回复 0