jquery中的DOM操作
Posted 苯宝宝
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery中的DOM操作相关的知识，希望对你有一定的参考价值。
DOM操作分为：DOM核心、html-DOM、CSS-DOM
1.节点操作
查找
查找元素节点：jquery选择器
查找属性节点：attr(“”)方法，参数为要查询的属性的名字
创建
创建元素节点：$("html")方法，参数为HTML标记字符串，如：<p></p>
注意：（1）动态创建的新元素节点不会被自动添加到文档中，需要用其他方法插入文档中（2）创建元素时注意标签闭合，可以用$("<p></p>")或$("</p>")
创建文本节点：$("<p>文本内容</p>")方法
创建属性节点：$("<p 属性名=‘属性值‘></p>")方法
插入节点
（1）$("A").append("B")方法：将B节点插入到A节点内部的后位
$("B").appendTo("A")方法：
（2）$("A").prepend("B")方法：将B节点插入到A节点内部的前置位置
$("B").prependTo("A")方法：
（3）$("A").after("B")方法：将B节点插到A节点之后
$("B").insertAfter("A")方法：
（4）$("A").before("B")方法：在B节点之前插入A节点
$("B").insertBefore("A")方法：
删除节点
（1）remove()方法：删除某个节点及该节点包含的所有后代节点，返回值是一个指向已被删除的节点的引用，可再次使用
可通过传参选择性的删除节点
（2）detach()方法：该方法不会把匹配元素从jquery对象中删除，可再次使用
和remove的区别：所有绑定的事件、附加的数据等都都会保留下来
（3）empty()方法：清空某个节点中的所有后代节点，即：清空后只剩下HTML标记，不可再次使用
复制节点
clone()方法：复制的新元素不具有任何行为
传入参数true可使复制元素的同时复制元素中的绑定事件
替换节点
$("A").replaceWith("B")方法：将所有匹配元素替换成指定的HTML或DOM元素，即：用B节点替换A节点
$("B").replaceAll("A")方法
包裹节点
（1）$("A").wrap("B")方法：将所有的元素进行包裹，用B将A包裹起来
（2）$("A").wrapAll("B")方法：将符合的每个元素进行单独包裹
（3）$("A").wrapInner("B")方法：用B节点将A节点的子内容（包括文本节点）包裹起来
2. 属性操作
获取属性：attr()方法— — 参数为属性名
设置属性：attr()方法— — 参数为“属性名”，“属性值”；或“属性名“：”属性值”，“属性名”：“属性值”
注意：有些方法既能获取元素的值，也能设置元素的值——html()、text()、height()、width()、val()、css()、attr()
删除属性：removeAttr()方法
3.样式操作
获取样式和设置样式（获取和设置class属性）：attr()方法
追加样式：addClass(“class类名”)方法
移除样式：removeClass()方法，参数为class名时，移除相应的样式；参数为空时，移除所有class的值
切换样式：toggle()方法— —控制行为的重复切换
toggleClass("class名")方法— —样式的重复切换。如果类名存在删除它，不存在添加它。
判断是否含有某个样式：hasClass("class")方法，如果有true，否则返回false
4.获取和设置HTML、文本和值
获取和设置某个元素中的HTML内容：html()方法，类似于js的innerHTML
获取和设置某个元素中的文本内容：text()方法，类似于js的innerText
注意：（1）Firefox不支持innerText，text()支持所有浏览器（2）text()对HTML和XML都有效
以上是关于jquery中的DOM操作的主要内容，如果未能解决你的问题，请参考以下文章