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 相关文章推荐
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
JavaScript 数组详解
2013/10/10 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python translator使用实例
2008/09/06 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
在校实习生求职信
2014/06/18 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
员工年度工作总结2015
2015/05/18 职场文书