jQuery插件开发的两种方法及$.fn.extend的详解


Posted in Javascript onJanuary 16, 2014

jQuery插件开发分为两种:

1 类级别

类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。

开发扩展其方法时使用$.extend方法,即jQuery.extend(object);

$.extend({ add:function(a,b){return a+b;} , 
minus:function(a,b){return a-b;} 
});

页面中调用:
var i = $.add(3,2); 
var j = $.minus(3,2);

2 对象级别

对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了。

开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object);

$.fn.extend({ check:function(){ 
return this.each({ 
this.checked=true; 
}); 
}, 
uncheck:function(){ 
return this.each({ 
this.checked=false; 
}); 
} 
});

页面中调用:
$('input[type=checkbox]').check(); 
$('input[type=checkbox]').uncheck();

3、扩展
$.xy = { 
add:function(a,b){return a+b;} , 
minus:function(a,b){return a-b;}, 
voidMethod:function(){ alert("void"); } 
}; 
var i = $.xy.add(3,2); 
var m = $.xy.minus(3,2); 
$.xy.voidMethod();
Javascript 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
js查找某元素中的所有图片地址的方法
Jan 16 #Javascript
jQuery - css() 方法示例详解
Jan 16 #Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 #Javascript
jquery对元素拖动排序示例
Jan 16 #Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 #Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 #Javascript
js获取某元素的class里面的css属性值代码
Jan 16 #Javascript
You might like
apache中为php 设置虚拟目录
2014/12/17 PHP
php实现的农历算法实例
2015/08/11 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
js数字转换为float,取N位小数
2014/02/08 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
图解javascript作用域链
2019/05/27 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
浅析Python中else语句块的使用技巧
2016/06/16 Python
对python中return和print的一些理解
2017/08/18 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
2014年单位植树节活动方案
2014/03/23 职场文书
小班下学期评语
2014/05/04 职场文书
会计求职自荐信
2014/06/20 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS