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 delete 引用类型对象
Nov 01 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 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
实用函数7
2007/11/08 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
python实现简单的TCP代理服务器
2014/10/08 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
利用python实现汉诺塔游戏
2021/03/01 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
机电专业个人自荐信格式模板
2013/09/23 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
《母鸡》教学反思
2014/02/25 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
公司离职证明标准样本
2014/10/05 职场文书
无罪辩护词范文
2015/05/21 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python