jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

本文实例讲述了jQuery.extend 与 jQuery.fn.extend的用法及区别。分享给大家供大家参考，具体如下：

jQuery是一个JavaScript类，如$("#input1") 生成一个 jQuery类的实例。

jQuery为开发插件提拱了两个方法：jQuery.fn.extend()和jQuery.extend()。

1、jQuery.extend()

(1)扩展 jQuery 类本身，为jQuery类添加类方法（静态方法）

rush:js;"> jQuery.extend({ 　　add: function(a,b) { alert(a + b); } }); jQuery.add(10,20); //30

(2)jQuery.extend(object,object1,[objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象

rush:js;"> var obj = { name: 'Alice',age: 25,career: "teacher" }; var object = { name: 'Bruce',career: "doctor" }; jQuery.extend(obj,object); //obj = { name: 'Bruce',career: "doctor" }

2、jQuery.fn.extend()

把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法。

查看jQuery源码可发现，jQuery.fn = jQuery.prototype。jQuery.fn挂在原型上，由于对原型的修改会影响所有实例，因此fn上的方法会对每一个jQuery实例有效。

对jQuery.fn的扩展，就是为jQuery类添加成员函数，jQuery类的实例可以使用这个成员函数。

rush:js;"> jQuery.fn.extend({ clickFunc: function() { $(this).click(function(){ alert($(this).val()); }); } }); $("#input1").clickFunc(); //输出文本框的文本

3、jQuery.extend()与 jQuery.fn.extend()的区别

jQuery.extend()是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用（直接使用 $.xxx 调用）；

jQuery.fn.extend()是为jQuery类添加成员函数（实例方法），所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

原文地址：https://www.jb51.cc/jquery/31360.html