本来想写jQuery UI插件的,但是想了想还是算了。
本书介绍jQuery UI插件的时候太过简单,所以,准备在写完了jQuery这个系列之后,单独把jQueryUI拿出来写一个系列并顺便加入jQuery.grid插件。
尽量把最新的jQuery UI的各个方面都写一个简单的小例子和效果图,以后用来复制粘贴。\(^o^)/
那么就让我们来开始学习编写jQuery的插件吧。
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件。这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率。
jQuery插件的类型:
- 封装对象方法的插件
- 大部分jQuery的插件都属于这种,对获取的jQuery对象进行操作
- 封装全局函数的插件
- 选择器插件
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插件
- 封装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); return this;//返回this,支撑链式操作 } });})(jQuery);
$("tbody>tr:odd",this)这种用法在加上第二个参数this后,第一个参数的选择器就只会在this这个对象下进行筛选。
- 封装全局函数的插件
- 去除左空白字符和去除右空白字符的插件例子:
(function($){ $.extend({ ltrim:function(text){ return (text||"").replace(/^\s+/g,""); }, rtrim:function(text){ return (text||"").replace(/\s+$/g,""); } });})(jQuery);
- 自定义选择器的插件
- 选择索引介于两个数中间的元素的选择器插件例子:
(function($){ $.extend(jQuery.expr[":"],{ between:function(a,i,m){//选择器函数 //a指向的是当前遍历到的DOM元素 //i指的是当前遍历到的DOM元素的索引值 //m最为特别,它是由jQuery正则解析引擎进一步解析后的产物,是一个数组 //这里只讲m[3],比如选择器:gt(2)那么m[3]就为2,如果是多个,那么就是"2,5"这种以逗号分隔的参数字符串 var tmp=m[3].split(",");//以逗号为分隔符,切成一个数组 return tmp[0]-0<i&&i<tmp[1]-0;//这里用-0可以将字符串转换为数字 } });})(jQuery);$("div:between(2,5)")
原标题:【jQuery基础学习】08 编写自定义jQuery插件
关键词:jquery