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类添加类方法（静态方法）

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

(2)

jQuery.extend(object, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

var obj = { name: 'Alice', age: 25, career: "teacher" };
var object = { name: 'Bruce', career: "doctor" };
jQuery.extend(obj, object); //obj = { name: 'Bruce', age: 25, 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类的实例可以使用这个成员函数。

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扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

• jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
• 开发插件的两个方法jquery.fn.extend与jquery.extend
• 浅谈jquery.fn.extend与jquery.extend区别
• jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
• jQuery插件开发的两种方法及$.fn.extend的详解
• jquery的extend和fn.extend的使用说明
• jQuery中extend()和fn.extend()方法详解
• Jquery实现$.fn.extend和$.extend函数
• jquery简单插件制作(fn.extend)完整实例
• 深入理解jquery的$.extend()、$.fn和$.fn.extend()