jQuery插件教程

2024年5月5日 215次阅读 来源: trigkit4

jQuery插件的分类

jQuery插件有许多，有UI类，表单考证，输入类，殊效类，Ajax类，滑动类，导航类，东西类，动画类等等。

jQuery的插件重要分为三类：

1、封装对象要领的插件：也就是基于某个DOM元素的jQuery对象，局部性
2、封装全局函数的插件：将自力的函数增加到jquery的定名空间之下。jquery.trim()就是jquery内部作为全局函数的插件增加到内核上去的。
3、选择器插件：扩大本身喜好的一些选择器。类似于.toggle()

插件的基础要点

 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库背面

插件开辟体式格局

jQuery插件开辟体式格局重要有三种：

经由过程$.extend()来扩大jQuery
经由过程$.fn 向jQuery增加新的要领
经由过程$.widget()应用jQuery UI的部件工场体式格局建立

一般我们应用第二种要领来举行简朴插件开辟，而第一种要领是在jQuery定名空间上增加了一个静态要领，并不能让我们选中DOM元素，然后再挪用该要领。而第三种并不经常使用，也较为庞杂

插件的构造

在最先编写jQuery插件时，我们有必要相识一下插件的基础构造，一切的jQuery插件都声明为jQuery.fn对象的要领：

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

我们应用以下代码应用插件：

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

这里，我并没有应用$，这是为了防备定名争执，假如要用 $ 的话，能够像下面如许把插件代码封装在一个自实行的匿名函数中，然后传入参数jQuery

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

$.extend

.extend()许可你应用一个或多个对象扩大基准对象，扩大的体式格局是依序将右侧的对象合并到基准对象（左侧第一个对象）。

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

        }
    })
})(jQuery);

我们经由过程以下要领应用该全局要领：

$.nav();

前面（见：浅析jQuery团体框架与完成（上））我们说过，$.extend是全局性的，而$.fn.extend是局部性的，前面之所以要加分号是因为为了防备在此之前引入的js文件没有加分号

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

this指代jQuery选择器返回的鸠合。在插件里的this，经过了一些封装处置惩罚，this就是示意jQuery对象。而不须要再次应用$()举行包装了

链式挪用

要让插件完成链式挪用只须要return该对象即可：

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

应用return 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'
});
    原文作者：trigkit4
    原文地址: https://segmentfault.com/a/1190000002388893
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞