理解一下jQuery.extend()和jQuery.fn.extend()方法

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend() 方法有一个重载。
  jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用 jQuery.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子:
//扩展jQuery对象本身
        jQuery.extend({
            "minValue": function (a, b) {
                /// 比较两个值,返回最小值
                return a < b ? a : b;
            },
            "maxValue": function (a, b) {
                /// 比较两个值,返回最大值
                return a > b ? a : b;
            }
        });
        //调用
        var i = 100; j = 101;
        var min_v = $.minValue(i, j); // min_v 等于 100
        var max_v = $.maxValue(i, j); // max_v 等于 101
重载版本:jQuery.extend([deep], target, object1, [objectN])
   用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
   如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
   如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。
   未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。
参数
   deep:       可选。如果设为true,则递归合并。
   target:     待修改对象。
   object1:   待合并到第一个对象的对象。
   objectN:   可选。待合并到第一个对象的对象。
示例1:
合并 settings 和 options,修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }
示例2:
合并 defaults 和 options, 不修改 defaults。
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
这个重载的方法,我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。
jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
首先我们来看fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {.....};
};
原来 jQuery.fn = jQuery.prototype,也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我 们知道扩展原型上的方法,就相当于为对象添加”成员方法“,类的”成员方法“要类的对象才能调用,所以使用 jQuery.fn.extend(object)扩展的方法, jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一 定要区分开来。

对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

$.fn.extend({          
        alertWhileClick:function() {            
           $(this).click(function(){    
                alert($(this).val()); 
        });           
     }       
});      

$("#input1").alertWhileClick();

时间: 2024-11-09 01:10:29

理解一下jQuery.extend()和jQuery.fn.extend()方法的相关文章

$.extend(obj)和$.fn.extend(obj)的区别

$.extend(obj): 扩展jquery本身,添加方法: $.extend({ add:function(a,b){ return a+b; } }) $.add(5,8) //return 13 这里是直接调用,$.add(5,8);不加任何对象. $.fn.extend(obj): 对prototype进行扩展,为jquery类添加成员函数, jquery类的实例可以使用这个成员函数. $.fn.extend({ clickwhile:function(){ $(this).click

jQuery.fn.extend() 与 jQuery.extend()

bootstrap form-group和form-control 如何行内布局,如何水平布局. jQuery.fn如何扩展. jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类本身: $.fn.extend(object);扩展jQuery对象: 一.$.fn $.fn 等于 $.prototype:这样就好理解了,就好比对String.porotype增加一个函数,然后所有

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

jQuery.fn jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//-. //-- }; 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦. 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1″) 会生成一个 jQuery类的实例. jQuery.ext

JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)

理解$.extend(),与$.fn.extend()方法区别 1.$.extend()方法 $.extend()方法在JQuery中有两个用法,第一次是扩展方法, 第二个方法是 jQuery.extend([deep], target, object1, [objectN]) 返回值:Object 把2个对象合并得到新的target,deep是可选的(递归合并) 合并 settings 和 options,修改并返回 settings. jQuery 代码: var settings = {

jquery插件之jquery.extend和jquery.fn.extend的区别

jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

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

jQuery extend扩展开发: 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 = $.minus(3,2); 2

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: function( selector, cont

jquery.fn.extend与jquery.extend用法与区别

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

jQuery.extend和jQuery.fn.extend的区别

我们先把jQuery看成了一个类,这样好理解一些. jQuery.extend(),是扩展的jQuery这个类. 假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能.这样的话,不论是男人,女人,xx人.....等能继承这个技能(方法)了. 可以如下图这样写着: 然后:$.liu();这样就能打印出来”liu“这个字符串 代码在下面: 这说明啥啊,这说明.liu()变成了jQuery这个类本身的方法(object)