1. 程式人生 > >關於對jQuery中find、filter、children的理解

關於對jQuery中find、filter、children的理解

一、 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的理解,有哪些總結的與各位大神有出入的地方,請您斧正。