jQuery children() 方法

定义和用法

children() 方法返回被选元素的所有直接子元素。

DOM树：该方法只沿着 DOM 树向下遍历单一层级。如需向下遍历多个层级（返回子孙节点或其他后代），请使用 find() 方法。

提示：如需沿着 DOM 树向上遍历单一层级，或向上遍历直至文档根元素的所有路径（返回父节点或其他祖先），请使用 parent() 或 parents() 方法。

注意：该方法不会返回文本节点。如需返回包含文本节点的所有子节点，请使用 contents() 方法。

语法

$(selector).children(filter)

参数

参数	必需的	描述
filter	否	规定缩小搜索子元素范围的选择器表达式。

实例

下例演示了把返回作为每个<div>元素的直接子元素的所有元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
<style>
    .descendants *{ 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
  //此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  <script>
      $(document).ready(function () {
          $("div").children().css({
            "color": "red",
            "border": "2px solid red"
          });
      });
</script>
</head>
<body>
      <div class="descendants" style="width:500px;">div (当前元素)
            <p>p (儿子元素)
            <span>span (孙子元素)</span>
            </p>
            <p>p (儿子元素)
            <span>span (孙子元素)</span>
            </p>
      </div>
</body>
</html>

尝试一下

jQuery children() 方法

定义和用法

语法

参数

实例

相关页面