jQuery中each()、find()和filter()等節(jié)點(diǎn)操作方法詳解(推薦)

字號(hào):


    這篇文章主要介紹了jQuery中each()、find()和filter()等節(jié)點(diǎn)操作方法的相關(guān)資料,非常不錯(cuò)具有參考價(jià)值,需要的朋友可以參考下
    1.each(callback)
    官方解釋:
    返回值:jQuery
    概述
    以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù)。
    意味著,每次執(zhí)行傳遞進(jìn)來(lái)的函數(shù)時(shí),函數(shù)中的this關(guān)鍵字都指向一個(gè)不同的DOM元素(每次都是一個(gè)不同的匹配元素)。而且,在每次執(zhí)行函數(shù)時(shí),都會(huì)給函數(shù)傳遞一個(gè)表示作為執(zhí)行環(huán)境的元素在匹配的元素集合中所處位置的數(shù)字值作為參數(shù)(從零開(kāi)始的整型)。 返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。返回 'true' 跳至下一個(gè)循環(huán)(就像在普通的循環(huán)中使用'continue')。
    參數(shù)
    callback
    對(duì)于每個(gè)匹配的元素所要執(zhí)行的函數(shù)
    示例
    描述:
    迭代兩個(gè)圖像,并設(shè)置它們的 src 屬性。注意:此處 this 指代的是 DOM 對(duì)象而非 jQuery 對(duì)象。
    HTML 代碼:
    <img/><img/>
    jQuery 代碼:
    $("img").each(function(i){
    this.src = "test" + i + ".jpg";
    });
    結(jié)果:
    [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
    2.find(expr|obj|ele)
    官方解釋:
    返回值:jQuery
    概述
    搜索所有與指定表達(dá)式匹配的元素。這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。
    所有搜索都依靠jQuery表達(dá)式來(lái)完成。這個(gè)表達(dá)式可以使用CSS1-3的選擇器語(yǔ)法來(lái)寫(xiě)。
    參數(shù)
    expr String
    用于查找的表達(dá)式
    jQuery object object
    一個(gè)用于匹配元素的jQuery對(duì)象
    element DOMElement
    一個(gè)DOM元素
    示例
    描述:
    從所有的段落開(kāi)始,進(jìn)一步搜索下面的span元素。與$("p span")相同。
    HTML 代碼:
    <p><span>Hello</span>, how are you?</p>
    jQuery 代碼:
    $("p").find("span")
    結(jié)果:
    [ <span>Hello</span> ]
    3.filter(expr|obj|ele|fn)
    官方解釋:
    概述
    篩選出與指定表達(dá)式匹配的元素集合。
    這個(gè)方法用于縮小匹配的范圍。用逗號(hào)分隔多個(gè)表達(dá)式
    參數(shù)
    expr String
    字符串值,包含供匹配當(dāng)前元素集合的選擇器表達(dá)式。
    jQuery object object
    現(xiàn)有的jQuery對(duì)象,以匹配當(dāng)前的元素。
    element Expression
    一個(gè)用于匹配元素的DOM元素。
    function(index) Function
    一個(gè)函數(shù)用來(lái)作為測(cè)試元素的集合。它接受一個(gè)參數(shù)index,這是元素在jQuery集合的索引。在函數(shù), this指的是當(dāng)前的DOM元素。
    示例
    參數(shù)selector描述:
    保留帶有select類的元素
    HTML 代碼:
    <p>Hello</p><p>Hello Again</p><p>And Again</p>
    jQuery 代碼:
    $("p").filter(".selected")
    結(jié)果:
    [ <p>And Again</p> ]