关于对jQuery中find、filter、children的理解

青旅半醒 2022-06-04 01:57 218阅读 0赞

**一、** find()方法是获得当前元素集合中每一个元素的后代。是在当前元素集合中查找，但不包括当前元素本身。（换句话就是后代查找）  
用一个小栗子来进行说明一下：

<div class="big">
    	<div class="small">大家好</div>
    </div>
    <div class="small">
    	<p>祖国好</p>
    </div>
    
    $("div").find(".small").css("color""#db192a");

只有“大家好”会变成红色，而“祖国好”并不会变成红色。这是因为当我们在对div进行查找的时候，class名为big的div中包含small，符合find()的用法，可以找到；但是class名为small的小盒子中，虽然自身也是class名为small的，但是其后代中没有符合class名为small的，只是有一个p罢了。（有点儿啰嗦，意思是这个意思）。

**二、** filter()方法：将指定集合缩减为指定选择器的元素，换句话说就是同级查找。  
这里需要注意的是，匹配的个元素本身，而不是元素的后代，把不符合筛选条件的都过滤掉。  
代码如下

<div class="big bg">
        <div class="small bg">大家好</div>
    </div>
    <div class="small">
        <p class="bg">祖国美好</p>
    </div>
    <div class="small bg"><p>你们好</p></div>
    
    $(".small").filter(".bg").css("color","#db192a");

只有符合与small同级中包含bd类名的才符合，而“祖国美好”，并不是在同级中出现的而是在子代中出现的，（稍后介绍一下子代选择器children）  
并不是出现在与small同级的位置，所以无法通过filter选择器找到，所以文字是不会变色的。

**三、** children子代选择器，顾名思义子代嘛，就是其子女这一代，也不是其孙子代以及后代元素，单纯指的是子代这一层别。  
官方定义是children()：获得匹配元素集合中每一个元素的的**所有子集**。（不能包括自己，只能在子代中查找，也不能是子代以后的后代）  
示意代码

<div>
        <p class="small">大家好</p>
    </div>
    <div>
        <span>
            <p class="small">天气好</p>
        </span>
    </div>
    <div class="small">你好</div>
    <p><a class="small" href="javascript:;">祖国美好</a></p>
    
    $("div").children("small").css("color","#db192a");

正因为children是子代中查找"天气好"是包含在后代中并不是在子代中出现，而是在孙子代出现的，不符合；“祖国美好”虽然出现在了子代里面，但是我们的选择器是通过div来查找的，并不是通过p来查找的，所以也不符合；“你好”中没有子代，就更加不符合我们的要求了。

以上就是我个人对find、filter、children的理解，有哪些总结的与各位大神有出入的地方，请您斧正。