标签：class style log com http 使用 it 代码 la 本来想写jQuery UI插件的，但是想了想还是算了。 本书介绍jQuery UI插件的时候太过简单，所以，准备在写完了jQuery这个系列之后，单独把jQueryUI拿出来写一个系列并顺便加入jQuery.grid插件。 尽量把最新的jQuery UI的各个方面都写一个简单的小例子和效果图，以后用来复制粘贴。\(^o^)/ 那么就让我们来开始学习编写jQuery的插件吧。 目的：虽然jQuery各种各样的功能已经很完善了，但是我们还是要学会自己去编写插件。这样我们可以去封装一些项目中经常用到的专属的代码，以便后期维护和提高开发效率。 jQuery插件的类型： jQuery插件的基本要点：
(function($){
//此处编写jQuery插件代码，这种闭包玩法就不在这里解释了，我前面的js基础系列写过了，不懂的请转到这个地址看看。在此篇文章最后的部分就是。
})(jQuery);
jQuery插件的机制： jQuery提供了两个用于扩展jQuery功能的插件，即jQuery.fn.extend()方法和jQuery.extend()方法。 前者实现封装对象方法的插件，后者实现封住选择器插件和全局函数插件。 jQuery.extend()除了用于扩展jQuery对象之外，还可以扩展已经存在的object对象，所以经常被用于设置插件方法的一系列默认参数。如：
function myFunc(options){
options=jQuery.extend({
name:"bar",
length:1
},options);
}
myFunc({name:"asd"});//此时函数调用后options的name为asd，length为1
编写jQuery插件
(function($){
$.fn.extend({
"alterBgColor":function(options){
options=$.extend({//设置默认参数
odd:"odd",
even:"even",
selected:"selected"
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$("tbody>tr",this).click(function(){
var hasSelected=$(this).hasClass(options.selected);
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
.find(":checkbox").attr(‘checked‘,!hasSelected);
});
$("tbody>tr:has(:checked)",this).addClass(options.selected);
}
});
})(jQuery);
(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
(function($){
$.extend(jQuery.expr[":"],{
between:tmp=m[3].split(",");tmp[0]-0<i&&i<tmp[1]-0;//这里用-0可以将字符串转换为数字
}
});
})(jQuery);
$("div:between(2,5)")
【jQuery基础学习】08 编写自定义jQuery插件 标签：class style log com http 使用 it 代码 la
相关文章
精彩导读
热门资讯
关注我们
