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都有效