JQuery基础课程：JQuery中的DOM操作介绍

    一种与浏览器，平台，语言无关的接口。使用该接口可以轻松地访问页面中所有的标准组件。

         DOM Core：DOM Core 并不专属于 JavaScript，任何一种支持 DOM 的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种是用标记语言编写出来的文档，例如：XML。

HTML DOM：使用 JavaScript 和 DOM 为 HTML 文件编写脚本时，有许多专属于HTML-DOM的属性。

CSS-DOM：针对于CSS操作，在JavaScript中，CSS-DOM 主要用于获取和设置 style 对象的各种属性。

1.查找节点

         请见上面的“基本选择器”。

Bandy AI

全球领先的电商设计Agent

下载

2.创建节点

         使用JQuery的工厂函数，创建一个新节点：var $newNode = $(“

你好

3.插入节点

         将新创建的节点，或获取的节点插入指定的位置。

         “$node.append($newNode)”，向每个匹配的元素内部的结尾处追加结尾处。如，“$("p").append("Hello");”将"Hello"添加到"p"内部的结尾处。

         “$newNode.appendTo($node)”，将新元素追加到每个匹配元素内部的结尾处。

         “$node.prepend($newNode)”，向每个匹配的元素内部的结尾处追加开始处。如，“$("p").prepend("Hello");”将"Hello"添加到"p"内部的起始处。

         “$newNode.prependTo($node)”， 将新元素追加到每个匹配元素内部的开始处。

         “$node.after($newNode)”，向每个匹配的元素的之后插入内容，是并列兄弟。如，“$("p").after("Hello");”将"Hello"插入到"p"的后边。它们是兄弟关系。

         “$newNode.insertAfter($node)”，将新元素插入到每个匹配元素之后。

         “$newNode.before($node)”，向每个匹配的元素的之前插入内容。如，“$("p").before("Hello");”将"Hello"插入到"p"的前面，它们是兄弟关系。

         “$node.insertBefore($newNode)”，将新元素插入到每个匹配元素之前。

         注意：如果插入的节点是不是新创建的，插入将变成移动操作。所以，在插入这样的节点之前应该使用clone的节点。

4.删除节点

         从DOM中删除所有匹配的元素。如，“$("p").remove(".hello");”删除所为class属性值为hello的p元素，还有它下面的所有元素。

         从DOM中清除所有匹配的元素。如，“$("p").empty();”清除所有p元素，还有它下面的所有元素。

5.复制节点

         克隆匹配的DOM元素。如，“$("p").clone();”返回克隆后的副本，但不具有任何行为。如果要将DOM的事件一起克隆，应该使用“$("p").clone(true);”。

6.替换节点

         将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。如，$("p").replaceWith("Paragraph. ");，将所有p元素，替换为"Paragraph. "。

         与replaceWith相返：$("Paragraph. ").replaceAll("p");。

7.包裹节点

         wrap()：将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用， 而且不会破坏原始文档的语义。如，“$("p").wrap("