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 二分法(数组array)
Apr 24 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
vue.js开发环境搭建教程
May 04 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
小程序自定义模板实现吸顶功能
Jan 08 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分页示例代码
2007/03/19 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
教学质量评估实施方案
2014/03/17 职场文书
校车安全责任书
2014/08/25 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
家庭贫困证明
2014/09/23 职场文书
2014年幼师工作总结
2014/11/22 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
改造DE1103三步曲
2022/04/07 无线电