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 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
WebPack工具运行原理及入门教程
Dec 02 Javascript
Node.js实现断点续传
Jun 23 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输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
js格式化时间的方法
2015/12/18 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
基于JavaScript实现随机点名器
2021/02/25 Javascript
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
python opencv实现图像边缘检测
2019/04/29 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
销售心得体会
2014/01/02 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
爱心募捐感谢信
2015/01/22 职场文书
少先队工作总结2015
2015/05/13 职场文书
电影建党伟业观后感
2015/06/01 职场文书
鸦片战争观后感
2015/06/09 职场文书
讲座新闻稿
2015/07/18 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python