jQuery的extend的用法

2021-08-02 00:22:57 字數 2604 閱讀 8050

jquery 的 api 手冊中,extend 方法掛載在 jquery 和 jquery.fn 兩個不同的物件上,但在 jquery 內部**實現的是相同的,只是功能各不相同。

先看看官方給出的解釋:

雖然官方對 jquery.extend 的擴充套件方法功能隻字未提,但是它也同樣具有擴充套件 jquery 類方法 的功能。

首先,我先來介紹一下 extend 函式在 合併物件 方面的用法。

jquery

.extend(target

[, object1]

[, objectn])

合併 object1 ... objectn 到 target 物件,如果只有乙個引數,則該 target 物件會被合併到 jquery 物件中。

var obj1 = 

var obj2 =

$.extend(obj1, obj2); //

obj1 //

obj2 //

上述**展示的是將 obj2 物件合併到 obj1 物件中,這種方法會 改變 obj1 物件的結構。如果你 不想改變 合併目標物件的結構,你可以這麼做。

var obj1 = 

var obj2 =

$.extend({}, obj1, obj2); //

obj1 //

obj2 //

jquery

.extend([deep], target, object1

[, objectn])

和上面的講述的不同的是,該方法多了乙個型別為 boolean 的 [deep] 傳參,當其為 true 時,將 object1 , objectn 深度複製 後合併到 target 中。

首先,我們理解一下什麼叫做 深度複製 。看看其和 淺度複製 有什麼區別。

var obj1 = 

}var obj2 =

}$.extend(false, {}, obj1, obj2); // }

$.extend(true, {}, obj1, obj2); // }

由此可見,執行 深度複製 會遞迴遍歷每個物件中含有複雜物件(如:陣列、函式、json物件等)的屬性值進行複製,而且 淺度複製便不會這麼做。

上述的 extend 方法中的 target 引數是可以省略的。如果省略了,則該方法就只能傳入乙個 object 引數,該方法功能是將該 object 合併到呼叫 extend 方法的物件中。

我們通常會使用這種方式來對 jquer進行一些方法上的擴充套件。

jqurey 提供了兩種方法擴張方式,分別為jquery.fn.extend(object)jquery.extend(object).

想要搞清楚兩種擴充套件方式之間的區別的話,先要了解什麼是jquery.fn.

本猿參考了 jquery 的原始碼,發現其中玄機:

jquery.fn = jquery.prototype = ;

}

jquery.fn = jquery.prototype這句**明確指出jquery.fn指代的就是 jquery 的原型。

其次,我們要引入兩個概念 類方法 和 例項方法 。

jquery可以看做是這個封裝得非常好的類,而我們可以使用jquery選擇器來建立 jquery 的例項。比如:使 id 選擇器$('#btn')來建立乙個例項。

jquery.extend(object)相當於對 類方法 的擴充套件。

jquery.extend(,

/* 返回兩個元素中較大的值 */

max: function(a, b)

});jquery.min(2,

3); // 2

jquery.max(4,

5); // 5

jquery.fn.extend(object)是對jquery.prototype上的擴充套件。

jquery.fn

.extend = jquery.prototype

.extend

這種方式相當對 例項方法 的擴充套件。

舉個栗子:開發乙個簡單的小功能,使用該方法可以使選定元素內的文字變紅。

$.fn.extend(

});$('.tip').setred();

$(".tip")建立了乙個jquery例項,通過它可以呼叫成員方法setred.

上述**可以實現預想的擴充套件,但最好返回this以滿足 jquery 鏈式操作 的需要。

改良之後,**如下:

$.fn.extend(

});

JQuery的extend擴充套件方法

一 jquery的擴充套件方法原型是 extend dest,src1,src2,src3.它的含義是將src1,src2,src3.合併到dest中,返回值為合併後的dest,由此可以看出該方法合併後,是修改了dest的結構的。如果想要得到合併的結果卻又不想修改dest的結構,可以如下使用 var...

JQuery的extend方法詳解

jquery的extend擴充套件方法 jquery的擴充套件方法extend是我們在寫外掛程式的過程中常用的方法,該方法有一些過載原型,在此,我們一起去了解了解。一 jquery的擴充套件方法原型是 extend dest,src1,src2,src3.它的含義是將src1,src2,src3.合...

jQuery中的extend方法

jquery 中的extend方法jquery中的extend方法通過不同的引數實現了幾種不同的繼承方法 1.extend src 將src物件的屬性和方法逐一複製給jquery或jquery物件 2.extend dest,src1,src2,src3.srcn 將 src1 src2.物件的屬性...