Jquery基础教程之DOM操作

2020-05-23 06:24:09易采站长站整理

    四、删–删除DOM节点操作

      如果想要删除文档中的某个元素JQuery提供了两种删除节点的方法:remove()和empty();

    1、remove()方法

      remove()方法删除所有匹配的元素,传入的参数用于筛选元素,该方法能删除元素中的所有子节点,当匹配的节点及后代被删除后,该方法返回值是指向被删除节点的引用,因此可以使用该引用,再使用这些被删除的元素。

方法如下:


$(element).remove();

例:     


 $span=$("span").remove();

      $span.insertAfter("ul");

      该示例中先删除所有的span元素,把删除后的元素使用$span接收,把删除后的元素添加到ul后面做为ul的兄弟节点。该操作相当于将所有的span元素以及后代元素移到ul后面。

    2、empty()方法。

      empty()方法严格来讲并不是删除元素,该方法只是清空节点,它能清空元素中的所有子节点。方法如下:


$(element).empty();

例:      


$("ul li:eq(0)").empty();

      该示例使用empty方法清空ul中第一个li的文本值。只能下li标签默认符号”·“。

  五、改–修改DOM节点操作

       修改文档中的元素节点可以使用多种方法:复制节点、替换节点、包裹节点。

    1、复制节点$(element).clone()

       复制节点方法能够复制节点元素,并且能够根据参数决定是否复制节点元素的行为。方法如下:


$(element).clone(true);

例:       


$("ul li:eq(0)").clone(true);

       该方法复制ul的第一个li元素,true参数决定复制元素时也复制元素行为,当不复制行为时没有参数。

    2、替换节点$(element).repalcewith()、$(element).repalceAll()

       替换节点方法能够替换某个节点,有两种形式形式实现:replaceWith()和replaceAll().使用replaceWith方法使用后面的元素替换前面的元素,replaceAll方法使用前面的元素替换后面的元素,

方法如下:


$(oldelement).replaceWith(newelement);$(newelement).repalceAll(oldelement);

例:             


$("p").replaceWith("<strong>我要留下</strong>");

该方法使用strong元素替换p元素。