基于jquery中children()与find()的区别介绍

2020-05-17 06:28:09易采站长站整理

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。


.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。


.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。看下例子:

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。


.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。


.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。看下例子:   


$(‘ul.level-2’).children().css(‘background-color’, ‘red’);

这行代码的结果是,项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。


在看个例子:

    <script> 
    $(document).ready(function(){ 
        $(“#abc”).children(“.selected”).css(“color”, “blue”); 
    }); 
    </script> 
    <div id=”abc”> 
        <span>Hello</span> 
        <p class=”selected”>Hello Again</p> 
        <div><–换成<p> 
            <div class=”selected”>And Again</div> 
            <span class=”selected”>aaAnd Again</span> 
        </div><–换成</p> 
        <p>And One Last Time</p> 
    </div> 

得到的结果如下:




这个是预期的结果,但是如果将上面的<div>换成<p>,见上面代码注释,得到的结果却是: