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 相关文章推荐
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
详解vue高级特性
Jun 09 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
学习使用curl采集curl使用方法
2012/01/11 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
一个网马的tips实现分析
2010/11/28 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Django实现快速分页的方法实例
2017/10/22 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
遗传算法python版
2018/03/19 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
django模板结构优化的方法
2019/02/28 Python
python Django的web开发实例(入门)
2019/07/31 Python
浅析python redis的连接及相关操作
2019/11/07 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
反邪教警示教育方案
2014/05/13 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
商超业务员岗位职责
2015/02/13 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
电影复兴之路观后感
2015/06/02 职场文书
《法国号》教学反思
2016/02/22 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
Nginx HTTP跳转至HTTPS
2022/05/15 Servers