自定义jquery插件

时间:2022-05-14 16:24:40

插件名称最好为jquery.[插件名].js。所有方法和函数插件都应该以分号结尾。插件开头也应该添加分号。
插件应该返回一个jquery对象,以保证链式操作。或者返回需要获取的量。插件内部不要使用$作为jquery对象的别名。
所有的对象方法附加到jQuery.fn对象上,所有的全局函数,附加到jQuery对象上。
插件内部,this指向通过选择器获取的jquery对象,可以通过this.each遍历所有元素。

;(function($){                                                  //最前端的分号为了更好的兼容性, 将$作为匿名函数的形参
//此处编写jquery插件代码,可以将$作为jquery的缩写别名
})(jQuery); //这里就将jquery作为实参传递给匿名函数

options = jQuery.extend({ //extend扩展对象属性,extent收集多个对象参数的属性集合,属性的值以最晚出现的为准
name:"name1", //既可以用于为对象设置属性默认值,又可以用来扩展对象
age:12
},options); //当oprions属性和默认属性重叠是,值以越晚出现的为准


//封装jquery对象方法的插件。
;(function($){
$.fn.extend({ //对jquery.fn对象进行扩展
"color":function(value){ //自定义color函数,设置无参和有参时的调用
if(value==undefined)
return this.css("color"); //没有参数返回颜色 this表示jquery选择器选择的元素对象
else
return this.css("color",value); //有参数,则设置颜色
},
"myfun": function (options) { //多个自定函数,以映射的形式存在于一个字典中
options = $.extend({name:"name1",age:12},options); //对传递参数可能不全的情况进行兼容,设置默认值
//使用options进行后续函数
return this; //返回this,是方法可链
},
"max":function(){ //选择器选择的元素可能有多个,通过this传递过来就是元素列表
return this.each(function () { //通过each对选择的元素列表进行遍历

});
}
});
})(jQuery);
//调用对象方法
$("div").color("red"); //设置颜色



//封装全局函数的插件,使用jQuery.myfun来调用。
;(function($){
$.extend({ //全部函数,不需要fn,对jquery自己进行扩展
myfun1:function(text){
return text;
},
myfun2:function(value){}
});
})(jQuery);
//调用全局方法
jQuery.myfun1("111111");


//自定义选择器
;(function($) {
$.extend(jQuery.expr[":"],{ //自定义选择器是jQuery.expr[":"]对象的一部分,所以多次对象进行扩展
between: function(a,i,m){ //自定义between选择器, a表示遍历到的当期DOM元素,i表示DOM元素的索引,从0开始,m是一个数组。
//以$("div:gt(1)")为例。m[0]表示进一步要匹配的内容:gt(1) m[1]表示选择器引导副: m[2]表示选择器函数get m[3]表示选择器函数参数1
var tmp=m[3].split(","); //以逗号为分隔符,这里自己定义分隔符
return tmp[0]-0<i && i<tmp[1]-0; //当元素索引在两个参数之间,返回true,表示选中
}
});
})(jQuery);
//应用自定义选择器
$("div:between(2,5)").css("color","red");