jquery中add方法和after区别

在jQuery中，add（）方法和after（）方法都可以用来 *** 作DOM元素，但是它们所承担的职责不同。

add()方法是用于向选择器选中的集合中添加指定的DOM元素、选择器或HTML字符串等，从而将它们包含在当前的jQuery对象中，返回的是一个新的包含原对象和新添加的对象的jQuery对象。

after()方法是用于将指定的DOM元素、选择器或HTML字符串等插入到目标元素后面的位置，返回的是原目标元素的jQuery对象。

因此，两种方法主要区别在于add方法是添加指定的DOM元素或选择器到当前的jQuery对象中，而after方法是将指定的元素或HTML字符串插入到目标元素后面的位置。

现在看到jQuery的227行，本篇读jQ的继承方法jQuery.extend()。

官方作用解释是将一个或多个对象合并到目标对象中。

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

其中deep是布尔类型，如为true，则执行深拷贝，即合并成为递归；

target是一个对象扩展，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间；

后面的object1到objectN同样作为对象，包含额外的属性合并到第一个参数

打开APP

一期一会

关注

jQuery源码研究：jQuery对象及原型上的extend()方法 原创

2019-01-10 11:40:56

1点赞

一期一会

码龄7年

关注

现在看到jQuery的227行，本篇读jQ的继承方法jQuery.extend()。

官方作用解释是将一个或多个对象合并到目标对象中。

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

其中deep是布尔类型，如为true，则执行深拷贝，即合并成为递归；

target是一个对象扩展，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间；

后面的object1到objectN同样作为对象，包含额外的属性合并到第一个参数。

看下源码实现：

jQuery.extend = jQuery.fn.extend = function(){

//方法体...

var options, name, src, copy, copyIsArray, clone,

target = arguments[ 0 ] || {},

i = 1,

length = arguments.length,

deep = false

if ( typeof target === "boolean" ) {

deep = target

target = arguments[ i ] || {}

i++

}

if ( typeof target !== "object" &&!isFunction( target ) ) {

target = {}

}

if ( i === length ) {

target = this

i--

}

for ( i <lengthi++ ) {

if ( ( options = arguments[ i ] ) != null ) {

for ( name in options ) {

src = target[ name ]

copy = options[ name ]

if ( target === copy ) {

continue

}

if ( deep &&copy &&( jQuery.isPlainObject( copy ) ||

( copyIsArray = Array.isArray( copy ) ) ) ) {

if ( copyIsArray ) {

copyIsArray = false

clone = src &&Array.isArray( src ) ? src : []

} else {

clone = src &&jQuery.isPlainObject( src ) ? src : {}

}

target[ name ] = jQuery.extend( deep, clone, copy )

} else if ( copy !== undefined ) {

target[ name ] = copy

// 返回修改后的对象

return target

在jQuery对象上添加extend属性，并且在jQuery.fn上面也添加同样的extend属性，还记得前面jQuery.fn = jQuery.prototype不？jQuery对象的fn属性指针就指向jQuery对象的原型，并且因为对象都是引用类型的，所以上例代码的 *** 作意思就是：在jQuery对象和它的原型对象上都添加extend方法，该方法最后返回的是一个合并处理后的对象。

在jQuery对象上绑定的extend()和jQuery.fn上绑定的extend()方法其实是不同的，前者是类方法，是静态方法，调用方法写作$.extend()；后者是实例方法，是成员方法，调用方法写作$(selector).extend()。

---