jQuery遍历之find()方法

最新推荐文章于 2023-04-11 15:37:59 发布

qq_37036642

最新推荐文章于 2023-04-11 15:37:59 发布

阅读量3.3k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_37036642/article/details/76652429

版权

Jquery 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。

.find()方法要注意的知识点：

find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
find只在后代中遍历，不包括自己。
选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

注意重点：

.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点
<!DOCTYPE html>
<html>


<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
    .left {
        width: auto;
        height: 200px;
    }
    
    .left div {
        width: 150px;
        height: 70px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    span {
        color: blue;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>


<body>
    <h2>find方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2 test">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：find传递表达式</button>
    <br/>
    <br/>
    <h3>find表达式</h3>
    <div style="border:1px solid red;">
        <p>
            <span>测试1</span>
            <a>测试2</a>
        </p>
        <p>
            <span>慕课网1</span>
            <a>慕课网2</a>
        </p>
        <div>
            <span>Aaron1</span>
            <a>Aaron2</a>
        </div>
    </div>
    <br/>
    <br/>
    <button>点击：find传递$对象</button>
    <script type="text/javascript">
    $("button:first").click(function() {
       
         $(".left").find("li:last-child").css("border", "1px solid red");
        
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有p元素，然后筛选出子元素是span标签的节点
        //改变其字体颜色
        var $spans = $('span');
        $("p").find($spans).css('color', 'red');
    })
    </script>
</body>


</html>