jQuery中each()、find()、filter()等節點操作方法


1.each(callback)

官方解釋:

返回值:jQuery

概述

以每一個匹配的元素作為上下文來執行一個函數。

意味着,每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。而且,在每次執行函數時,都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數(從零開始的整型)。 返回 'false' 將停止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

參數

callback

對於每個匹配的元素所要執行的函數

示例

      描述:

迭代兩個圖像,並設置它們的 src 屬性。注意:此處 this 指代的是 DOM 對象而非 jQuery 對象。

       HTML 代碼:  
<img/><img/>
       jQuery 代碼:
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });
        結果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

 

下面幾篇一定要看,定會有很大收獲,總結的太好了:

http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html

http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html

http://www.cnblogs.com/Fooo/archive/2011/01/11/1932900.html

2.find(expr|obj|ele)

官方解釋:

  返回值:jQuery

概述

搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法

所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。

參數

                expr                                                String           

                用於查找的表達式

                jQuery object                                  object

                一個用於匹配元素的jQuery對象

                 element                                          DOMElement

                一個DOM元素

示例

描述:

從所有的段落開始,進一步搜索下面的span元素。與$("p span")相同。

HTML 代碼:
<p><span>Hello</span>, how are you?</p>
jQuery 代碼:
$("p").find("span")
結果:
[ <span>Hello</span> ]

3.filter(expr|obj|ele|fn)

官方解釋:

概述

篩選出與指定表達式匹配的元素集合。

這個方法用於縮小匹配的范圍。用逗號分隔多個表達式

參數                

                expr                                             String

                字符串值,包含供匹配當前元素集合的選擇器表達式。

                jQuery object                                object

                現有的jQuery對象,以匹配當前的元素。

                element                                       Expression

                一個用於匹配元素的DOM元素。 

                 function(index)                               Function

                一個函數用來作為測試元素的集合。它接受一個參數index,這是元素在jQuery集合的索引。在函數, this指的是當前的DOM元素。

示例

參數selector描述:

保留帶有select類的元素

HTML 代碼:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代碼:
$("p").filter(".selected")
結果:
[ <p class="selected">And Again</p> ]

推薦文章,一定要看,定有大收獲:

http://www.cnblogs.com/qiantuwuliang/archive/2009/10/18/1585682.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM