2009-07-21 83 views
2

我一直在學習一些更詳細的JS漏洞,並且有一些我需要獲得幫助的東西。Javascript參考理解

;(function($){ 
    $.fn.makeRed1 = function() { 
     return $.each(this, function() { 
      $(this).css('background-color', '#FF0000'); 
     }); 
    } 
})(jQuery) 


;(function($){ 
    $.fn.makeRed2 = function() { 
     $(this).css('background-color', '#FF0000'); 
    } 
})(jQuery) 

正確這些工作的兩個。爲什麼?

任何談論編寫插件的人都會說使用'return each'方法。是什麼原因?我需要有人告訴我,當使用這些方法時會發生什麼,所以我可以理解流程。

謝謝。

回答

2

在第一種情況下,您顯式返回每個函數的結果。每個函數遍歷匹配元素並將指定的回調應用於每個函數。函數的返回值是匹配選定元素的jQuery對象。這允許您以jQuery用戶期望的方式鏈接新定義的函數,並將其他jQuery函數應用於所選元素。

在第二種情況下,您有一個簡單的語句,即使直接應用相同的回調。因爲你沒有返回任何東西,所以你不能鏈接這個函數。這打破了jQuery範例。

+0

好的,但是因爲所有元素都會受到影響,無論您是否使用'each',爲什麼要使用'each'?如果我的理解是正確的``return $(this).css('background-color','#FF0000');`仍然會傳回jQ對象進行鏈接。我對使用「每一個」或者沒有更感興趣。 – Spot 2009-07-21 03:37:49

1

如果沒有each循環,您的功能將只能操作第一個選定的元素。而使用each將允許您使用單個方法調用操縱多個選定的元素。

通過返回this來結束你的函數是簡化jQuery風格的方法鏈接。

使用:

return this.each(function() { /* do stuff */ }); 

僅僅是速記:

this.each(function(){ /* do stuff */); 
return this; 

回覆:評論:之所以使用你的榜樣each的作品,是因爲.css()方法使用內部爲each。如果您實際上正在執行自定義操作,例如手動操作DOM或本地Element對象,則必須使用每個對象將所做的更改應用於所有選定的元素。

+0

好的,返回是有道理的,但非每個方法仍然適用於所有元素。這讓我感到困惑,我認爲每一個都是橫向的多元素,但不是。 – Spot 2009-07-21 03:32:52

1

基本上返回$。每個語句,可以讓你保持優雅的jQuery的鏈接模式,讓我們說,你有兩個自定義jQuery函數:

;(function($){ 
    $.fn.makeRed = function() { 
     return $.each(this, function() { 
      $(this).css('background-color', '#FF0000'); 
     }); 
    } 

    $.fn.makeBold = function() { 
     return $.each(this, function() { 
      $(this).css('font-weight', 'bold'); 
     }); 
    } 
})(jQuery) 

你可以寫,例如下面的語句,沒有任何問題:

$(selector).makeRed().makeBold().show();