jQuery的插件开发有三种方式:
- 封装jQuery的对象方法
- 定义全局函数
- 自定义选择器
封装jQuery对象方法的插件(jquery.插件名.js):
这种方式就是把一些常用或者是重复使用的功能定义为函数,绑定到jQuery对象上,从而成为jQuery的一个扩展方法。
//1.在插件中封装一个方法
(function($)){
$.fn.方法名=function(){
//实现插件的代码
//....
};
})(jQuery);
上述代码中,$.fn是jQuery的命名空间,通过$.fn方法名的方式将封装的功能方法对每一个jQuery实例都有效
//2.在插件中封装多个方法
jQuery.fn.extend({
方法名1:function(参数列表){
//实现插件的代码
//...
},
方法名2:function(参数列表){
//实现插件的代码
//...
}
});
上述代码中,要在一个插件中封装多个方法,则需要借助extend()方法,该方法体中利用JavaScript对象语法的编写方式实现多个方法的封装。
定义全局函数的插件
此方法定义的扩展就是把自定义函数附加到jQuery命名的空间下,从而作为一个公共的全局函数使用。
jQuery.extend({
方法名1:function(参数列表){
//实现插件的代码
//...
},
方法名2:function(参数列表){
//实现插件的代码
//...
}
});
自定义选择器的插件
为了更方便的选择满足条件的HTML元素,jQuery提供了强大的选择器功能
$.expr[":"].方法名称=function(obj){
//自定义选择器代码
return 匹配HTML元素条件;
};
以上代码中,obj表示进行匹配的HTML元素对应的jQuery对象。根据需要对jQuery对象的属性进行判断,并使用return返回匹配结果。