jQuery里面的DOM操作（查找，创建，添加，删除节点）

程序员文章站 2024-01-28 19:47:22

一：创建元素节点（添加）创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素用法：$("id").append("定义的节点"); 例如：var li1 = $("

橘子

"); 添加属性节点：var li3 = $("

appendto(): 将元素添加到元素里面
用法： $(li3).appendto("#box1");

prepend(): 添加节点到元素的最上面

prependto()：将节点添加给指定元素的最上面
用法：$(li3).prependto("#box1");

before（）：将节点添加到指定元素的前面（外层）
用法： $("#div1").before(div1);

insertbefore()：将新建元素添加到目标节点前面左右目标元素的兄弟元素

after():将节点添加到指定元素的后面（外层）
用法: $("#div1").after(div1);

insertafer(): 将新建的元素添加到目标节点后面作为兄弟元素
用法：$(element).insertafter("目标节点")

二：删除节点

remove(): 删除所有匹配到的元素，这个方法能够删除元素的所有子节点
$(element).remove();

empty(): empty原则上来讲它并不是删除元素，它只是清空节点，它能清空指定元素的所有子节点

$(element).empty();

三：修改节点（替换节点，包裹节点，复制节点）

包裹节点：wrap()
用法：$(element).wrap("html")

复制节点：clone(true) 完全复制某一个元素：true复制元素的同时也复制它的行为，如果不需要复制行为的时候就不加参数
用法：$(element).clone(true);

四：属性操作和样式操作

attr() : 用来获取样式和设置样式和属性
removeattr() : 用来删除元素样式和属性

addclass() :追加样式
removeclass ：移除样式
toggleclass : 切换样式
hasclass :判断是否含有某个样式

五：设置和获取html 文本和值

html() :获取元素中html内容
text() :获取元素中文本
val() :获取元素中的值，类似于javascript中的value属性

children() :用于取得匹配元素中的子元素集合。
next() :用于取得匹配元素后面紧跟的兄弟元素
prev() :用于取得匹配元素前面紧邻的兄弟元素
siblings() :用于取得匹配元素所有的兄弟元素

...

上一篇： javascript内部原理篇[javascript实现聚合]

下一篇： Oracle大表数据导出导入

jQuery里面的DOM操作（查找，创建，添加，删除节点）