「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」。

前言

大家好，我是程序猿小白 gw_Gw，很高兴能和大家一起学习进步。

以下内容部分来自于网络，如有侵权，请联系我删除，本文仅用于学习交流，不用作任何商业用途。

摘要

本文主要介绍Jquery的DOM操作。

JQueryDOM操作

首先我们要明白DOM操作其实就是就是对HTML元素本身或则元素属性进行操作。接下来我们就从操作的类型来介绍。

1.1 针对元素属性操作

1.1.1 通用属性

1. $("#id1").attr("a") 获取id=id1的元素的a属性。
2. $("#id1").attr("a","b") 设置id=id1的元素的a属性的值为b。
3. $("#id1").removeAttr("a") 删除id=id1的元素的a属性。
4. $("#id1").prop("value") 获取id=id1的元素的value属性。
5. $("#id1").prop("value","one") 设置id=id1的元素的value属性的值为one。
6. $("#id1").removeProp("value") 删除id=id1的元素的value属性。

attr()和prop()的区别：对于元素的自定义属性时使用attr，而对于元素本身所具有的属性时，使用prop。

1.1.2 class属性

1. $("#id1").addClass("id1") 设置id=id1的元素的class属性为id1。
2. $("#id1").removeClass("id1") 删除id=id1的元素的class属性值为id1的属性。
3. $("#id1").toggleClass("id1") 如果id=id1的元素的class属性为id1，则把该属性删除，如果不是id1，则设置为id1.即取相反属性。

1.2 针对元素操作

1. ("#A").append(("#B"))：把id为B的元素添加到A的子元素的末尾。即把B变为A的最后一个子元素。
2. ("#A").appendTo(("#B"))：把id为A的元素添加到B的子元素的末尾。即把A变为B的最后一个子元素。
3. ("#A").prepend(("#B"))：把id为B的元素添加到A的子元素的首部。即把B变为A的第一个子元素。
4. ("#A").prependTo(("#B"))：把id为A的元素添加到B的子元素的首部。即把A变为B的第一个子元素。
5. ("#A").after(("#B"))：把id为B的元素添加到A元素的后边。即把B变为A的相邻且B在A后面的兄弟元素。
6. ("#A").insertAfter(("#B"))：把id为A的元素添加到B元素的后边。即把A变为B的相邻且A在B后面的兄弟元素。
7. ("#A").before(("#B"))：把id为B的元素添加到A元素的前边。即把B变为A的相邻且B在A前面的兄弟元素。
8. ("#A").insertBefore(("#B"))：把id为A的元素添加到B元素的后边。即把A变为B的相邻且A在B后面的兄弟元素。
9. $("#A").remove() : 删除元素自身。
10. $("#A").empty(): 删除该元素的所有子元素。

1.3 针对元素内容操作

1. $("#A").val(): 获取id为A的元素的value值。
2. $("#A").html(): 获取id为A的元素的标签体内的所有内容。
3. $("#A").text(): 获取id为A的元素的标签体内的文本内容。

1.4 针对元素样式操作

$("#A").css("backgroundColor","pink"): 设置id为A的元素的背景颜色为pink。

小结

以上就是关于DOM操作的一些介绍，希望对读者有所帮助，如有不正之处，欢迎留言指正。