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 实现的点击复制代码
Mar 24 Javascript
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
jQuery功能函数详解
Feb 01 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
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
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python3中str(字符串)的使用教程
2017/03/23 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
使用Python实现批量ping操作方法
2020/05/06 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
期末总结的个人自我评价
2013/11/02 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
十八大感想感言
2014/02/10 职场文书
讲座通知范文
2015/04/23 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书