jqueryカスタムプラグインの書き方

jQuery プラグインを作成することは、再利用の目的を達成するためにいくつかの既存の関数をカプセル化することです

JQuery プラグインには主に 3 つのタイプがあります:

1. オブジェクト メソッドをカプセル化するプラグイン。
この型を記述する プラグインは、JQuery が提供する jQuery.fn.extend() メソッドを使用する必要があります。色をクエリするカスタム関数を実装する手順は次のとおりです
1.1 作成したプラグイン ファイルに jquery.color.js という名前を付けます
1.2 プラグインのコンテンツの作成

;(function($){
    jQuery.fn.extend({//这里也可以写成$.fn.extend
        "color":function(value){//value是颜色值
            return this.css("color",value);
        },        "border":function(value){
            //插入代码
        }
    });
})(jQuery);

2. グローバル関数をカプセル化するプラグイン
このタイプのプラグインは、jQuery 名前空間内に関数を追加します。このようなプラグインを作成するには、JQuery が提供する jQuery.extend() メソッドを使用する必要があります。文字列

;(function($){
    $.extend({
        ltrim:function(text){//需要去除空格的字符串
            return (text || "").replace(/^\s+/g, "");
        },
        rtrim:function(text){
            return (text || "").replace(/\s+$/g, "");
        }
    });
})(jQuery);

の左側のスペースを削除する関数を作成します。その後、 $.rtrim(" test ") または jQuery.ltrim(" test "); を使用して、スペースを削除した文字列を返すことができます。この関数は、jQuery の trim() 関数に似ています。

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

("p:gt(1)") を例として使用するなど、セレクタープラグイン間の書き込み手順を説明します。 jQuery の :gt() セレクターのソース コードは

gt:function(a,i,m){
    return i > m[3]-0;
}

です。ここで、

a は現在トラバースされている DOM 要素を指します。

i は現在トラバースされている DOM 要素のインデックス値を表します。
m は特殊な配列です。
m[0] = :gt(1) 解析される式
m[1] = :
m[2] = gt
m[3] = 1

このリファレンスを使用して、このセレクターを記述するコードは次のようになります。

;(function($){
    $.extend(jQuery.expr[":"], {
        between : function(a, i, m){
            var tmp = m[3].split(",");//m[3]值为[2,5];
            return tmp[0]-0 < i && i < tmp[1]-0;
        }
    });
})(jQuery);

jquery プラグインを書くことは、再利用の目的を達成するためにいくつかの既存の関数をカプセル化することです

以上がjqueryカスタムプラグインの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。