Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery插件教程

jQuery插件教程

发布时间:2016-09-16   编辑:www.jquerycn.cn
jquery中文网为您提供jQuery插件教程等资源,欢迎您收藏本站,我们将为您提供最新的jQuery插件教程资源

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'
});

您可能感兴趣的文章:
推荐40个非常优秀的jQuery插件和教程【系列三】
40款非常棒的jQuery 插件和制作教程(系列二)
JQuery 插件模板 制作jquery插件的朋友可以参考下
JQuery插件fancybox无法在弹出层使用左右键的解决办法
40款非常棒的jQuery 插件和制作教程(系列一)
Jquery插件编写简明教程
20个非常棒的 jQuery 幻灯片插件和教程分享
jQuery插件开发基础简单介绍
25个非常棒的jQuery滑块插件和教程小结
jquery插件开发注意事项小结

[关闭]