jQuery為開發插件提拱了兩個方法，分別是：
jQuery.fn.extend(object);

jQuery.extend(object);
jQuery.extend(object);為擴展jQuery類本身.為類添加新的方法。
jQuery.fn.extend(object);給jQuery對象添加方法。這個應該很好理解吧。舉個例子。

1.合并多個對象。
這里使用的就是$.extend()的嵌套多個對象的功能。
所謂嵌套多個對象，有點類似于數組的合并的操作。

<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..) var Css1={size: "10px",style: "oblique"} var Css2={size: "12px",style: "oblique",weight: "bolder"} $.jQuery.extend(Css1,Css2) //結果:Css1的size屬性被覆蓋,而且繼承了Css2的weight屬性 // Css1 = {size: "12px",style: "oblique",weight: "bolder"} </span>

2、深度復制

1. <script type="text/javascript" src="jquery-extend.js"></script> 2. <script> 3. obj1 = { a : 'a', b : 'b' }; 4. obj2 = { x : { xxx : 'xxx', yyy : 'yyy' }, y : 'y' }; 5. $.extend(true, obj1, obj2); 6. alert(obj1.x.xxx); // 得到"xxx" 7. obj2.x.xxx = 'zzz'; 8. alert(obj2.x.xxx); // 得到"zzz" 9. alert(obj1.x.xxx); // 得到"xxx" 10.</script>

$.extend(true, obj1, obj2)表示以obj2中的屬性擴展對象obj1，第一個參數設為true表示深復制。

雖然obj1中原來沒有"x"屬性，但經過擴展后，obj1不但具有了"x"屬性，而且對obj2中的"x"屬性的修改也不會影響到obj1中"x"屬性的值，這就是所謂的“深復制”了。

3.可以給jQuery添加靜態方法。

（可以看下我之前的彈窗方法）

$.fn.mPop = function() {$("body").css("position", "relative");var sctop = top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();var winW = $(window).width();var winH = $(window).height();var tcH = $(document).height();var w = $(this).innerWidth();var h = $(this).innerHeight();$(this).css({"height":winH});$(".lottery_popup_bg").css({"height":winH});$(".tips_popup").css({"height":"auto"});$(this).css({"left": (winW - w) / 2 + "px","z-index": "30"});var bgdiv = "<div class='bgdiv'></div>";$("body").append(bgdiv);if (h > winH) {$(this).css({"display": "block","top": "0px"})} else {$(this).css("display", "block").css({top: ((winH - h) / 2 + sctop) + "px"});}$(".bgdiv").css({"width": winW + "px","height": tcH + "px","opacity": 0.8,"position": "absolute","left": "0","top": "0","z-index": 20,"background-color": "#000","display": "block"});}

使用此方法是可以$("xx").mPop();

類似jq中click（）。

jq中將extend作為擴展模塊的方法使用，在原生js中我們也可以使用。這是我們是為了將兩個構造函數結合在一起。

<script>/*把父對象的所有屬性，直接復制到自己身上*/function Cat(leg, tail) {this.leg = leg;this.tail = tail;this.climb = function() {alert("i can climb!");};};function Tiger(leg, tail, color) {this.leg = leg;this.color = color;this.extend = function(parent){ //復制繼承。父對象的屬性復制到他自身。原型鏈繼承影響下游所有對象，復制繼承不影響下游（jq復制繼承）for(var key in parent){//console.log(key);this[key] = parent[key];//循環復制添加給Tiger的this屬性 };};};var tiger = new Tiger(5,1,"#f00");console.log(tiger.leg);//5 tiger.extend(new Cat(4,1));//重新賦值tiger.climb();//i can climb!console.log(tiger.leg);//4</script>

?

轉載于:https://www.cnblogs.com/BATAKK/p/5736016.html

總結

以上是生活随笔為你收集整理的jQuery extend方法介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。