$.fn.extend详解

最新推荐文章于 2021-10-07 17:57:36 发布

原创最新推荐文章于 2021-10-07 17:57:36 发布 · 644 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#扩展 #jquery

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文详细解释了jQuery中$.extend()和$.fn.extend()的区别及用法，包括如何扩展全局对象、实例对象以及命名空间，并通过示例演示了如何使用这些函数进行对象合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看别人的js代码，看到$.fn.extend，不懂事啥意思，百度学习了下。这里做个小总结。

首先， $.extend和$ .fn.extend都是用来扩展jQuery的。区别是 $.extend扩展的是JQuery的全局对象，$ .fn.extend扩展的是JQuery的实例对象。

Demo说话，

//扩展到全局Jquery对象
    $.extend({
        hello:function(){
            alert("hello");
        }
    });

//扩展到Jquery实例对象
    $.fn.extend({
        hello1:function(){
            alert("hello-$.fn.extends");
        }
    });

//扩展到命名空间my

$.extend({my:{
    hello2:function(){
        alert("hello-扩展到命名空间my");
    }
}});


 $.hello();//全局对象调用
 $('#showOrder').hello1();//实例对象调用
 $.my.hello2();//通过命名空间调用

另外，补充。$.extend(result,item1,item2)，将item1和item2合并到result中，会破坏result结构。

                  var result = $.extend({},item1,item2)，将item1和item2合并后的结果赋给result。

                  var result = $.extend(true,item1,item2)，深拷贝item2结果到item1中，子项相同属性覆盖，不同属性合并。

                  var result = $.extend(false,item1,item2)，浅拷贝item2到item1中，子项相同则完全覆盖。


         var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};

         var item1={sex:”girl”,address{city:”北京”}};

         var result=$.extend(true,item,item1);

         var result1=$.extend(false,item,item1);

         结果：

         Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

         Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};