【jQuery基础学习】08 编写自定义jQuery插件
2016-02-03 00:01
591 查看
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件。这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率。
jQuery插件的类型:
封装对象方法的插件
大部分jQuery的插件都属于这种,对获取的jQuery对象进行操作
封装全局函数的插件
可以理解为$.ajax这种就是封装的全局函数
选择器插件
顾名思义,封装的选择器
jQuery插件的基本要点:
jQuery插件的文件名推荐为:jquery.[插件名].js,以免和其它js库插件混淆。
所有对象方法应该附加到jQuery.fn对象上,所有全局方法应该附加到jQuery对象本身上。
在插件内部,this指向的是当前获取的jQuery对象,而不是DOM元素
可以通过this.each来遍历所有元素
插件应该返回一个jQuery对象,以保证插件的可链式操作。
避免在插件内部使用$,而应该使用完整的jQuery。当然也可以用闭包的技巧来回避这个问题。
jQuery插件的机制:
jQuery提供了两个用于扩展jQuery功能的插件,即jQuery.fn.extend()方法和jQuery.extend()方法。
前者实现封装对象方法的插件,后者实现封住选择器插件和全局函数插件。
jQuery.extend()除了用于扩展jQuery对象之外,还可以扩展已经存在的object对象,所以经常被用于设置插件方法的一系列默认参数。如:
编写jQuery插件
封装jQuery对象方法的插件
那就举个表格隔行变色的例子
封装全局函数的插件
去除左空白字符和去除右空白字符的插件例子:
自定义选择器的插件
选择索引介于两个数中间的元素的选择器插件例子:
jQuery插件的类型:
封装对象方法的插件
大部分jQuery的插件都属于这种,对获取的jQuery对象进行操作
封装全局函数的插件
可以理解为$.ajax这种就是封装的全局函数
选择器插件
顾名思义,封装的选择器
jQuery插件的基本要点:
jQuery插件的文件名推荐为:jquery.[插件名].js,以免和其它js库插件混淆。
所有对象方法应该附加到jQuery.fn对象上,所有全局方法应该附加到jQuery对象本身上。
在插件内部,this指向的是当前获取的jQuery对象,而不是DOM元素
可以通过this.each来遍历所有元素
插件应该返回一个jQuery对象,以保证插件的可链式操作。
避免在插件内部使用$,而应该使用完整的jQuery。当然也可以用闭包的技巧来回避这个问题。
(function($){ //此处编写jQuery插件代码,这种闭包玩法就不在这里解释了,我前面的js基础系列写过了,不懂的请转到这个地址看看http://www.cnblogs.com/vvjiang/p/5143852.html。在此篇文章最后的部分就是。 })(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基础学习】07 jQuery表单插件-Form
- jQuery初学(一)——关于如何获取网页中的元素
- jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法
- jQuery键盘
- jQuery - 编写jQuery插件的基本形式(上)
- jquery中是否可见
- jQuery 之 $(this) 出了什么问题?
- jQuery.post( url, [data], [callback], [type] ) : 使用POST方式来进行异步请求
- jquery移除追加元素
- JQuery之回到顶部的特效
- jquery怎样循环获得一组id值
- Web 系统打印插件——jqprint
- [转]jquery.vTicker(垂直滚动)
- jqueryZtree
- 用jQuery编写轮播图插件
- jquery和js使用技巧
- jQuery UI 实例 - 拖动排序(Sortable)
- jQuery AjaxUpload 上传图片代码
- 用jQuery编写图片弹幕评论插件
- jQuery实现动态瀑布流布局效果