jQueryプラグインはこんなにシンプルだったことが判明 jQuery plug-in_jqueryの仕組みと実践

jQuery プラグインの種類
1. カプセル化されたオブジェクト メソッド

オブジェクトのメソッドをカプセル化し、セレクターを通じて取得した jQuery オブジェクトを操作するために使用される最も一般的なプラグインです。このタイプのプラグインは、parent() メソッドや appendTo( など、jQuery スクリプト ライブラリ内のこの形式で、かなりの数の jQuery メソッドがカーネルに「挿入」されます。 ）メソッドを待ってください。

2. グローバル関数のカプセル化

jQuery 名前空間に独立した関数を追加できます。たとえば、一般的に使用される jQuery.ajax() メソッドと、先頭と末尾のスペースを削除する jQuery.trim() メソッドはすべて、jQuery 内のグローバル関数としてカーネルにアタッチされるプラグインです。

3. セレクター プラグイン

jQuery のセレクターは非常に強力ですが、場合によっては、お気に入りのセレクターの一部を拡張するためにセレクター プラグインを使用する必要があります。

jQuery プラグインの仕組み
jQuery プラグインの仕組みは非常にシンプルで、jQuery が提供する jQuery.fn.extend() メソッドと jQuery.extend() メソッドを使用して、 jQueryの機能を拡張します。

jQuery.fn.extend() は主に、上記の 3 種類の最初のプラグインを拡張するために使用され、jQuery.extend() は後の 2 つのプラグインを拡張するために使用されます。どちらのメソッドも、Object 型のパラメーターを 1 つ受け入れます。 Object オブジェクトの「名前と値のペア」は、それぞれ「関数またはメソッドの名前/関数本体」を表します。

jQuery プラグインを作成するためのヒント
1. 他の JS ライブラリ プラグインとの混同を避けるため、jQuery プラグインのファイル名は jquery.[プラグイン名].js という名前にすることをお勧めします。 -ins。

2. すべてのオブジェクト メソッドは jQuery.fn オブジェクトにアタッチされ、すべてのグローバル関数は jQuery オブジェクト自体にアタッチされる必要があります。

3. 他の人の不規則なコードがプラグインに影響を与えるのを防ぐために、プラグインの先頭にセミコロンを追加します。

4. すべてのメソッドまたは関数プラグインは、圧縮中の問題を避けるためにセミコロンで終わる必要があります

5. プラグインが取得する必要のある変数を返す必要がない限り、プラグインのチェーン可能な操作を保証するために、プラグインは jQuery オブジェクトを返す必要があります。

6. jQuery.extend() メソッドでプラグイン メソッドのデフォルト パラメータを設定し、プラグインの使いやすさを向上させると便利です。

jQuery プラグインの構造
jQuery プラグインの構造は次のとおりです:

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

;(function($){
/*プラグイン コードをここに配置します。$ を jQuery のエイリアスとして使用できます*/
} )(jQuery);

カプセル化 jQuery オブジェクト メソッド プラグイン 実践
機能: 選択した要素の色を設定、最初に選択した要素の色を取得

: jquery.color.js

構造:

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

;(function($){
$.fn.extend( {
//ここにプラグイン コードを記述します
});
})(jQuery); 🎜>

アイデア: 呼び出し時にパラメーター値が渡された場合は色を設定し、それ以外の場合は色を取得します。色を取得および設定するには、jQuery が提供する CSS メソッドを使用できます。

完全なコード:

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

;(function($){
$.fn.extend({
"color":function(value){
if( value==未定義){
return this.css("color");
else{
return this.css("color",value);

}) ;
})(jQuery);


色を取得するときに css() メソッドがすでに最初の要素を決定しているため、ここでは this.css を直接使用します。 （「色」）それだけです。

プラグインのグループの場合は、次のように記述できます:

コードをコピーコードは次のとおりです: ;(function($){

$.fn.extend({

"color":function(value){
//プラグ-in コード
},
" border":function(value){
//プラグイン コード
},
"background":function(value){
/ /プラグイン コード
}
})(jQuery);


プラグイン テスト:
http://demo.jb51.net /js/2012/jquery_demo/encapsulated jQuery オブジェクト メソッド プラグイン Demo.html

グローバル関数のカプセル化プラグインの実践
機能: 左右のスペースを個別に削除 名前: jquery.lrtrim.js

構造:




コードをコピー

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

;(function($){
$.extend({
ltrim:function(text){
//プラグイン コード
},
rtrim: function( text){
//プラグイン コード
}
});
})(jQuery);

アイデア: このタイプのプラグインjQuery 名前空間内に追加されます。 関数の場合は、正規表現を使用するだけです。

完全なコード:

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

;(function ($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^s /g,"");
} ,
rtrim:function(text){
return (text||"").replace(/s $/g,"");
}
}); >}) (jQuery);

プラグイン テスト:
http://demo.jb51.net/js/2012/jquery_demo/カプセル化グローバル関数 jQuery プラグイン Demo.html 動作中の自己定義セレクター プラグイン
jQuery は強力なセレクターで知られていますが、jQuery のセレクターはどのように機能するのでしょうか?

jQuery の選択パーサーは、まず一連の正規表現を使用してセレクターを解析し、次に解析されたセレクターごとに選択関数と呼ばれる関数を実行します。最後に、選択関数の戻り値が true か false かに基づいて要素を保持するかどうかを決定し、一致する要素ノードを見つけます。

たとえば、$("div:gl(1)") の場合、このセレクターは最初にすべての

要素を取得し、次にこれらの

要素を暗黙的に走査して、これらの

を選択します。 ; 要素をパラメータとして使用し、括弧内の「1」などの一部のパラメータをgtの対応するセレクタ関数に渡して判定します。 true が返された場合は保持され、それ以外の場合、結果は要件を満たす

要素のコレクションになります。

セレクター関数は合計 3 つのパラメーターを受け入れます。形式は次のとおりです:

コードをコピー コード

function (a,i,m){
//...
}

最初のパラメータは a で、これはDOM 要素への現在のトラバーサルを指します。

2 番目のパラメーターは i で、現在トラバースされている DOM 要素の 0 から始まるインデックス値を参照します。

3 番目のパラメーターは m で、jQuery の通常の解析エンジンによるさらなる解析の結果です。最も重要なものは $("div:gl(1) の m[3] です。 )") は括弧内の数字「1」です。

jQuery にはすでに lt、gt、および eq セレクターがあるため、ここでは 2 つの間のセレクターを示します。

機能: a と b の間のインデックス値を持つ要素を選択します (a
名前付け: jquery.between.js

構造:

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

;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//プラグインコード
}
});
}) (jQuery);

アイデア: 上記の 3 つのパラメーターのうち、m[3] は「a, b」の形式なので、m[3] を「,」で区切ります。 " そして、インデックス値 i を比較し、i が m[3] で表される範囲内にある場合は true を返し、そうでない場合は false

完全なコード:

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

;(function($){
$.extend($.expr[":"] ,{
between :function(a,i,m){
var temp=m[3].split(",");
return temp[0]}
});
})(jQuery);

注: ここでは、temp[0] と temp[1] を数値に変換するために使用します。 🎜>
プラグイン テスト:
http://demo.jb51.net/js/2012/jquery_demo/jQuery カスタム セレクター プラグイン DEMO.html
概要 この記事主にjQueryプラグインの種類や仕組み、種類ごとの実戦などを紹介していきますので、皆さんの参考になれば幸いです。私も jQuery の初心者なので、皆さんもぜひ試してみてください。

参考書籍：『Sharp jQuery』（人民郵政出版社）