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操作的主要内容,如果未能解决你的问题,请参考以下文章

jquery中的DOM操作

jQuery中的DOM操作

jQuery操作DOM

JQuery中的DOM操作

JQuery中的DOM操作

浅谈JQuery中的DOM操作