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温习的一些笔记 基础常用知识小结
Jun 22 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
详解a++和++a的区别
2017/08/30 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python中的 enum 模块源码详析
2019/01/09 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python实现同一局域网下传输图片
2020/03/20 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
简历里的自我评价
2014/01/31 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
处级干部考察材料
2014/12/24 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS