JQuery DOM操作（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/u014736082/article/details/91358232

本文深入讲解了DOM操作的各个方面，包括内容操作(html(), text(), val())、属性操作(attr(), prop(), removeAttr(), removeProp())、类操作(addClass(), removeClass(), toggleClass())以及元素的增删查改操作(append(), prepend(), after(), before(), insertAfter(), insertBefore(), remove(), empty())，为读者提供了全面的DOM操作指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器 DOM操作

一、内容操作

1.html():获取/设置元素的标签体内容 <a>内容</a> --> 内容

2.text():获取/设置元素的标签体纯文本内容<a>内容</a> --> 内容

3.val():获取/设置元素的value的值

二、属性操作

<script>
	$(function(){
	$("#btn").click(){
		var name = $("#bj").attr("name");
		$("#bj").attr("name","Beijing");//设置属性值
	}）；
});
</script>

1.通用属性操作

attr():获取、设置元素的属性

var name = $("#bj").attr("name");
$("#bj").attr("name","Beijing");//设置属性值

removeAttr()：删除属性

$("#bj").removeAttr();//非固有属性，选择removeAttr,也可以使用prop

prop()：获取、设置元素的属性值

var checked = $("#hobby").prop();// <option>标签不能使用 attr();

removeProp():删除属性
```
$("#hobby").removeProp();
```

attr和prop的区别：

如果操作的是元素的固有属性，则建议使用prop.(w3c定义的属性)

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

2.对class属性操作

addClass:添加class属性值

$("#one").prop("class","second");
$("#one").addClass("second");

removeClasss():删除class属性值

$("#one").removeClass("second");

toggleClass():切换class属性值

$("#one").toggleClass("second");

toggleClass("one");：判断如果元素对象上存在Class=“one”，则将属性值one删除掉，否则添加属性值one

三、CRUD操作

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

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

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

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

3.appendTo():

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

4.prependTo():

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

5.after():添加元素到元素后面

对象1.after(对象2)：将对象2添加到对象1后面。两者是兄弟关系

6.before():添加元素到元素前面

对象1.before(对象2)：将对象2添加到对象1前面。两者是兄弟关系

7.insertAfter():

对象1.insetAfter(对象2)：将对象2添加到对象1后面。两者是兄弟关系

8.insertBefore():

对象1.insertBefore(对象2)：将对象2添加到对象1前面，两者是兄弟关系

9.remove：移除元素

10.empty（）：清空元素的所有后代元素

对象.empty():将对象的所有后代元素全部清空，但是保留档期对象及其属性节点。