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移动div层-javascript 拖动层
Mar 22 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
实测jquery data()如何存值
Aug 18 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
React自定义hook的方法
Jun 25 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初始化对象和析构函数的简单实例
2014/03/11 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
js module大战
2019/04/19 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Python ftp上传文件
2016/02/13 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
virtualenv介绍及简明教程
2020/06/23 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
单位单身证明范本
2014/01/11 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
保密协议书范本
2014/04/22 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
企业2014年度工作总结
2014/12/10 职场文书
导游词300字
2015/02/13 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书