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操作-遍历节点-find()方法

.find(selector) 此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。 记住:使用此方法必须得传入选择器表达式参数,不然是获取不到任何元素的,也就失去了使用此方法的意义了。 ...
  • wql19881207
  • wql19881207
  • 2012年04月01日 15:41
  • 2578

学习笔记:《jQuery基础教程》第四版第五章课后练习——操作DOM

修改添加back top链接的代码,以便这些链接只从第四段后面才开始出现。 在单击back to top链接时,为每个链接后面添加一个新段落,其中包含You were here字样。确保链接仍然有效。...
  • la413972057
  • la413972057
  • 2015年11月26日 20:16
  • 1181

jQuery 中的 DOM 操作-查找节点

•DOM(Document Object Model—文档对象模型):一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 •DOM 操作的分类: –DOMCore: ...
  • fanpengfei0
  • fanpengfei0
  • 2017年01月09日 00:36
  • 753

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

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

JQuery的DOM操作+事例

1.DOM节点的创建通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个...
  • u012396955
  • u012396955
  • 2017年02月23日 20:18
  • 464

06 JS-DOM之--节点操作(4种)附案例源码

节点的操作一共四种: 创建节点(3种) 添加节点(2种) 删除节点(1种) 复制节点...
  • luyu13141314
  • luyu13141314
  • 2016年11月29日 18:44
  • 240

03 JS-DOM之--节点属性操作方法(2种)附案例源码

属性操作两种方法: 1、 dom对象.属性 == dom对象[属性] ; 2、 dom对象.get/set/removeAttribute() 获取属性:dom对...
  • luyu13141314
  • luyu13141314
  • 2016年11月29日 18:26
  • 476

jsDOM节点操作

1.访问节点 document.getElementById(id); 返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name); 返回带有...
  • Ag_wenbi
  • Ag_wenbi
  • 2016年11月16日 09:21
  • 2467

JS操作dom节点及兼容性

父节点 parentNode 获取到的是自己的亲父亲(直属关系) // 点击孩子隐藏父亲 window.onload = function(){ var child = do...
  • kumayato
  • kumayato
  • 2017年05月11日 13:09
  • 346

jQuery节点操作方法

在元素内部插入节点 方法 说明 示例 append(content) 为所有匹配的元素的内部追加内容 $(‘#B’).append(‘< p >A< /p >’); //向id为...
  • ymc_webpack
  • ymc_webpack
  • 2017年03月06日 10:48
  • 401
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery基础教程之DOM操作-节点操作函数(二)
举报原因:
原因补充:

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