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

赞 (0)

相关推荐

  • jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 复制代码 代码如下: var i = $.add(3,2); var j

  • 深入理解jquery的$.extend()、$.fn和$.fn.extend()

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype = {init: function( selector, context ) {//-.//--}; 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦. 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. jQuery便是一

  • Jquery实现$.fn.extend和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的节点对象扩展方法,是基于$的原型扩展的方法 $.extend是扩展常规方法,是$的静态方法. 我们之前写的代码看一下: (function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(sel

  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码 代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用

  • 浅谈jquery.fn.extend与jquery.extend区别

    1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加一个为 add的"静态方法",之后便可以在引入 jQuery 的地方,使用这个方法了. 2.jQuery.fn.extend(object); 对jQuer

  • jquery的extend和fn.extend的使用说明

    jQuery为开发插件提拱了两个方法,分别是: 复制代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. 复制代码 代码如下: jQuery.fn = jQuery.prototype = { init: fu

  • 开发插件的两个方法jquery.fn.extend与jquery.extend

    jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 复制代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. JavaScript代码 复制代码 代码如下: jQuery.fn = jQu

  • jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn上添加新的属性和方法,jQuery的其他模块大都是这么实现的. 给jQuery添加扩展时用$.extend()如:jQuery.extend({add:function(a,b){return a+b}}) 使用:$.add(1,3)=====>4; 给jQuery实例对象添加扩展时用$.fn.extend(); $.fn.extend({gys:function(){$(

  • jquery简单插件制作(fn.extend)完整实例

    本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu

  • jQuery中extend()和fn.extend()方法详解

    这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>   

随机推荐