jQuery插件开发

JQ插件

1.JQ插件是用来扩展JQ原型对象的一个方法

2.插件的使用方式就是JQ对象方法的调用

JQ内部定义了一个jQuery.fn对象 jQuery.fn = jQuery.prototype 也就是说 jQuery.fn 对象是jQuery的原型对象，方法定义在jQuery.fn对象上

基础jQ插件

$.fn.changeStyle = function(colorStr){
　　this.css("color",colorStr)
}
// 使用方法
    
$(".p1").changeStyle("red")

 

插件在调用时 插件内部的this就是调用插件的jQuery对象

这样每个$()在调用插件的时候都会使用插件内的jQ方法

满足链式调用的jQuery插件

链式调用其实是jQuery的一大特色 一个通用插件应该遵循jQuery风格

满足链式调用的要求 所以插件在调用结束以后 需要 return this

即在插件执行完以后 会把当前的jQ对象返回

方便在插件的后面继续调用其他jQuery方法

使用链式调用的方法改写上面的插件

$.fn.changeColor = function(color){
     this.css("color",color);
     return this;
}

$(".p2").changeColor("yellow").addClass("large");

防止$符号污染的jQuery插件

为了避免$.fn对象受到其他使用$变量的js库的影响，可以使用立即执行函数通过传参的方式封装插件

使用立即执行函数,$只属于这个立即执行的函数的作用域

这样就可以避免$符的污染

注意 插件前加分号 避免无法解析为函数

;(function($){
    $.fn.changesColors = function(color){
        this.css("color",color);
        return this;
    }
}(jQuery));

$(".p3").changesColors("green")    

传递多个参数

    ;(function($){
        $.fn.changeStyles = function(options){
            this.css("color",options.color).css("fontSize",options.fontSize);
            return this;
        }
    }(jQuery))

    
    $(".p4").changeStyles({
        "color":"blue",
        "fontSize":"30px"
    })

　　

把参数放到一个对象中传给插件还有一个好处 就是 我们可以在插件内部为一些参数定义一些缺省值

定义缺省值

    ;(function($){
        $.fn.changesStyle =  function(options){
            var defaultSetting = {'color':"red",'fontSize':"30px"} 
            var setting = $.extend(defaultSetting,options)
            this.css({"color":setting.color,"fontSize":setting.fontSize})
            return this;
        }
    }(jQuery))

    $(".p5").changesStyle()

    $(".p5").changesStyle({'color':'orange','fontSize':"40px"})

　　

即 合并两个对象 把后面一个对象存在的属性值赋值给第一个对象

$.extend 还可以用来扩展jQuery对象本身

这样定义的插件 我们在使用时 如果不传参数 那么就会使用这个插件内部的默认值

注意 在为插件定义默认参数时 一定要把默认参数写在参数方法内部
这样默认参数的作用域就在插件内部

$.fn.extend 插件

;(function($){
    $.fn.extend({
        styleSet:function(option){
            var defaultSetting = {'color':"#fff",'background':"#000"};
            var setting = $.extend(defaultSetting,option);
            this.css({color:setting.color,background:setting.background})
            return this;
        }
    })
}(jQuery))


$(".p6").styleSet({color:"blue",background:"orange"})

　　

注意

$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能

$.extend方法是在jQuery全局对象上扩展方法 $.fn.extend方法是在$选择符选择的jQuery对象上扩展方法
所以 扩展jQuery的公共方法一般用 $.extend方法 定义插件一般使用$.fn.extend方法