So schreiben Sie ein benutzerdefiniertes JQuery-Plug-In

Das Schreiben von JQuery-Plug-Ins besteht darin, einige vorhandene Funktionen zu kapseln, um den Zweck der Wiederverwendung zu erreichen

Es gibt drei Haupttypen von JQuery-Plug-In-Typen:

1. Plug-Ins, die Objektmethoden kapseln
Das Schreiben solcher Plug-Ins erfordert die von bereitgestellte Methode jQuery.fn.extend() JQuery. Die Schritte zum Implementieren einer benutzerdefinierten Funktion zum Abfragen von Farben sind wie folgt
1.1 Benennen Sie die geschriebene Plug-in-Datei jquery.color.js
1.2 Schreiben des Inhalts des Plug-Ins

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

2. Plug-Ins, die globale Funktionen kapseln
Dieser Plug-In-Typ fügt Funktionen innerhalb des jQuery-Namespace hinzu. Um solche Plug-Ins zu schreiben, müssen Sie die von JQuery bereitgestellte Methode jQuery.extend() verwenden. Schreiben Sie eine Funktion, die Leerzeichen auf der linken Seite einer Zeichenfolge entfernt

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

Dann können Sie $.rtrim(" test ") oder jQuery.ltrim(" test "); verwenden, um eine Zeichenfolge mit Leerzeichen zurückzugeben ENTFERNT. Die Funktion ähnelt der trim()-Funktion von jQuery.

3. Selektor-Plug-in
Um eine Beschreibung zwischen Selektor-Plug-ins zu schreiben, verwenden Sie beispielsweise

(“p:gt(1)”) wird anhand eines Beispiels erklärt
Der Quellcode des :gt()-Selektors in jQuery lautet

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

, wobei
a auf das aktuell durchlaufene DOM-Element verweist.
i stellt den Indexwert des aktuell durchlaufenen DOM-Elements dar.
m ist ein spezielles Array.
m[0] = :gt(1) Zu analysierender Ausdruck
m[1] = :
m[2] = gt
m[3] = 1

Schreiben Dieser Auswahlcode bezieht sich auf

;(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);

Das Schreiben eines JQuery-Plug-Ins besteht darin, einige vorhandene Funktionen zu kapseln, um den Zweck der Wiederverwendung zu erreichen

Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein benutzerdefiniertes JQuery-Plug-In. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!