jQuery 中的 children() 方法返回给定选择器的直接子级。它是 JQuery 中的内置方法。此方法仅沿 DOM 树向下遍历一个级别。

我们可以使用 find() 方法向下遍历多个层级或返回后代（如孙子、曾孙等）。

children() 方法不返回文本节点。我们可以使用 contents() 方法来获取所有带有文本节点的子节点。

语法

$(selector).children(filter)

filter:  它是可选的，用于缩小搜索范围。它是一个选择器表达式，可以与传递给 $() 函数的类型相同。

例子

例1

<!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="https://code.jquery.com/jquery-3.5.1.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" style="width:500px;"> body
  <div id = "div1"> div 元素
      <ul> 第一个 ul 元素
      <h2> h2 元素</h2>
	  </ul>
	  <ul> 第二个 ul 元素
          <p> p元素 </p>
          </ul>
	</div>
<button onclick = "fun()"> 点击看看 </button>
  </body>
</html>

jQuery children() 方法

我们看到children方法选择div元素的直接子集ul元素。

例2

进一步筛选的例子

 <!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="https://code.jquery.com/jquery-3.5.1.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" style="width:500px;"> body
  <div id = "div1"> div 元素
      <ul class = "first"> 第一个 ul 元素
      <h2>  h2 元素</h2>
	  </ul>
	  <ul> 第二个 ul 元素
          <p> p 元素 </p>
	  </ul>
  </div>
<button onclick = "fun()"> 点击 </button>
  </body>
</html>
jQuery children() 方法