JQuery源码阅读1=>detach同级下
2018-04-22 本文已影响2人
小遁哥
大多数JQuery api ,同一个参数可传DOM元素、html字符串、JQuery包裹的DOM元素、DoucmentFragment
1.text
text: function( value ) {
return access( this, function( value ) {
return value === undefined ?
//还是通过textContent 取值 只是这个函数处理了非DOM元素的其他情况
jQuery.text( this ) :
this.empty().each( function() {
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
//1 是元素节点 9 是Doucment 11 DocumentFragment
//赋值
this.textContent = value;
}
} );
}, null, value, arguments.length );
},
textContent的兼容性为IE8+(包括IE8) 与InnerText的区别有
textContent能获得隐藏元素(visibility: hidden;)的内容
textContent 的内容像代码编辑器中看到的,InnerText像浏览器中看到的
2.append、prepend、
只有添加的方式不一样
domManip 是一个函数”预处理器“ 比如将传进来的html字符串构建为DOM元素
append: function() {
return domManip( this, arguments, function( elem ) {
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
//对tr元素进行特殊处理
var target = manipulationTarget( this, elem );
//原生DOM方法添加
target.appendChild( elem );
}
} );
},
prepend
target.insertBefore( elem, target.firstChild );
2.1 manipulationTarget
function manipulationTarget( elem, content ) {
//如果elem是table元素 content是DoucmentDragment则取他的第一个子节点,否则是它本身 看content是否为tr元素
if ( nodeName( elem, "table" ) &&
nodeName( content.nodeType !== 11 ? content : content.firstChild, "tr" ) ) {
//如果是往一个table里直接添加一个tr则取table的第一个tbody进行添加
return jQuery( elem ).children( "tbody" )[ 0 ] || elem;
}
return elem;
}
3 before、after
两者只是在最后添加的方式不一样
before: function() {
return domManip( this, arguments, function( elem ) {
if ( this.parentNode ) {
//通过原生api添加
this.parentNode.insertBefore( elem, this );
}
} );
},
after
this.parentNode.insertBefore( elem, this.nextSibling );