优美编程读过源码才知道-JQuery(v3.3.1)

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 );
上一篇下一篇

猜你喜欢

热点阅读