jquery dom解析html,jQuery操作DOM元素详解

jQuery操作DOM元素详细方法总结。

一、属性操作

1.使用attr()

获取: 对象.attr(“属性名”) //返回当前属性值，底层使用的是getAttribute

注意：此种方式不能获取value属性的实时数据，使用对象名.val()进行获取

修改：对象.attr(“属性名”,”属性值”);

删除：removeAttr(“属性名”) ：删除该属性的值

2.使用prop()

使用方法同attr()一致，底层是property

3.attr和prop区别

* 如果操作的是元素的固有属性，则建议使用prop，某些特定属性attr获取不到

* 如果操作的是元素自定义的属性，则建议使用attr

二、内容操作

获取：

1. html(): 获取元素内的标签体内容 ，底层调用的innerHTML

2. text(): 获取元素的标签体纯文本内容 ，底层调用的innerText

3. val()： 获取元素的value属性值

修改：

1. html(“新的内容”):  新的内容会将原有内容覆盖，HTML标签会被解析执行

2. text(“新的内容”):  新的内容会将原有内容覆盖，HTML标签不会被解析执行

3. val(“新的内容”)： 设置元素的value属性值

三、样式操作

1、使用css()

对象.css(“属性名”)    //返回当前属性的样式值

对象.css(“属性名”,”属性值”) //增加、修改元素的样式

对象.css({“样式名”:”样式值”,”样式名”:”样式值”……})//使用json传参，提升代码书写效率。

2、使用addClass()

对象.addClass(“类选择器名”)    //追加一个类样式

对象.removeClass(“类选择器名”)    //删除一个指定的类样式

对象.toggleClass(“类选择器名”): //切换class属性

* toggleClass(“one”):

* 判断如果元素对象上存在class=”one”，则将属性值one删除掉。  如果元素对象上不存在class=”one”，则添加

四、文档结构操作

内部插入

append():父元素将子元素追加到末尾

* 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾

2. prepend():父元素将子元素追加到开头

* 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头

3. appendTo():

* 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾

4. prependTo()：

* 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

外部插入

1. after():添加元素到元素后边

* 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系

2. before():添加元素到元素前边

* 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

3. insertAfter()

* 对象1.insertAfter(对象2)：将对象1添加到对象2后边。是兄弟关系

4. insertBefore()

* 对象1.insertBefore(对象2)： 将对象1添加到对象2前边。是兄弟关系

包裹

1.wrap(对象|html):将每个匹配元素用指定对象或html包裹起来

* $(“p”).wrap(“”); //将所有p标签用html包裹

2.unwrap():将元素取消一层包裹，即删除了直接父标签

* 对象.unwrap()   //删除了对象的父元素

3.wrapAll(对象|html):将匹配的元素用一个对象或html包裹起来

* $(“p”).wrapAll(“”); //用一个div包裹所有匹配的p标签

4.wrapInner(对象|html): 将元素的内容用对象或html包裹起来

* $(“p”).wrapInner(“”);//所有p标签内的每个子内容加粗

替换

1.replaceWith(对象|html):将所有匹配的元素(包含内容)替换成指定的HTML或DOM元素

$(“p”).replaceWith(“hehe“);//所有p标签换成加粗的hehe

2.replaceAll(对象|html):用指定的HTML或DOM元素替换所有匹配的元素(包含内容)

$(“.re”).replaceAll( $(“p”));//所有p标签换成re对象

删除

remove(【exp】):移除元素，可用表达式指定对象

* 对象.remove():将对象删除掉

* $(“p”).remove($(“.a”)) 删除所有类名有a的p标签

2. empty():清空元素的所有后代元素和文本。

* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性

复制

clone() ：复制该元素，其他文档操作结果都是剪切效果

* $(“b”).clone().prependTo($(“p”)); 将b复制一份到p标签前边，原b标签不变