jQuery $.extend()用法总结


Posted in Javascript onJune 15, 2014

jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);

jQuery.extend(object);
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。这个应该很好理解吧。举个例子。

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<script type="text/javascript" src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
jQuery.fn.myPlugin = function(options) { 
$options = $.extend( { 
html: "no messages", 
css: { 
"color": "red", 
"font-size":"14px" 
}}, 
options); 
return $(this).css({ 
"color": $options.css.color, }).html($options.html); 
} 

$('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}}); 
</script> 
</body> 
</html> 
</span>

好的,上面你也看到了一点点$.extend()的用法。

1.合并多个对象。

这里使用的就是$.extend()的嵌套多个对象的功能。

所谓嵌套多个对象,有点类似于数组的合并的操作。

但是这里是对象。举例说明。

<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..) 
var Css1={size: "10px",style: "oblique"} 
var Css2={size: "12px",style: "oblique",weight: "bolder"} 
$.jQuery.extend(Css1,Css2) 
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性 
// Css1 = {size: "12px",style: "oblique",weight: "bolder"} 
</span>

2.深度嵌套对象。
<span style="font-size:18px;"> jQuery.extend( 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果: 
// => { name: “John”, last: “Resig”, location: { state: “MA” } } 
// 新的更深入的 .extend() 
jQuery.extend( true, 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果 
// => { name: “John”, last: “Resig”, 
// location: { city: “Boston”, state: “MA” } } 
</span>

3.可以给jQuery添加静态方法。
<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<script type="text/javascript" src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
$.extend({ 
add:function(a,b){return a+b;}, 
minus:function(a,b){return a-b}, 
multiply:function(a,b){return a*b;}, 
divide:function(a,b){return Math.floor(a/b);} 
}); var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7); 
console.log(sum); 
</script> 
</body> 
</html></span>
Javascript 相关文章推荐
Javascript Object.extend
May 18 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
vue实现简单图片上传
Jun 30 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 #Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 #Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 #Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 #Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 #Javascript
jquery实现倒计时代码分享
Jun 13 #Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 #Javascript
You might like
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
bootstrap table实例详解
2017/01/06 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python 正则表达式(转义问题)
2014/12/15 Python
python清除函数占用的内存方法
2018/06/25 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
PyQt5响应回车事件的方法
2019/06/25 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
儿科护士实习自我鉴定
2013/10/17 职场文书
护士实习自我鉴定
2013/10/22 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
会议开幕词
2015/01/28 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android