jQuery从入门到精通源码分析系列(二十五) DOM操作方法(一)
沉沙 2018-07-24 来源 : 阅读 191 评论 0

摘要:本篇jQuery教程探讨了DOM操作方法,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

jQuery针对DOM操作的插入的方法有大概10种

append、prepend、before、after、replaceWith

appendTo、prependTo、insertBefore、insertAfter、replaceAll

分2组,上下对照,实现同样的功能。主要的不同是语法——特别是内容和目标的位置

依赖的domManip,buildFragment模块在之前就分析过了

在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点

对于 .after(), 选择表达式在函数的前面,参数是将要插入的内容。

对于.insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面。

after

after: function() {

    return this.domManip( arguments, function( elem ) {

        if ( this.parentNode ) {

            this.parentNode.insertBefore( elem, this.nextSibling );

        }

    });

},

之前提过了所有的方法靠this.domManip合并参数处理,内部通过buildFragment模块构建文档碎片

然后把每一个方法的具体执行通过回调的方式提供出来处理

DOM操作并未提供一个直接可以在当前节点后插入一个兄弟节点的方法,但是提供了一个类似的方法

insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)

看看jQuery如何处理的

例如

inner.after('<p>Test</p>');

内部就会把  '<p>Test</p>' 通过buildFragment构建出文档elem

然后通过  this.parentNode.insertBefore( elem, this.nextSibling );

这里的this 就是对应着inner ,elem就是‘<p>Test</p>’

看到这里就很好理解了after的实现了

用原生方法简单模拟

var  inner = document.getElementsByClassName('inner')for(var i =0 ; i<inner.length;i++){

    var elem = inner[i]

    var div = document.createElement('div')

    div.innerHTML = 'aaaa'

    elem.parentNode.insertBefore(div,elem.nextSibling)

}

insertAfter

jQuery代码的设计者很聪明的,都尽可能的合并相似功能的方法,代码更加精炼美观

jQuery.each({

    appendTo: "append",

    prependTo: "prepend",

    insertBefore: "before",

    insertAfter: "after",

    replaceAll: "replaceWith"

}, function( name, original ) {

    jQuery.fn[ name ] = function( selector ) {

    };

});

DEMO

$('<p>Test</p>').insertAfter('.inner');

通过$('<p>Test</p>')构建一个文档,对象通过insertAfter方法插入到所有class等于inner的节点后

表达的意思与after是一样的,主要的不同是语法——特别是内容和目标的位置

jQuery.fn[ name ] = function( selector ) {

        var elems,

            ret = [],

            insert = jQuery( selector ),

            last = insert.length - 1,

            i = 0;

        for ( ; i <= last; i++ ) {

            elems = i === last ? this : this.clone( true );

            jQuery( insert[ i ] )[ original ]( elems );

            // Support: QtWebKit

            // .get() because core_push.apply(_, arraylike) throws            core_push.apply( ret, elems.get() );

        }

        return this.pushStack( ret );

    };

看具体的实现方法中.insertAfter('.inner');inner其实就被当作selector传入进来了

selector可能只是字符串选择器内部就需要转化,insert = jQuery( selector ),

$('<p>Test</p>')就是构建出来的文档碎片节点,那么如果赋给insert有多个的时候就需要完全克隆一份副本了,所以就直接赋给

elems = i === last ? this : this.clone( true ); jQuery( insert[ i ] )[ original ]( elems );

依旧是执行after

jQuery( insert[ i ] )[ original ]( elems );

最终还需要返回这个构建的新节点

收集构建的节点

core_push.apply( ret, elems.get() );

构建一个新jQuery对象,以便实现链式

this.pushStack( ret );

可见after 与 insertAfter 本质本质其实都是一样的,只是通过不同的方式调用

before()

根据参数设定,在匹配元素的前面插入内容

before: function() {

        return this.domManip( arguments, function( elem ) {

            if ( this.parentNode ) {

                this.parentNode.insertBefore( elem, this );

            }

        });

    },

类似after只是替换了第二个参数,改变插入的位置

append()

在每个匹配元素里面的末尾处插入参数内容

append: function() {

    return this.domManip( arguments, function( elem ) {

        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {

            var target = manipulationTarget( this, elem );

            target.appendChild( elem );

        }

    });

},

内部增加节点,直接可以调用appendChild方法

prepend()

将参数内容插入到每个匹配元素的前面(元素内部)

prepend: function() {

    return this.domManip( arguments, function( elem ) {

        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {

            var target = manipulationTarget( this, elem );

            target.insertBefore( elem, target.firstChild );

        }

    });

},

类似after只是替换了第二个参数,改变插入的位置

replaceWith()

用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

.replaceWith()可以从DOM中移除内容,然后在这个地方插入新的内容。请看下面的例子:

<div>

  <div class="inner first">Hello</div>

  <div class="inner second">And</div>

  <div class="inner third">Goodbye</div>

</div>

我们可以用指定的HTML替换第二个 inner <div> :

$('div.second').replaceWith('<h2>New heading</h2>');

结果如下:

<div>

  <div class="inner first">Hello</div>

  <h2>New heading</h2>

  <div class="inner third">Goodbye</div>

</div>

或者我们可以选择一个元素把它当做替换的内容:

$('div.third').replaceWith($('.first'));

结果如下:

<div>

  <div class="inner second">And</div>

  <div class="inner first">Hello</div>

</div>

从这个例子可以看出,用来替换的元素从老地方移到新位置,而不是复制。

.replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以和其他方法链接使用,但是需要注意的是:对于该方法而言,该对象指向已经从 DOM 中被移除的对象,而不是指向替换用的对象。

replaceWith: function() {

    var

        // Snapshot the DOM in case .domManip sweeps something relevant into its fragment

        args = jQuery.map( this, function( elem ) {

            return [ elem.nextSibling, elem.parentNode ];

        }),

        i = 0;

    // Make the changes, replacing each context element with the new content

    this.domManip( arguments, function( elem ) {

        var next = args[ i++ ],

            parent = args[ i++ ];

        if ( parent ) {

            // Don't use the snapshot next if it has moved (#13810)

            if ( next && next.parentNode !== parent ) {

                next = this.nextSibling;

            }

            jQuery( this ).remove();

            parent.insertBefore( elem, next );

        }

    // Allow new content to include elements from the context set

    }, true );

    // Force removal if there was no new content (e.g., from empty arguments)

    return i ? this : this.remove();

},

删除目标节点

jQuery( this ).remove();

然后再插入一个新节点

parent.insertBefore( elem, next );


本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计