细说 jQuery DOM操作篇（二） - DOM 树操作

Anchorer 发布于2019-08-21 12:20 / 1580人阅读

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。

我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。

创建元素

我们可以通过 $() 函数来直接创建元素，例如

$("new");

但仅仅创建了元素，还没有插入到页面中来，接下来介绍插入方法。

插入元素

最基本的四种插入方法如下：

1.insertBefore 指定元素外部，前面
2.insertAfter 指定元素外部，后面
3.prependTo 指定元素内部，前面
4.appendTo 指定元素内部，后面

假设现有元素为一个 div，如下：

origin

将上例中的 span 插入到 div 内部的前面，可以这样操作：

$("new").prependTo("div");

结果为：

neworigin

反向插入元素

我们也可以反向插入元素，对应的方法为：

1.insertBefore - before
2.insertAfter - after
3.prependTo - prepend
4.appendTo - append

对于上例，使用反向插入元素的方法为：

$("div").prepend("new");

结果是一致的。

移动元素

对于已经存在的元素使用上述的四类方法，则起到移动元素的效果，假设 span 元素已经存在在 div 内部如下：

neworigin

我们尝试将 span 移至 div 外部的后面，如下：

$("span").insertAfter("div");

移动后的效果为：

包裹元素

包裹元素即给元素添加一个外层元素，假设现在有两个 span 如下：

A
B

我们希望给每个 span 都包裹一个 li，从而实现列表化，此时我们可以使用 wrap 方法:

$("span").wrap("");

结果为：

如果我们希望用一个 ul 包裹所有 span 元素，那么可以使用 wrapAll 方法：

$("span").wrapAll("
").wrap("");

克隆元素

克隆元素的方法为 clone，使用起来很简单，但是这里有一点需要注意，克隆元素时，绑定在该元素极其后代元素的事件是否也会被克隆呢，默认情况下是不会的，但是我们可以将其设置为同时克隆。举例如下：

clone

绑定点击事件给 span：

  $("span").click(function() {
    alert("hello");//
  });

克隆 span 并插入到 div 内部：

$("span").clone().appendTo("div");

但此时点击新建的 span 并不能触发 alert，因为 clone 方法默认未将绑定的事件克隆，为了达到事件克隆的效果，只需要将参数设置为 true 即可。

$("span").clone(true).appendTo("div");

此时，点击新建的 span 将会触发 alert。

获取、设置元素内容

假设有 div 如下：

content

我们希望获取 div 元素的内容，可以使用 html 方法。

$("div").html()

返回结果为："content"。

我们也可以使用 text 方法：

$("div").text()

返回结果为："content"。
所以很明显，html 方法和 text 方法的区别在于 text 方法只获取纯文本内容，所以 HTML 标签都将被忽略。

设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容：

$("div").text("new content")

html 方法同理。

参考

http://book.douban.com/subject/24669823/

云服务器 GPU云服务器 Dom操作 dom对象操作 DOM交互操作 PHP操作DOM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87542.html

细说 jQuery 元素篇（一） - 理解 DOM

摘要：最强大的特性之一就是简化了对元素的操作。从图中，我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地，隐式地循环遍历。访问从上可知，返回的是对象，但是我们有时也希望直接对元素进行操作。 DOM - Document Object Model，即文档对象模型，它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 评论0 收藏0
细说 jQuery 元素篇（二） - 选择符

摘要：为了更方便对元素操作，提供了完整的选择符体系，可以分为选择符属性选择符以及自定选择符。选择符几乎支持到规范中的所有选择符。介绍个比较有用的自定义选择符选择符。为了更方便对 DOM 元素操作，jQuery 提供了完整的选择符体系，可以分为 CSS 选择符、属性选择符以及自定选择符。 CSS 选择符 jQuery 几乎支持 CSS1 到 CSS3 规范中的所有选择符。举例如下： ...

104828720 2019-08-19 14:51 评论0 收藏0
细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
细说 jQuery DOM操作篇（一） - 属性操作

摘要：之前已经知道可以使用和等方法来修改类属性，今天来具体讨论下各种属性的操作。非类属性有时候，我们还需要对一些其他的属性进行操作，例如，，等等。例如单选按钮的属性。之前已经知道可以使用 addClass 和 removeClass 等方法来修改类属性，今天来具体讨论下各种属性的操作。非类属性有时候，我们还需要对一些其他的属性进行操作，例如 href，title，id 等等。这里，...

ideaa 2019-08-19 14:52 评论0 收藏0
jQuery基础（二）DOM篇

摘要：将匹配元素集合的父级元素删除，保留自身和兄弟元素，如果存在在原来的位置。方法查找指定元素集合中每一个元素的同辈元素。每次回调函数执行时，会传递当前循环次数作为参数从开始计数。 DOM节点的创建先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）创建流程比较简单，大体如下：创建节点(常见的：元素、属性和文本) 添加节点的一些属性加入到文档中流程中涉及的一...

Harpsichord1207 2019-08-22 10:42 评论0 收藏0