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 相关文章推荐
js验证表单大全
Nov 25 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JS Attribute属性操作详解
May 19 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
解决自定义$(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 各种应用乱码问题的解决方法
2010/05/09 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
django 创建过滤器的实例详解
2017/08/14 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
python实现五子棋人机对战游戏
2020/03/25 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
暑期实践思想汇报
2014/01/06 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
毕业设计说明书
2014/05/07 职场文书
主题党日活动总结
2014/07/08 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python