jQuery笔记（编写jQuery插件）

编写jQuery插件

1.1 扩展 $.fn 对象

编写jQuery插件，就等同与编写一个jQuery对象的方法。给jQuery对象绑定方法是通过扩展$.fn对象实现的。
如编写一个改变样式的插件：

$.fn.makecolor=function(options){
       
    var color = options && options.color || "deeppink";//要先判断options，以免调用options.color时报错
    var bgcolor = options && options.color || "yellow";
    this.css("color",color).css.('backgroundColor',bgcolor)
    return this
}

注：一定要留意return this，这表示可以继续链式使用下去
同时还要留意这里的this指向的是jQuery对象，如果里头再调用诸如filter()的方法，this指向的就是DOM对象了

2.2 $.extend(target,op1,op2..) 方法与$.fn.extend()

上述除了用&&及||逻辑运算符绑定默认值外，还可以使用$.extend()方法，$.extend()方法可以接受多个object对象，把这些对象都整合到target对象（初始为{}）中并进行返回，如果遇到对象同名属性，就会调用排名靠后的对象值。

$.extend({},{color:"deeppink",backgroundcolor:"yellow"},option1)

如果还想改写默认值简单一点，就可以这样写：

$.fn.makecolor.default={color:"deeppink",backgroundColor:"yellow"};

$.fn.makecolor=function(option){
       
    var allop = $.extend({},$.fn.makecolor.default,option);
    this.css("color",allop.color).css("backgroundColor",allop.backgroundColor);
    return this;
}

要注意$.extend与$.fn.extend的区别，类似于$.each()与$().each()，前者主要是用来拓展个全局函数，而后者主要是扩展jQuery实例

2.3 针对特定元素的扩展

大多时候都是针对特定元素进行扩展，此时可以过滤函数filter()，如：

$.fn.makecolor() {
    this.fitler("a").css("color","blue");
    return this.fitler("a");
}

转载于:https://www.cnblogs.com/AB786883603/p/8325401.html