jquery的$.extend和$.fn.extend作用及区别,兼它们的一些小细节

$.extend(obj);是为了扩展jquery本身,为类添加新的方法
   $.fn.extend(obj);给JQUERY对象添加方法。
如(1):

   $.extend({

        add:function(a,b){

            return a+b;
        }

    })

    $.add(5,8) //return  13

注意没有,这边的调用直接调用,前面不用任何对象。直接$.+方法名

(2):

$.fn.extend({

    clickwhile:function(){

        $(this).click(function(){

             alert($(this).val()) 

        })

    }

})

$(‘input‘).clickwhile();//当点击输入框会弹出该对象的Value值

注意调用时候前面是有对象的。即$(‘input‘) 这么个东西。

前面介绍了它们的本质区别,现在具体介绍一下它们分别的细节
其实$.extend()有两种写法
(1)$.extend(obj);
        这是只有一个参数,代表的意义是:为jQuery类添加类方法,可以理解为添加静态方法,也就是全局方法。
(2)$.extend( target, object1,  object2,  object3,  object4,[objectN]);
        这是两个或两个以上的参数,代表的意义是:用一个或多个其他对象来扩展一个对象,返回被扩展的对象。即也就是扩展和覆盖了第一个对象。

(function ($) {
            var aaa={name:‘1‘,age:‘20‘,sex:‘NV‘};
            var bbb={name:‘2‘,age:‘18‘};
            var ccc = $.extend( aaa, bbb);
            alert(ccc.sex);//NV
            alert(aaa.name);//2
        })(jQuery);

不知大家见过 $.extend({}, aaa, bbb)中带{}吗?请看下面

(function ($) {
            var aaa={name:‘1‘,age:‘20‘,sex:‘NV‘};
            var bbb={name:‘2‘,age:‘18‘};
            var ccc = $.extend({}, aaa, bbb);
            alert(ccc.sex);//NV
            alert(aaa.name);//1
        })(jQuery);

为何alert(aaa.name)的结果不同?如果你知道就不用往下看了
      这是因为:多个对象参数合并时,会破坏第一个对象的结构,所以可传递一个空对象作为第一个参数

$.fn.extend(obj);
     $.fn 中的fn是什么意思?
    其实是prototype,即$.fn=$.protoytpe;
   如果你知道原型就会立即明白他的意思

时间: 2024-08-08 09:40:52

jquery的$.extend和$.fn.extend作用及区别,兼它们的一些小细节的相关文章

JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)

理解$.extend(),与$.fn.extend()方法区别 1.$.extend()方法 $.extend()方法在JQuery中有两个用法,第一次是扩展方法, 第二个方法是 jQuery.extend([deep], target, object1, [objectN]) 返回值:Object 把2个对象合并得到新的target,deep是可选的(递归合并) 合并 settings 和 options,修改并返回 settings. jQuery 代码: var settings = {

jQuery中 $.extend 和 $.fn.extend 解释

$.extend() (1)第一种:拓展jQuery的全局(静态)函数的 方式:--->一个参数 例如: $.extend({ add : function(){ alert("1"); }, miu : function(){ alert("2"); } }) //此方式在jQuery对象本身:可以通过 jQuery.add(), jQuery.miu() 直接调用: (2)第二种:对象合并,即可以实现某个函数的重载:--->多个参数 例如: var

$.extend()和$.fn.extend()函数用法简单介绍

$.extend()和$.fn.extend()函数用法简单介绍:标题中的两个方法在jQuery插件开发中非常的重要,下面通过简单的代码实例介绍一下它们的用法.本章节不会介绍它的原理,而是只给出它们的作用是什么,能够做什么事情.jQuery.extend()可以为jQuery类添加新的方法,类似于c#或者java中的静态方法.jQuery.fn.extend()可以为jQuery的对象实例添加新的方法.代码实例: <!DOCTYPE html> <html> <head>

$.extend()和$.fn.extend()区别

$.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区别是巨大的,下面就简单介绍一下它们的区别是什么. 在javascript中,没有尽管没有类这个概念,但是作为一门面向对象的语言,其实是有着类似于类的实际应用,那么从标准面向对象的概念来说,jQuery就是一个封装好了的jQuery类,那么通过选择器获得的就是jQuery对象实例. 一.$.exten

插件的理解$.extend()与$.fn.extend()

插件的理解.$.extend()与$.fn.extend()    插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.extend()扩展jquery元素集来提供新的方法.    1.类级别的插件开发        1.(function($){                $.extend({                    hello:function(){alert("hello world");}

js插件 $.extend()与$.fn.extend() 基础

插件的理解.$.extend()与$.fn.extend()    插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.extend()扩展jquery元素集来提供新的方法.    1.类级别的插件开发        1.(function($){                $.extend({                    hello:function(){alert("hello world");}

$.extend(),与$.fn.extend() 讲解

$.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0010187y1.html     jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发

jquery的$.extend和$.fn.extend作用及区别

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例. jQuery.extend(object); 为jQuery类添加类方法,可以理解为添加静态方法.如: jQuery.extend({ min: function(a, b)

jquery的$.extend和$.fn.extend作用及区别.txt

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); (1)类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例. jQuery.extend(object); 为jQuery类添加类方