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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
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框架codeigniter中如何使用框架的session
2013/06/24 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python查询mysql中文乱码问题
2014/11/09 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
set在python里的含义和用法
2019/06/24 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
工作会议主持词
2014/03/17 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
运动会开幕式致辞
2015/07/29 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript