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

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程序设计有所帮助。