$.extend()和$.fn.extend()详解

前几天被问到:

“自己对 jQuery 了解吗?”

答:

“还算可以吧。”

问:

“那你讲一下 $.extend()$.fn.extend() 的区别???”

*当时就有点蒙了,感觉自己写 jQuery 的时候用过 $.extend() 方法,就是用来包裹jQuery的全局对象,但是它与$.fn.extend()有什么区别?各有什么作用???

弱弱的回答:*

“自己不了解。。。”

后来自己在网上搜了搜资料看看他们的区别,自己总结了下分享出来:

  • $.extend():
    此方法是用来扩展 jQuery 类,它所方法是全局性,直接用 jQuery 类即可引用,例如:
    1
    2
    3
    $.extend({minValue:function(a,b){return
    a<b?a:b;}})
    $.minValue(5.6);

一般也可以把这类函数称作为工具函数,它们不直接操作DOM元素,而是操作Javascript的非元素对象,或者执行其他非对象的特定操作。

  • $.fn.extend():
    此方法则是用来扩展 jQuery 的实例方法,也就是说 jQuery 类的实例对象可以调用此函数,代码如下:
    1
    2
    3
    4
    5
    6
    $.fn.extend({
    theAlert:function(){
    alert("自定义的函数");
    }
    })
    $("thediv").theAlert()

以上代码通过 $.fn.extend() 方法为 jQuery 扩展一个实例方法,那么就必须要用对象实例来调用此方法,$(“thediv”)就是一个对象实例,这样它就可以调用添加的方法,当然在实际的开发中,几乎不可能有这么简单的例子,这里只是讲述一下原理。