jQuery find() 方法

定义和用法

find() 方法返回被选元素的后代元素。

后代是子、孙、曾孙，依此类推。

DOM 树：该方法沿着 DOM 元素的后代向下遍历，直至最后一个后代的所有路径（<html>）。如只需向下遍历 DOM 树中的单一层级（返回直接子元素），请使用 children() 方法。

注意：filter 参数在 find() 方法中是必需的，这与其他树遍历方法不同。

提示：如需返回所有的后代元素，请使用 "*" 选择器。

语法

$(selector).find(filter)

参数

参数	必需的	描述
filter	是	过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。注意：如需返回多个后代，请使用逗号分隔每个表达式。

实例

下例演示了返回作为<div>后代的所有<span>元素：

<!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").find("span").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>

尝试一下

定义和用法

语法

参数

实例

相关页面