jQuery.extend()、jQuery.fn.extend()扩展方法示例详解


Posted in Javascript onMay 08, 2014

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法.

例如:

jQuery.extend({ 
showName : function(name){ 
alert(name) 
} 
}); 
jQuery.showName("深蓝");

jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象.
例如:
var a = { 
name : "blue", 
pass : 123 
} 
var b = { 
name : "red", 
pass : 456, 
age : 1 
} 
var c = jQuery.extend({},a,b);

c拥有a,b对象的属性,由于,b对象在a对象之后,其name属性优先在c对象里.

jQuery.extend()方法为插件传递系列选项,包括默认值.

function fn(options){ 
var options = jQuery.extend({ //默认参数选项列表 
name1 : value1, 
name2 : value2, 
name3 : value3 
},options); //使用函数的参数覆盖或合并到默认参数选项列表中 
//函数体 
} 
fn({ name1 : value3, name2 : value2 , name3 : value1 });//使用新值 
fn({ name4 : value3, name5 : value2 });//在默认上添加新选项 
fn(); //保持默认选项值

当在调用该方法时,传递新的参数值,就会覆盖掉默认的参数选项值,否则,使用默认参数值.

使用JQuery.fn对象创建JQuery对象方法

可以通过jQuery.fn对象来添加属性和方法,实际上jQuery.fn对象就是挂接在jQuery.prototype上的,jQuery把它简写了.

fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = { 
 init: function( selector, context ) {//....  

 //...... 
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

例如:

jQuery.fn.test = function(){ 
alert("这是jQuery对象方法!"); 
} 
jQuery("div").click(function(){ 
$(this).test(); //在当前的jQuery对象上调用test()方法 
});

我们可以调用jQuery.fn.extend()方法来创建jQuery对象方法.
jQuery.fn.extend({ 
test : function(){ 
return this.each(function(){ 
alert(this.nodeName) 
}); 
} 
}); 
jQuery("body *").click(function(){ 
$(this).test(); //调用jQuery对象方法 
});

一句话:jQuery.extend是对JQuery类的自定义扩展,jQuery.fn.extend是对JQuery对象的自定义扩展.
Javascript 相关文章推荐
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 #Javascript
setInterval计时器不准的问题解决方法
May 08 #Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 #Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 #Javascript
js 设置缓存及获取设置的缓存
May 08 #Javascript
javascript实现的一个带下拉框功能的文本框
May 08 #Javascript
javascript解析json数据的3种方式
May 08 #Javascript
You might like
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
一篇不错的Python入门教程
2007/02/08 Python
跟老齐学Python之用while来循环
2014/10/02 Python
Python中获取对象信息的方法
2015/04/27 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
深入理解Python3中的http.client模块
2017/03/29 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
详解小白之KMP算法及python实现
2019/04/04 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
档案管理员岗位职责
2013/12/01 职场文书
厨师长岗位职责
2014/03/02 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL