jQueryのコアメソッドとユーティリティのメソッド

Question

jQueryのメソッドは広義には2つのタイプと呼ばれます。私が推測するコアメソッドおよびユーティリティメソッド

が、彼らはそれが$対$（）を呼び出し

は、誰かが、各タイプの例を提供し、違いを強調してくださいでした。 ありがとうございます。

Answer 1

（TLにスキップ; DNR最後にあなたが読ん嫌いと要約をしたい場合は、その後、戻って、私は明確に言って何が必要な場合は全部を読む）

のエッセンスjQuery

jQueryを初めて使う人にとっては、最初によく紛れていることは、jQueryオブジェクトが何であるか、それがなぜ機能するのかです。 jQueryのアーキテクチャは、開発者が1つのステートメント内のすべての関連要素を選択し、相互作用し、シンプルで簡潔な構文で操作し、異なるブラウザの仕組み間の落とし穴や注意点を心配する必要がないようにすることを目的としています。したがって、特定のCSSクラスを持つページのすべてのリンクにイベントハンドラを添付したい場合は、すべての子要素を参照する怪獣ではなく$('a.my-selector').click(function() { /* my handler here */ });のコードをdocument.bodyにして、アンカーかどうかを確認します要素がmy-selectorクラスである場合、そのブラウザに固有の方法で目的のハンドラを付加し、その要素の子に対して再帰的に自身を呼び出します。

何中核方法だと何のプラグインメソッド

コアメソッドはjQueryのスクリプトで定義された、およびプラグインがあなたまたは拡張するために、別の開発者によって定義された以外のコアとプラグインの方法は、同じですjQueryのコア機能を強化することができます。

Coreおよびプラグインのメソッド（私は単に今から「メソッド」と呼ぶことにします）jQueryオブジェクトのメンバである関数です（$がそう$()とjQuery()、タイピングを減らすために、jQueryの別名であります同じだ）。これらのメソッドは、ページ上の要素をトラバースし、対話し、操作する手段を提供します。あなたが$()を起動すると、あなたがこれまでに定義されているすべてのメソッドを持つコアjQueryオブジェクトのインスタンスを作成する方法方法作業

。このオブジェクトには、$()に提供した引数に応じて、選択、参照、または作成したすべてのブラウザHTML要素への参照も含まれています。したがって、あるメソッドでは、コレクション内のアイテムがゼロから数個の要素のコレクションで作業しているとみなす必要があります。 $.fnが$()オブジェクトのprototypeにちょうど別名であることを

$.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. 
    }); 
}; 

注：ほとんどの場合、あなたの方法は、このような何かを開始します。したがって、$.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`. 

、それだけで（この場合には、それは私が上で示したようちょうど、this.eachの結果を返すために最も簡単です）はjQueryの現在の要素を返す必要があります。例：$.fn.hideは、CSS display:noneを適用することによって各選択された要素を非表示にするので、this.eachを返すことができます。これは非常に大雑把に見えるものです：

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

ここでは例外があります。コレクション内の要素から値を返すメソッドがあります。その場合、それはではありませんは、jQueryオブジェクトを返すが、値です。たとえば、$.fn.htmlは、選択したすべての要素のHTMLコンテンツを1つの文字列として返します。

だから、 "OKですが、値を返さないメソッドに対して別のjQueryオブジェクトを返すのはなぜですか？"これにより、開発者は1つの呼び出しで機能を連鎖させることができます。 .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オブジェクトを返すので、あなたは1文で呼び出しをチェーンすることができます

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

はるかに簡潔な、右？

ユーティリティ機能

ユーティリティ関数は、しばしば、使用される機能を包む静的または共有機能です。それらは、有用で再利用可能ないくつかの論理ビットをカプセル化するためだけに存在するため、上記のように通常のjQueryパターンの外側でわずかに機能します。彼らは必要なパラメータを取り込み、必要なものを返すことができます。たとえば、$.isArrayは、このように使用されます。

var myArray = []; 

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

それは、おおよそ次のように定義されています

さて、あなたは同じように簡単にだけ定義することで、「古い学校」のJavaScriptの方法、これを行っている可能性

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

それはこれを好き：

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

さらに、あなたは利点が$に取り付けるのが何であるかを尋ねるかもしれません。この理由は、開発者、他のスクリプト、または他のバージョンのjQueryで定義されている同じ名前の関数の上書きを防ぐためです（本当に必要な場合は、ページに複数のバージョンのjQueryを含めることができます。それは別の話です）。

TL; DNR

$()は$.fnあなたはjQueryオブジェクトにメソッドを追加または交換することができ、かつ$.yourFunctionNameHereは、あなたがその有用な機能をカプセル化する「静的」または「共有」の効用関数を定義することができ、jQueryオブジェクトのインスタンスを参照しますさもなければ、jQueryインスタンスパターンに従わない。

Answer 2

コア対ユーティリティは2を対比する正しい方法であれば、私はわからないんだけど、私はそれを実行します。

一般に、コアメソッドは選択されたjQueryオブジェクトで動作します。

ユーティリティメソッドがない直接選択jQueryのオブジェクトを操作するん

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

。代わりに、開発者に何らかの形の関数またはユーティリティを提供するだけです。他のJavaScript関数に似ています。 $は、すでにjQueryに慣れ親しんだ「疑似名前空間」を持つことができます。

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

@clericが指摘したように、jQuery Fundamentalsでこのchapterは、より詳細にそれを説明しています。