ホームページ > 記事 > ウェブフロントエンド > jQueryプラグインはこんなにシンプルだったことが判明 jQuery plug-in_jqueryの仕組みと実践
jQueryプラグインはこんなにシンプルだったことが判明 jQuery plug-in_jqueryの仕組みと実践
- WBOYオリジナル
- 2016-05-16 17:56:34938ブラウズ
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); 🎜>
完全なコード:
$.fn.extend({
"color":function(value){
if( value==未定義){
return this.css("color");
else{
return this.css("color",value);
}) ;
})(jQuery);
色を取得するときに css() メソッドがすでに最初の要素を決定しているため、ここでは this.css を直接使用します。 （「色」）それだけです。
//プラグ-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)") の場合、このセレクターは最初にすべての
セレクター関数は合計 3 つのパラメーターを受け入れます。形式は次のとおりです:
//...
}
2 番目のパラメーターは i で、現在トラバースされている DOM 要素の 0 から始まるインデックス値を参照します。
3 番目のパラメーターは m で、jQuery の通常の解析エンジンによるさらなる解析の結果です。最も重要なものは $("div:gl(1) の m[3] です。 )") は括弧内の数字「1」です。
jQuery にはすでに lt、gt、および eq セレクターがあるため、ここでは 2 つの間のセレクターを示します。
機能: a と b の間のインデックス値を持つ要素を選択します (a
名前付け: jquery.between.js
構造:
$.extend($.expr[":"],{
between:function(a,i,m){
//プラグインコード
}
});
}) (jQuery);
完全なコード:
$.extend($.expr[":"] ,{
between :function(a,i,m){
var temp=m[3].split(",");
return temp[0]
});
})(jQuery);
プラグイン テスト:
http://demo.jb51.net/js/2012/jquery_demo/jQuery カスタム セレクター プラグイン DEMO.html
概要 この記事主にjQueryプラグインの種類や仕組み、種類ごとの実戦などを紹介していきますので、皆さんの参考になれば幸いです。私も jQuery の初心者なので、皆さんもぜひ試してみてください。
参考書籍：『Sharp jQuery』（人民郵政出版社）