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

转载 2012年03月31日 15:03:35

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

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

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

      jquery append函数测试
    • appendTo()
      此方法将所有匹配的元素追加到指定的元素中。实际上,此方法颠倒了$(A).append(B)的操作。

      jquery appendTo函数测试
    • prepend()
      这个方法和append的用法一样,只是结果不一样而已,它是向每个匹配的元素的内部前置内容,也就是放在被匹配元素内部的最前面。

      jquery prepend函数测试
    • prependTo()
      这个方法和appendTo的用法一样,只是结果不一样而已,它是将所有匹配的元素前置倒指定的元素中。

      jquery prependTo函数测试
    • after()
      上面四个方法都是内部插入,从这个函数起就是外部插入啦。after方法会在每个匹配的元素之后插入内容。

      jquery after函数测试
    • insertAfter()
      将所有匹配的元素插入到指定元素的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是将B插入到A后面,而是将A插入到B的后面。

      jquery insertAfter函数测试
    • before()
      在每个匹配的元素之前插入内容。用法和after一样,就是结果相反而已.
    • insertBefore()
      将所有匹配的元素插入到指定的元素的前面。用法和insertAfter一样,就是结果相反而已

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

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

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

      jquery remove函数测试
    • empty()
      empty方法是清空节点中的所有的内容,包括纯文本以及HTML元素,本身节点还是在的。

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

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

    jquery replaceWith和replaceAll函数测试
  • 包裹节点
    jquery中提供了三个方法来实现节点的包裹,即wrap()、wrapAll()和wrapInner()

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

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

相关文章推荐

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

jQuery作为Javascript的一个强大的库,其对DOM对象的操作之简化,让开发人员甚至于小白们都为之赞叹不已。 接着上一个系列的jQuery选择器的教程,接下来教大家的是jQuery中的DO...

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

jQuery基础教程之DOM操作-节点操作函数(一) 发表于 2011 年 01 月 20 日 由 梦三秋 jQuery作为Javascript的一个强大的库,其对DOM对象的操作之...

jQuery基础教程之DOM操作-遍历节点-parents()方法

在上一章jQuery教程基础篇之DOM操作-遍历节点-parent()方法,我们讲到了如何获取元素的父元素的集合,有时候我们的需求可能会要查找元素的所有的祖先元素,那么.parents()方法将会满足...

jQuery基础教程之DOM操作-遍历节点-closest()方法

.closest() 此方法获取第一个相匹配的祖先元素,注意:起始点包括自身元素。 另外这个方法是必须要传入一个选择器表达式参数的,如果不传入参数的话,就会返回一个空的jquery对象。 要...

jQuery基础教程之DOM操作-遍历节点-prev()方法

.prev([selector]) 此方法取得每个匹配的元素的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。 下面来...

jQuery基础教程之DOM操作-遍历节点-siblings()方法

在前面的两节教程中,我们分别知道了jquery如何取得当前元素的前一个同辈元素以及后一个同辈元素,他们分别是.prev()方法和.next()方法。 那么肯定的了,既然在jquery中能取得前一个和...

jQuery基础教程之DOM操作-遍历节点-parent()方法

上一章我们说了jQuery教程基础篇之DOM操作-遍历节点-children()方法,那接下来,正好说说parent()方法。 .parent([selector])方法返回的是每一个匹配的元素...

《jQuery基础教程》-- 操作DOM

1.操作属性 之前的css方法还有addClass、removeClass、toggleClass都是对DOM元素进行style属性的操作。而对于其他属性则可以使用attr和removeAttr来实...

jQuery基础教程之DOM操作-属性操作

jquery中,用attr()方法来获取和设置元素属性,对应地,removeAttr()方法是用来删除元素属性。 attr() 这个函数有四个用法: 用法 ...

jQuery基础教程之DOM操作-HTML&文本&值的操作

今天主要讲解jquery中的三个方法的使用,他们分别是html()、text()、val()。 这三个jquery方法的使用方式一样都有三种,下面请看用法和DEMO。 html() ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery基础教程之DOM操作-节点操作函数(二)
举报原因:
原因补充:

(最多只允许输入30个字)