编写jQuery插件

Jquery的插件主要分为三类：
  1.封装方法插件
        封装方法插件在本质上来说,是一个对象级别的插件,这类插件首先通过jQuery选择器获取对象,并为对象添加方法,然后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了jQuery中功能强大的选择器,因此,成为开发插件的首选.
  2.封装函数插件
        封闭函数插件是一个类级别的插件,这类插件最大的特点,就是可以直接给jQuery添加静态方法,并且可以将函数置于jQuery命名空间中,如最为觉的就是$.ajax(),$.trim()全局性函数,都是以内部插件的形式植入jQuery内核中.
  3.选择器插件：扩充自己喜欢的一些选择器。

;(function($){
    $.fn.name = function(options){  //各种属性、参数
       var options = $.extend(defaults, options);//定义参数
       this.each(function(){
           //插件实现代码
           return this;
       });
    };

    $.fn.highlight.defaults = {
        //默认属性参数    
    };
})(jQuery);

//调用
$.fn.name.defaults.x = '';
$('#id').name();

(1)、“;(function($){    })(jQuery);”使用了匿名函数，表示在方法体内的”$”表示的就是”jquery”,为了有更好的兼容性，所以在前面添加一个分号
,这里的$符号是作为匿名函数的形参
(2)、$.extend(defaults, options);表示的是如果options中的参数总是有值的话，那么options中的值将会代替defaults中的值。

 

jQuery extend()和jQuery.fn.extend()两者调用方式不同：

       jQuery.extend(),一般由传入的全局函数来调用，主要是用来拓展个全局函数，如$.init()，$.ajax();

       jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，例如$.fn.each();

jQuery extend()和jQuery.fn.extend()两者的主要功能作用不同：

        jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。

        jQuery.fn.extend(object);给jQuery对象添加方法

 

//step01 定义JQuery的作用域
(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a 在插件里定义方法
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }

    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性，默认属性
        var options = $.extend(defaults, options);
        //step4 支持JQuery选择器
        //step5 支持链式调用
        return this.each(function () {
            //step06-b 在插件里定义方法
            showLink(this);
        });
    }
})(jQuery);