jQuery原生框架-----------------dom操作

Posted 2020-08-21 鹿晓晓

// 扩展DOM操作方法
jQuery.fn.extend({

// 设置或者获取元素的内容
html: function( html ) {
/*
* 实现思路：
* 1、不传参，返回第一个元素的内容
* 2、传参
* 2.1、参数类型为null，遍历所有元素，依次清除它们的内容
* 2.2、参数类型为字符串，遍历所有元素，依次重置它们的内容
* 3、链式编程返回this
* */

// 不传参，返回第一个元素的内容
if( arguments.length === 0 ) {
return this.get(0).innerHTML;
}

// 传参，进一步判断
else {

// null，清除所有
if( html === null ) {

this.each( function() {
this.innerHTML = ‘‘;
});
}

// string，重置
else if( jQuery.isString( html ) ) {

this.each( function() {
this.innerHTML = html;
});
}
}

// 链式编程
return this;
},

// 升级版本，复用porp实现innerHTML的获取与设置
_html: function( html ) {

if( arguments.length === 0 ) {
return this.prop( ‘innerHTML‘ );
}else {
if( html === null ) {
html = ‘‘;
}
return this.prop( ‘innerHTML‘, html );
}
},

// 升级版本，复用porp实现innerHTML的获取与设置
__html: function() {
if( arguments[0] === null ) {
arguments[0] = ‘‘;
}
return this.prop.apply( this, [].concat.apply( [‘innerHTML‘], arguments ) );
},

// 设置或者获取元素的文本
text: function( text ) {
/*
* 实现思路：
* 1、不传参，遍历所有元素，依次得到他们的文本，累加在一起返回
* 2、传参
* 2.1、参数类型为null，遍历所有元素，依次清除它们的内容
* 2.2、参数类型为字符串，遍历所有元素，依次重置它们的文本
* 3、链式编程返回this
* */

var textTotal = ‘‘;

// 不传参，返回所有元素的文本
if( arguments.length === 0 ) {

this.each( function() {
textTotal += this.innerText;
});

return textTotal;
}

// 传参，进一步判断
else {

// null，清除所有
if( text === null ) {
this.each( function() {
this.innerText = ‘‘;
});
}

// string，重置
else if( jQuery.isString( text ) ) {
this.each( function() {
this.innerText = text;
});
}
}

// 链式编程
return this;
},

// 升级版本，获取采用map，设置复用prop
_text: function( text ) {

if( arguments.length === 0 ) {

// 利用静态map方法遍历所有的元素，得到所有元素的文本组成的数组，
// 然后利用数组的join方法把它们连在一起。
return jQuery.map( this, function() {
return this.innerText;
}).join(‘‘);

}

else {

// 这里可以复用prop实现
return this.prop( ‘innerText‘, text === null? ‘‘: text );
}
},

// 清除所有元素的内容
empty: function() {
return this.html( null );
},

// 删除所有元素
remove: function() {
return this.each( function() {
this.parentNode.removeChild( this );
});
},

// 把所有元素添加到指定的目标
appendTo: function( target ) {

// target可能是DOM、selector、jQ实例，
// 那我们借助jQuery统一包装一下，最终得到的都是jQ实例。

var $target = jQuery( target );

/*
* 实现思路：
* 1、遍历所有目标，再遍历所有元素，
* 2、依次把所有元素添加到所有目标中(只有一个目标添加的元素是本体，其余的是clone版本)。
* 3、收集所有被添加的元素(包含clone版本)，交由pushStack处理，然后返回其值。
* */

var $content = this,
temp, result = [];

// 遍历所有目标
$target.each( function( i ) {

// 这里的this是每一个目标
var self = this;

// 遍历所有被添加的元素
$content.each( function() {

// 这里的this是每一个被添加的元素
// 只有第一个目标添加的是元素本体，以后添加的是元素clone版本
temp = i === 0? this: this.cloneNode( true );
self.appendChild( temp );

// 收集所有被添加的元素，最后要返回
result.push( temp );
});
});

// 交由pushStack包装成新实例返回，新实例记录了上一级链
return this.pushStack( result );
},

// 给所有元素添加子元素
append: function( content ) {
/*
* 实现思路：
* 1、如果content是字符串，遍历所有元素，累加innerHTML
* 2、如果不是，统一使用jQuery包装成实例
* 3、遍历所有目标，再遍历所有要添加的元素
* 4、依次把所有元素添加到所有目标中(只有一个目标添加的元素是本体，其余的是clone版本)
* 5、链式编程返回this
* */

if( jQuery.isString( content ) ) {
this.each( function() {
this.innerHTML += content;
});
}else {
jQuery( content ).appendTo( this );
}

// 链式编程
return this;
},

// 把所有元素添加到目标的最前面
prependTo: function( target ) {
/*
* 实现思路：
* 0、把target使用jQuery统一包装成jQ实例
* 1、遍历所有目标，再遍历所有元素，
* 2、依次把所有元素添加到所有目标的最前面(只有一个目标添加的元素是本体，其余的是clone版本)。
* 3、收集所有被添加的元素(包含clone版本)，交由pushStack处理，然后返回其值。
* */

var $target = jQuery( target );
var temp, result = [];

// 遍历目标
for( var i = 0, len = $target.length; i < len; i++ ) {

// 遍历被添加元素
for( var j = 0, lenJ = this.length; j < lenJ; j++ ) {

// 给第一个目标加本地，以后clone
temp = i === 0? this[ j ]: this[ j ].cloneNode( true );
$target[i].insertBefore( temp, $target[i].firstChild );
result.push( temp );
}
}

return this.pushStack( result );
},

_prependTo: function( target ) {
/*
* 实现思路：
* 0、把target使用jQuery统一包装成jQ实例
* 1、遍历所有目标，再遍历所有元素，
* 2、依次把所有元素添加到所有目标的最前面(只有一个目标添加的元素是本体，其余的是clone版本)。
* 3、收集所有被添加的元素(包含clone版本)，交由pushStack处理，然后返回其值。
* */

var $content = this,
temp, result = [];

// 遍历所有的目标
jQuery( target ).each( function( i ) {

// 这里的this，指向每一个目标元素
var target = this;

// 遍历所有被添加的元素
$content.each( function() {

// 这里的this，指向每一个被添加的元素

// 只有第一个目标添加是本体，以后是clone版本
temp = i === 0? this: this.cloneNode( true );

// 把元素添加到目标的最前面
target.insertBefore( temp, target.firstChild );

// 保存被添加的元素
result.push( temp );
});
});

return this.pushStack( result );
},

// 给所有元素的最前面添加子元素
prepend: function( content ) {
/*
* 实现思路：
* 1、如果content是字符串，遍历所有元素，累加到innerHTML的最前面
* 2、如果不是，先保证成jQ实例，然后借用prependTo添加到this
* 3、链式编程返回this
* */

if( jQuery.isString( content ) ) {
this.each( function() {
this.innerHTML = content + this.innerHTML;
});
}else {
jQuery( content ).prependTo( this );
}

return this;
},

// 获取所有元素的子元素
children: function() {

var result = [];

// 遍历所有元素
this.each( function() {

// 把所有的子元素添加存储result中
result.push.apply( result, this.children );
});

return this.pushStack( result );
},

// 获取所有元素的下一个兄弟元素
next: function() {

var result = [];

// 遍历所有元素
this.each( function() {
var nextNode = this;

// 找到元素下一个兄弟元素为止
while ( nextNode = nextNode.nextSibling ) {
if( nextNode.nodeType === 1 ) {
result.push( nextNode );
break;
}
}
});

return this.pushStack( result );
},

// 获取所有元素的下一个兄弟元素
_next: function() {
return this.pushStack( this.map( function() {
var nextNode = this;
while( nextNode = nextNode.nextSibling ) {
if( nextNode.nodeType === 1 ) {
return nextNode;
}
}
}));
},

// 在所有元素的前面添加兄弟元素
before: function( sibling ) {
/*
* 实现思路：
* 1、如果参数是字符串，那么调用parseHTML解析成DOM节点
* 2、统一包装成实例
* 3、遍历所有参照的兄弟元素，遍历所有被添加的兄弟元素
* 4、获取每一个参照元素的父元素，在参照元素的前面插入被添加的兄弟元素（第一个父添加的是本体，以后是clone）
* 5、链式编程返回this
* */
if( jQuery.isString( sibling ) ) {
sibling = jQuery.parseHTML( sibling );
}

var $sibling = jQuery( sibling );

// 遍历所有的参照元素
return this.each( function( i ) {

var refer = this;

// 遍历所有被添加的元素
$sibling.each( function() {

// 第一个父元素添加本体，以后clone
refer.parentNode.insertBefore( i === 0? this: this.cloneNode( true ), refer );
});
});
},

// 在所有元素的后面添加兄弟元素
after: function( sibling ) {
if( jQuery.isString( sibling ) ) {
sibling = jQuery.parseHTML( sibling );
}

var $sibling = jQuery( sibling );

// 遍历所有的参照元素
return this.each( function ( i ) {

var refer = this;

// 遍历所有被添加的元素
$sibling.each( function() {

// 第一个父元素添加本体，以后clone
refer.parentNode.insertBefore( i === 0? this: this.cloneNode( true ), refer.nextSibling );
});
});
}
});