Un tutoriel concis sur l'écriture de plug-ins Jquery_jquery

Copier le code Le code est le suivant :

/*
1. Le plug-in jQuery Il est recommandé que le nom du fichier soit nommé jquery .[nom du plugin].js pour éviter toute confusion avec d'autres plug-ins de bibliothèque JavaScript. Par exemple, nommez-le jquery.color.js
2. Tous les noms de méthodes d'objet doivent être attachés à l'objet jQuery.fn et toutes les fonctions globales doivent être attachées à l'objet jQuery lui-même.
3. À l'intérieur du plug-in, cela pointe vers l'objet jquery actuellement obtenu via le sélecteur, contrairement aux méthodes générales, telles que la méthode chick(), l'interne this pointe vers l'élément dom
4. Vous pouvez. utilisez ce .each pour parcourir tous les éléments
5. Toutes les méthodes ou plug-ins de fonctions doivent se terminer par un point-virgule, sinon des problèmes peuvent survenir lors de la compression. Pour plus de sécurité, vous pouvez même ajouter un point-virgule en tête du plug. -in. No.,
pour empêcher les codes non standard d'autres personnes d'affecter la requête.
6. Le plug-in doit renvoyer un objet jquery pour garantir que le plug-in peut être chaîné. Sauf si le plug-in doit renvoyer un certain montant qui doit être renvoyé, comme une chaîne ou un tableau
7. Évitez d'utiliser $ comme alias pour l'objet jquery à l'intérieur du plug-in, mais utilisez jquery complet pour représenter afin d'éviter les conflits. Bien entendu, vous pouvez également utiliser la technique de fermeture pour éviter le problème de
, afin que le plug-in puisse continuer à utiliser $ comme alias pour jquery.
*/

//;Pour une meilleure compatibilité, il y a un point-virgule au début
;(function($){//Ici $ est utilisé comme paramètre formel de la fonction anonyme
//$.fn.extend plug-in d'extension
$.fn.extend({
"color":function(value){//color nom de la méthode du plug-in auto-écrit
/ /jQuery fournit du CSS La méthode peut être écrite directement sous la forme this.css("property","value");
return this.css("color",value);
}
});

}) (jQuery);//Ici, jquery est passé comme paramètre réel à la fonction anonyme


function red(){
alert($("#div" ).color() "Prouver que le plug-in est disponible ");
alert($("#div").color("red") "Preuve que le plug-in a renvoyé un objet Jquery");
$("#div").color("red") ;
}

Exemple d'utilisation du plug-in en HTML :

Copier le code Le code est le suivant :

 

dddddddddddddddd