jqueryプラグイン学習(2)_jquery

グローバル関数の作成には、jquery オブジェクトに属性を追加するだけで済みます。jquery オブジェクトの作成方法は、jquery.fn に属性を追加することによっても実現できます。実際、jquery.fn オブジェクトは、jquery.prototype プロトタイプのエイリアスです。オブジェクトのエイリアスを使用して簡単に参照できます。

デモ:

コードをコピー コードは次のとおりです:

jQuery .fn.test = function(){
alert('これは jquery オブジェクトのメソッドです');

これで、任意の jquery オブジェクトでこのメソッドを呼び出すことができます。

コードをコピー コードは次のとおりです。

$(function(){
$(' h1').click(function(){
$(this).test();
})
}); ここにあるからdom ノードと一致するため、グローバル関数を記述することもできます (前のセクションで説明したように)。ただし、jquery オブジェクト メソッドを使用する場合、関数本体の this キーワードは常に現在の jquery オブジェクトを参照します。上記のメソッドを書き換えて動的プロンプト情報を実装できます。コードは次のとおりです。

コードをコピーします

コードは次のとおりです。次のように: jQuery.fn.test = function(){ alert(this[0].nodeName) //現在の jquery オブジェクトの dom ノード名の入力を要求します

}

ここで重要な点がわかります。上記の例では、jquery セレクターが配列型の DOM ノード コレクションを返すため、this ポインターは現在のコレクションを指していることがわかります。現在の要素のノード名を指定する場合は、要素のシーケンス番号の後に現在の要素を指定する必要があります。

考え: jquery セレクターが複数の要素に一致する場合、現在の要素のオブジェクトを正確に指定するにはどうすればよいでしょうか? -----

この問題を解決するには、現在の jquery オブジェクト メソッドのコンテキストで each() メソッドを呼び出し、暗黙的な反復を通じてこのポインターに一致する各 dom 要素を順番に飲ませればよいでしょう。たとえば、前の例をさらに変更したオブジェクト




コードをコピーします

コードは次のとおりです: jQuery.fn.test = function(){ this.each(function(){ //一致する要素をトラバースします。ここではオブジェクト コレクションを表します

alert(this.nodeName); //現在の jquery のプロンプト オブジェクトの DOM ノード名 (ここと上の変更に注意してください。添え字が消えています)

})
}


次に、メソッドを呼び出すときに、心配する必要はありません。jquery セレクターが一致する要素の数。たとえば、次の例では、さまざまな要素をクリックすると、現在のノード名が表示されます。

コードをコピー

コードは次のとおりです。次のように: $(function(){ $('body *').click(function(){

$(this).test();

});
});

コードをコピーします

コードは次のとおりです。

ceshi

ddddddddd div 要素