Partagez des exemples de plug-ins jQuery

Classification des plug-ins jquery

jQueryIl existe de nombreux plug-ins, dont la UI classe, la validation de formulaire, la classe d'entrée, la classe d'effets spéciaux, Ajax classe, classe coulissante, classes de navigation, classes d'outils, classes d'animation, etc. Les

jQuery les plug-ins sont principalement divisés en trois catégories :

1、封装对象方法的插件：也就是基于某个DOM元素的jQuery对象，局部性
2、封装全局函数的插件：将独立的函数添加到jquery的命名空间之下。jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。
3、选择器插件：扩充自己喜欢的一些选择器。类似于.toggle()

Points de base des plug-ins

 1. 插件的文件名推荐为 jquery.[插件名].js，例如jquery.validate.js
 2. 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
 3. 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素
 4. 可以通过this.each来遍历所有元素
 5. 所有的方法或函数插件，都应当以分号结尾，否则压缩时可能出问题，有的为了更加稳妥些，在插件的开始处加上一个分号
 6. 插件应该返回一个jQuery对象，这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等
 7. 尽量利用闭包技巧历来避免变量名的冲突
 8. 引入的自定义插件必须在jQuery库后面

Méthodes de développement de plug-ins

jQueryIl existe trois méthodes principales de développement de plug-ins :

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jquery ui的部件工厂方式创建

Habituellement, nous utilisons la deuxième méthode pour le développement simple de plug-ins, et la première méthode consiste à ajouter une méthode statique à l'espace de noms jQuery et nous ne pouvons pas sélectionner un élément DOM puis appeler cette méthode. Le troisième type n'est pas couramment utilisé et est plus compliqué

La structure du plug-in

Lorsque nous commençons à écrire le jQuery plug-in, nous devons comprendre la structure de base de le plug-in, tous les jQuery Plug-ins sont déclarés comme méthodes d'jQuery.fn objets :

jQuery.fn.showPlugin = function () {
      //code here
};

Nous utilisons le code suivant pour utiliser les plug-ins :

$("#plugin").showPlugin();

Ici, je n'ai pas utilisé $, c'est pour éviter les conflits de noms, si vous souhaitez utiliser $, vous pouvez encapsuler le code du plug-in dans une fonction anonyme auto-exécutablejQuery comme suit , puis passez les paramètres

(function($){
    jQuery.fn.showPlugin = function () {
        //code here
    };
})(jQUery);

.extend()

;(function($){
    $.extend({
        'nav' : function () {

        }
    })
})(jQuery);

$.nav();

$.extend Plus tôt (voir : Une brève analyse du cadre global et de la mise en œuvre de jQuery (Partie 1)), nous avons dit que $.fn.extend est Global et js est local. La raison pour laquelle un point-virgule est ajouté est d'empêcher le fichier

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}

thisjQuery Représente la collection renvoyée par le. this sélecteur. Le this dans le plug-in a subi un traitement d'encapsulation et jQuery représente l'objet $(). Il n'est pas nécessaire d'utiliser

returnPour que le plug-in implémente l'appel de chaîne, il vous suffit de

$.fn.myPlugin = function() {
    this.css('color', 'red');
    return this.each(function() {
        //对每个元素进行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

returnUtilisez this.each(function () {}

$.fn.myPlugin = function(options) {    //经常用options表示有多个参数。
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

$('a').myPlugin({
    'color': '#2C9929'
});

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!