jQuery遍历之find()方法

来源：互联网发布：网络刷手平台编辑：程序博客网时间：2024/05/29 04:45

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>

阅读全文

0 0