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>
    
    
    尝试一下