jQuery核心方法vs實用方法

Question

jQuery方法廣泛地說是2種類型;我想核心的方法和工具方法

他們稱之爲$ VS $（）

可能有人請提供各類型的例子，突出的差異。 謝謝。

Answer 1

（跳到TL; DNR在最後，如果你討厭讀書，想總結，然後回去讀了整個事情，如果你需要我在說什麼澄清）

的本質jQuery

對於初學jQuery的人來說，第一個也是最令人困惑的事情就是jQuery對象是什麼，以及它爲什麼如此工作。 jQuery的體系結構旨在允許開發人員以簡單，簡潔的語法選擇一個語句中的所有相關元素，然後與其交互操作，而不必擔心不同瀏覽器之間的陷阱和注意事項。因此，如果我想將事件處理程序附加到具有特定CSS類的頁面上的所有鏈接，我希望代碼看起來像$('a.my-selector').click(function() { /* my handler here */ });，而不是看起來像document.body的所有子元素的怪物，檢查它是否是錨點元素與my-selector類，如果是，則以該瀏覽器專用的方式附加所需的處理程序，並遞歸調用該元素的子元素。

什麼是核心的方法和什麼是一個插件的方法

核心和插件方法是一樣的，除了核心的方法是在jQuery腳本定義，插件是由您或其他開發人員擴展定義或增強jQuery的核心功能。

核心和插件的方法（我將簡單地稱它們爲從現在開始「方法」）是是jQuery對象的成員函數（$是jQuery一個別名，以減少打字，所以$()和jQuery()是相同的）。這些方法提供了遍歷，交互和操作頁面元素的方法。如何方法的工作

當你調用$()，創建jQuery核心對象的實例，它具有迄今已定義的所有方法

。此對象中還包含對您選擇，引用或創建的所有瀏覽器HTML元素的引用，具體取決於您提供給$()的參數。因此，在一種方法中，您應始終假定您正在處理一組元素，集合中的元素爲零到多個。在大多數情況下，你的方法將是這樣開始：

$.fn.myPlugin = function() { 
    // `this` is the jquery object. the next line iterates over each element currently 
    // in the collection and invokes the specified function against it. 
    return this.each(function() { 
    // within _this_ function, `this` is a reference to the current element 
    // here, you can interact with or manipulate the element to whatever 
    // ends required by your plugin. 
    }); 
}; 

注意$.fn只是一個別名爲$()對象的prototype。所以，$.prototype和$.fn是同義詞。 fn/prototype只是JavaScript的一種讓您添加或替換對象方法的方法。

方法應該返回什麼？

除了例外情況，我會立即說明，方法應該返回結果jQuery對象。結果是什麼意思？如果方法遍歷或過濾當前元素，它應該返回一個包含這些新元素的jQuery對象。例如：$.fn.filter將採用您選擇的原始元素，然後刪除與您指定的選擇器不匹配的任何元素。例如：

$('a').filter('.my-selector'); // finds all anchor tags on the document, then removes any that don't have the class `my-selector`. 

如果該方法只適用於某些行爲，那麼它應該只是返回的jQuery目前的元素（在這種情況下，最簡單的方法只是返回的this.each的結果，正如我上面證明）。例如：$.fn.hide通過應用CSS display:none使每個選定元素隱藏，因此它可能僅返回this.each。這是非常粗略的看起來像：

$.fn.hide = function() { 
    return this.each(function() { 
     $(this).css({'display':'none'}); 
    }); 
} 

現在，例外。你可能有一個方法從集合中的元素中返回一個值。在這種情況下，不是可以返回一個jQuery對象，而是值。例如，$.fn.html將所有選定元素的HTML內容作爲一個字符串返回。所以，你可能會問，「好的，但爲什麼還要爲不返回值的方法返回另一個jQuery對象？」。您可以這樣做，以便開發人員可以在一次調用中將功能鏈接起來回到.my-selector的例子，假設您不僅要應用點擊處理程序，還要使文本變爲粗體。

你可以這樣說：

var myLinks = $('a.my-selector'); 

myLinks.click(function() { /* handle click */ }); 
myLinks.css({'font-weight':'bold'}); 

但是，這是相當冗長，在JavaScript中，every line counts against your page weight。由於所有這些方法返回一個jQuery對象，你可以鏈一個聲明中呼籲：

$('a.my-selector').click(function() { /* handle click */ }).css({'font-weight':'bold'}); 

簡潔得多，對不對？

效用函數

效用函數是包裹經常使用的功能靜態或共享的功能。它們如上所述略微超出正常的jQuery模式，因爲它們僅用於封裝一些有用且可重用的邏輯。他們可以接受任何需要的參數，並返回任何想要的結果。例如，$.isArray這樣使用：

var myArray = []; 

alert($.isArray(myArray)); // displays true 

它被定義大致是這樣的：

$.isArray = function(o) { 
// check if o is array and return true or false 
}; 

現在，你可以很容易地剛做這個「老派」的定義JavaScript的方式它是這樣的：

function isArray(o) { 
    // check if o is array and return true or false 
} 

此外，你可能會問的優點是其連接到$什麼。其原因是爲了防止覆蓋開發人員，其他腳本甚至其他版本的jQuery定義的同名函數（如果您真的需要，可以在頁面中包含jQuery的多個版本，但那是另一個故事）。

TL; DNR

$()指的是jQuery對象的一個​​實例，$.fn允許您添加或更換的jQuery對象的一個​​方法，並$.yourFunctionNameHere讓你定義一個「靜態」或「共享」效用函數封裝有用的功能，否則不會遵循jQuery實例模式。

Answer 2

我不知道如果核心 VS 實用是對比兩種方法不對，但我會用它運行。

通常，核心方法對選定的jQuery對象進行操作。

// Loop through selected jQuery objects, operating on each 
$('li').each(function(index) { 
    alert(index + ': ' + $(this).text()); 
}); 

實用方法做不直接操作所選擇的jQuery對象;而是簡單地向開發者提供某種形式的功能或實用程序。它與任何其他JavaScript函數類似。 $允許它有一個jQuery所熟悉的「僞名字空間」。

// Loop through an array of numbers 
$.each([52, 97], function(index, value) { 
    alert(index + ': ' + value); 
}); 

由於@cleric指出，這chapter在jQuery Fundamentals解釋了它的更多細節。