Comment écrire un plug-in personnalisé jquery

L'écriture de plug-ins jquery consiste à encapsuler certaines fonctions existantes pour atteindre l'objectif de réutilisation

Il existe trois principaux types de Types de plug-ins JQuery :

1. Plug-ins qui encapsulent des méthodes d'objet
L'écriture de tels plug-ins nécessite la méthode jQuery.fn.extend() fournie par JQuery. Les étapes pour implémenter une fonction personnalisée pour interroger la couleur sont les suivantes
1.1 Nommez le fichier de plug-in écrit jquery.color.js
1.2 Ecrire le contenu du plug-in

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

2. Plugins qui encapsulent des fonctions globales
Ce type de plug-in ajoute des fonctions dans l'espace de noms jQuery. Pour écrire de tels plug-ins, vous devez utiliser la méthode jQuery.extend() fournie par JQuery. Écrivez une fonction qui supprime les espaces sur le côté gauche d'une chaîne

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

Ensuite, vous pouvez utiliser $.rtrim(" test ") ou jQuery.ltrim(" test "); supprimé. La fonction est similaire à la fonction trim() de jQuery.

3. Plug-in de sélection
pour écrire entre la description du plug-in de sélection, par exemple, utilisez

(“p:gt(1)”) est expliqué avec un exemple
Le code source du sélecteur :gt() dans jQuery est

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

, où
a pointe vers l'élément DOM actuellement parcouru.
i représente la valeur d'index de l'élément DOM actuellement parcouru.
m est un tableau spécial.
m[0] = :gt(1) Expression à analyser
m[1] = :
m[2] = gt
m[3] = 1

Écrire ce code de sélection en référence à

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

L'écriture du plug-in jquery consiste à encapsuler certaines fonctions existantes pour atteindre l'objectif de réutilisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!