JQuery源码阅读1=>detach同级下

作者: 小遁哥 | 来源:发表于2018-04-22 12:52 被阅读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 );
    

    相关文章

      网友评论

        本文标题:JQuery源码阅读1=>detach同级下

        本文链接:https://www.haomeiwen.com/subject/yxnqlftx.html