博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery $.extend()用法总结
阅读量:5264 次
发布时间:2019-06-14

本文共 1838 字,大约阅读时间需要 6 分钟。

jQuery为开发插件提拱了两个方法,分别是: 

 

jQuery.fn.extend(object); 

jQuery.extend(object); 

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 
jQuery.fn.extend(object);给jQuery对象添加方法。

举个例子

[html]   
 
  1. <h3 class="ye">new soul</h3>   
  2. <h3 class="ye">new soul</h3>   
  3. <h3 class="ye">new soul</h3>   
  4. <h3 class="ye">new soul</h3>   
  5. <script type="text/javascript" src="jquery.2.0.3.js"></script>   
  6. <script type="text/javascript">   
  7. jQuery.fn.myPlugin = function(options) {   
  8. $options = $.extend( {   
  9. html: "no messages",   
  10. css: {   
  11. "color": "red",   
  12. "font-size":"14px"   
  13. }},   
  14. options);   
  15. return $(this).css({   
  16. "color": $options.css.color,   
  17.   
  18. }).html($options.html);   
  19. }   
  20. $('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}});  

好的,上面你也看到了一点点$.extend()的用法。 

1.合并多个对象。 
这里使用的就是$.extend()的嵌套多个对象的功能。 
所谓嵌套多个对象,有点类似于数组的合并的操作。 
但是这里是对象。举例说明:

[javascript]   
 
  1. //用法: jQuery.extend(obj1,obj2,obj3,..)   
  2. var Css1={size: "10px",style: "oblique"}   
  3. var Css2={size: "12px",style: "oblique",weight: "bolder"}   
  4. $.jQuery.extend(Css1,Css2)   
  5. //结果:Css1的size属性被覆盖,而且继承了Css2的weight属性   
  6. // Css1 = {size: "12px",style: "oblique",weight: "bolder"}   

 

2.深度嵌套对象。

[javascript]   
 
  1.  jQuery.extend(   
  2. { name: “John”, location: { city: “Boston” } },   
  3. { last: “Resig”, location: { state: “MA” } }   
  4. );   
  5. // 结果:   
  6. // => { name: “John”, last: “Resig”, location: { state: “MA” } }   
[javascript]   
 
  1. // 新的更深入的 .extend()   
  2. jQuery.extend( true,   
  3. { name: “John”, location: { city: “Boston” } },   
  4. { last: “Resig”, location: { state: “MA” } }   
  5. );   
  6. // 结果   
  7. // => { name: “John”, last: “Resig”,   
  8. // location: { city: “Boston”, state: “MA” } }   

3.可以给jQuery添加静态方法

[javascript]   
 
    1. $.extend({   
    2. add:function(a,b){
      return a+b;},   
    3. minus:function(a,b){
      return a-b},   
    4. multiply:function(a,b){
      return a*b;},   
    5. divide:function(a,b){
      return Math.floor(a/b);}   
    6. });   
    7. var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7);   
    8. console.log(sum);   

转载于:https://www.cnblogs.com/yy1234/p/9099833.html

你可能感兴趣的文章
源代码的下载和编译读后感
查看>>
Kafka学习笔记
查看>>
Octotree Chrome安装与使用方法
查看>>
Windows 环境下基于 Redis 的 Celery 任务调度模块的实现
查看>>
趣谈Java变量的可见性问题
查看>>
C# 强制关闭当前程序进程(完全Kill掉不留痕迹)
查看>>
ssm框架之将数据库的数据导入导出为excel文件
查看>>
语音识别中的MFCC的提取原理和MATLAB实现
查看>>
验证组件FluentValidation的使用示例
查看>>
0320-学习进度条
查看>>
解决windows系统的oracle数据库不能启动ora-00119和ora-00130的问题
查看>>
ip相关问题解答
查看>>
MetaWeblog API Test
查看>>
反弹SHELL
查看>>
关闭Chrome浏览器的自动更新和升级提示
查看>>
移动、尺寸改变
查看>>
poj2255Tree Recovery【二叉树重构】
查看>>
tcpcopy 流量复制工具
查看>>
vue和react的区别
查看>>
第十一次作业
查看>>