$.extend() 与 $.fn.extend()

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend();

jQuery.extend();

一、jQuery.extend( [deep ], target, object1 [, objectN ] )

将两个或更多对象的内容合并到第一个对象。
deep, 类型: Boolean, 如果是true,合并成为递归(又叫做深拷贝)。
target, 类型: Object, 对象扩展。这将接收新的属性。
object1, 类型: Object, 一个对象,它包含额外的属性合并到第一个参数.
objectN, 类型: Object, 包含额外的属性合并到第一个参数.

当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。

如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

请记住,目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:

var object = $.extend({}, object1, object2);```
jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
});

jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

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

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" }

对于对象中包含对象的情况 , 通过$.extend()合并操作不是递归的; 如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而,如果将 true 作为该函数的第一个参数,那么会在对象上进行递归的合并。

var object1 = {
    apple: 0,
    banana: { weight: 52, price: 100},
    cherry: 97
};

var object2 = {
    banana: { price: 200 }
};

//加true
object1 = $.extend(true, object1, object2);
console.log(object1); 
//Object {apple: 0, banana: {price: 200, weight: 52}, cherry: 97}

//不加true
object1 = $.extend(object1, object2);
console.log(object1); 
//Object {apple: 0, banana: {price: 200}, cherry: 97}

二、jQuery.fn.extend(object);

看下jQuery中的源码:

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {
   }
};

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

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

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

$(“#input1”) 为一个jQuery实例对象,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值