浅谈jQuery 选择器和dom操作(2)

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

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

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

1.查找节点

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

2.创建节点

使用JQuery的工厂函数,创建一个新节点:var $newNode = $(“<p>你好</p>”);,然后将新节点插入到指定元素节点处。

3.插入节点

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

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

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

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

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

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

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

“$newNode.before($node)”,向每个匹配的元素的之前插入内容。如,“$("p").before("<b>Hello</b>");”将"<b>Hello</b>"插入到"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("<b>Paragraph. </b>");,将所有p元素,替换为"<b>Paragraph. </b>"。

与replaceWith相返:$("<b>Paragraph. </b>").replaceAll("p");。

7.包裹节点

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzspww.html