jQuery.fn.extend()和jQuery.extend()
jQuery.fn.extend( object )
一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。
jQuery.fn.extend()
方法继承了jQuery原型($.fn
)对象,以提供jQuery原型新的方法,可以链式调用jQuery()
函数。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.fn.extend demo</title> <style> label { display: block; margin: .5em; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <label><input type="checkbox" name="foo"> Foo</label> <label><input type="checkbox" name="bar"> Bar</label> <script> jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); // Use the newly created .check() method $( "input[type='checkbox']" ).check(); </script> </body> </html>
/* * 移动端点击事件,防滑 * $(dom).tap([cssRule|callback],callback) * */ $.fn.tap = function(){ var a = arguments; var isScroll = false; $(this).on("touchstart",function(){ isScroll = false; }); $(this).on("touchmove",function(){ isScroll = true; }); $(this).on("touchend",function(event){ if(isScroll)return; if(typeof a[0] == "function"){ a[0](); }else{ var current = event.target; while(current!= document){ if(current.matches(a[0])){ a[1].call(current); break; } current = current.parentNode; } } }); };
jQuery.extend()
jQuery.extend( [deep]target [, object1 ] [, objectN ] )
将两个或更多对象的内容合并到第一个对象。
如果只有一个参数提供给$.extend()
,这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
请记住,目标对象(第一个参数)将被修改,并且将通过$.extend()
返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:
var object = $.extend({}, object1, object2);
在默认情况下,通过$.extend()
合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值,就可以了解这一点。然而,如果将 true
作为该函数的第一个参数,那么会在对象上进行递归的合并。
警告:不支持第一个参数传递 false
。
未定义的属性不会被复制。然而,从对象原型的继承属性将被复制。如果属性(Properties)是一个通过构造函数new MyCustomObject(args)
定义的,或JavaScript中内置类型,如Date 或 RegExp,是不会重新创建的,并且将被当作普通的对象出在返回的对象或数组中。
若设置了 deep
参数,对象和数组也会被合并进来,但是对象包裹的原始类型,比如String, Boolean, 和 Number是不会被合并进来的。
若要满足其它不同于该行为的需求,编写自定义的扩展方法代替。
<html> <head> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <div id="log"></div> <script> var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97 }; var object2 = { banana: {price: 200}, durian: 100 }; /* merge object2 into object1 */ $.extend(object1, object2); var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) { var arr = []; $.each(obj, function(key, val) { var next = key + ": "; next += $.isPlainObject(val) ? printObj(val) : val; arr.push( next ); }); return "{ " + arr.join(", ") + " }"; }; $("#log").append( printObj(object1) ); </script> </body> </html>
<html> <head> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <div id="log"></div> <script> var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97 }; var object2 = { banana: {price: 200}, durian: 100 }; /* merge object2 into object1, recursively */ $.extend(true, object1, object2); var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) { var arr = []; $.each(obj, function(key, val) { var next = key + ": "; next += $.isPlainObject(val) ? printObj(val) : val; arr.push( next ); }); return "{ " + arr.join(", ") + " }"; }; $("#log").append( printObj(object1) ); </script> </body> </html>