jQuery基础教程之DOM操作-节点操作函数(二)

时间:2022-09-16 23:05:23

这一篇文章是接着jQuery教程基础篇之DOM操作-节点操作函数(一)这篇文章的,如果您还没看过,请不妨先读读上一篇,然后再来看这篇文章吧。
废话不多说,我们接着上一篇来吧~

  • 插入节点
    上一篇文章,最后讲到的是如何创建节点,其实我们动态创建了节点之后,还需要对这个动态创建的节点进行一些操作,这样创建节点才变得有意义。在jquery中已经提供了许多插入节点的方法。下面我们来一一看过。

    • append()
      此方法会向每个匹配的元素内部追加内容。追加的内容可以是纯文本、HTML代码,也可以文本和HTML混合。

      jQuery基础教程之DOM操作-节点操作函数(二)
    • appendTo()
      此方法将所有匹配的元素追加到指定的元素中。实际上,此方法颠倒了$(A).append(B)的操作。

      jQuery基础教程之DOM操作-节点操作函数(二)
    • prepend()
      这个方法和append的用法一样,只是结果不一样而已,它是向每个匹配的元素的内部前置内容,也就是放在被匹配元素内部的最前面。

      jQuery基础教程之DOM操作-节点操作函数(二)
    • prependTo()
      这个方法和appendTo的用法一样,只是结果不一样而已,它是将所有匹配的元素前置倒指定的元素中。

      jQuery基础教程之DOM操作-节点操作函数(二)
    • after()
      上面四个方法都是内部插入,从这个函数起就是外部插入啦。after方法会在每个匹配的元素之后插入内容。

      jQuery基础教程之DOM操作-节点操作函数(二)
    • insertAfter()
      将所有匹配的元素插入到指定元素的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是将B插入到A后面,而是将A插入到B的后面。

      jQuery基础教程之DOM操作-节点操作函数(二)
    • before()
      在每个匹配的元素之前插入内容。用法和after一样,就是结果相反而已.
    • insertBefore()
      将所有匹配的元素插入到指定的元素的前面。用法和insertAfter一样,就是结果相反而已

    细心试验DEMO的同学一定发现了,这些个插入节点的方法不仅能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动,你们可以自己多试验试验。

  • 删除节点
    jquery中提供了两个删除节点的方法,它们是remove()和empty()

    • remove()
      这个方法的作用是将所有匹配的元素从DOM文档中删除。传入的参数和jquery选择器一样。

      jQuery基础教程之DOM操作-节点操作函数(二)
    • empty()
      empty方法是清空节点中的所有的内容,包括纯文本以及HTML元素,本身节点还是在的。

      jQuery基础教程之DOM操作-节点操作函数(二)
  • 复制节点
    jquery中提供了clone的方法,满足节点复制的需求。但是有一点要注意的是,原本被复制的节点中,可能有些元素已经绑定了事件,如果想要复制得到的节点中的元素仍然保留原来绑定的事件的话,必须要这样给clone的方法传入参数true
    $(“div”).clone(true).appendTo(“body”);

    jQuery基础教程之DOM操作-节点操作函数(二)
  • 替换节点
    jquery中提供了两个方法来实现节点的替换,即replaceWith()和replaceAll()
    replaceWith方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。
    replaceAll方法和replaceWith方法的作用相同,只是颠倒了replaceWith的操作。

    jQuery基础教程之DOM操作-节点操作函数(二)
  • 包裹节点
    jquery中提供了三个方法来实现节点的包裹,即wrap()、wrapAll()和wrapInner()

    函数 作用 查看DEMO
    wrap() 为每个被匹配的元素用其他节点包裹起来,被匹配的元素是被包裹在要包裹的元素的内部后面 jQuery基础教程之DOM操作-节点操作函数(二)
    wrapAll() 该方法将所有匹配的元素何在一块用一个元素来包裹 jQuery基础教程之DOM操作-节点操作函数(二)
    wrapInner() 该方法将所有匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。 jQuery基础教程之DOM操作-节点操作函数(二)

恩~~到这里jQuery教程基础篇之DOM操作-节点操作函数 已经全部说完了~其实这些函数在jquery API手册中都是能找到的。
这么多函数,其实我自己也记不住,在要用到的时候,能找到相关的函数就可以了~~