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入门教程(11) js事件处理
Jan 31 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
javascript实现日期按月份加减
May 15 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 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 变量类型的强制转换
2009/10/23 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
浅析JavaScript动画
2015/06/10 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
小程序自定义日历效果
2018/12/29 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
跟老齐学Python之dict()的操作方法
2014/09/24 Python
python继承和抽象类的实现方法
2015/01/14 Python
Python中DJANGO简单测试实例
2015/05/11 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
详解Python中的Lock和Rlock
2021/01/26 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
春季运动会广播稿大全
2014/02/19 职场文书
民政局未婚证明
2015/06/15 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python