共计 3129 个字符，预计需要花费 8 分钟才能阅读完成。
摘要： 明天来和大家分享无关 jQuery 框架中 DOM 操作的相干技术，又是一个堪称 DOM“全家桶”系列的解说，倡议珍藏关注认真学习！
本文分享自华为云社区《【JQuery 框架】超具体 DOM 操作看这一篇就够了！》，原文作者：灰小猿。
明天来和大家分享无关 jQuery 框架中 DOM 操作的相干技术， 又是一个堪称 DOM“全家桶”系列的解说，倡议珍藏关注认真学习！
一、内容操作
在进行内容操作时，对于设置和获取元素的内容应用同一个函数进行操作，设置元素内容时间接在函数中传入参数即可。
1. html()
作用： 获取 / 设置元素的标签体内容
// 获取 mydiv 的标签体内容
var divValue = $("#mydiv").html()
// 设置 mydiv 的标签体内容
var divValue = $("#mydiv").html(“你好”)2. text()
作用： 获取 / 设置元素的标签体纯文本内容
// 获取 mydiv 文本内容
var divText = $("#mydiv").text()
// 设置 mydiv 文本内容
var divText = $("#mydiv").text(“你好”)3. val()
作用： 获取 / 设置元素的 value 属性值
// 获取 myinput 的 value 值
var value = $("#myinput").val()
// 设置 myinput 的 value 值
var value = $("#myinput").val(“你好”)对于上述代码的理论演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function (){
// 获取 myinput 的 value 值
var value = $("#myinput").val()
// alert(value);
// 获取 mydiv 的标签体内容
var divValue = $("#mydiv").html()
alert(divValue);
// 获取 mydiv 文本内容
var divText = $("#mydiv").text()
// alert(divText)
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三" /><br />
<div id="mydiv"><p><a href="#"> 题目标签 </a></p></div>
</body>
</html>二、属性操作
（1）通用属性操作
1. attr():
作用： 获取 / 设置元素的属性
// 获取北京节点的 name 属性值
var bj = $("#bj").attr("name");
alert(bj);
// 设置北京节点的 name 属性的值为 dabeijing
$("#bj").attr("name", "dabeijing");
// 新增北京节点的 discription 属性 属性值是 didu
$("#bj").attr("discription", "didu");
// 删除北京节点的 name 属性并测验 name 属性是否存在 2. removeAttr()
作用： 删除属性
// 删除北京节点的 name 属性并测验 name 属性是否存在
$("#bj").removeAttr("name");3. prop()
作用： 获取 / 设置元素的属性
// 取得 hobby 的的选中状态
var hobby_type = $("#hobby").prop("checkbox");4. removeProp()
作用： 删除属性
// 删除 hobby 的 CheckBox 属性
var hobby_type = $("#hobby").removeProp("checkbox");5.attr 和 prop 区别
- 如果操作的是元素的固有属性，则倡议应用 prop
- 如果操作的是元素自定义的属性，则倡议应用 attr
（2）对 class 属性操作
1. addClass()
作用： 增加 class 属性值
//<input type="button" value="addClass" id="b2"/>
// 给 one 标签减少属性
$("#b2").click(function () {$("#one").addClass("second");
});2. removeClass()
作用： 删除 class 属性值 //<input type=
//<input type="button" value="removeClass" id="b3"/>
// 删除 one 标签的 class 属性
$("#b3").click(function () {$("#one").removeClass("second");
});3. toggleClass()
作用： 切换 class 属性
//<input type="button" value="切换款式" id="b4"/>
// 为 one 标签的 class 款式进行切换，有 class 属性就删除，没有就增加
$("#b4").click(function () {$("#one").toggleClass("second");
});在这里对该函数做一个具体的介绍：
如 toggleClass(“one”):
- 判断如果元素对象上存在 class=”one”，则将属性值 one 删除掉。如果元素对象上不存在 class=”one”，则增加
4. css()
作用： 批改元素属性
//<input type="button" value="通过 css() 取得 id 为 one 背景色彩" id="b5"/>
$("#b5").click(function () {var backgroundColor = $("#one").css("backgroundColor");
alert(backgroundColor);
});
//<input type="button" value="通过 css() 设置 id 为 one 背景色彩为绿色" id="b6"/>
$("#b6").click(function () {$("#one").css("backgroundColor","green")
});三、CRUD 操作
1. 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 外部，并且在结尾
5. after()
作用：增加元素到元素后边
样例：对象 1.after(对象 2)：将对象 2 增加到对象 1 后边。对象 1 和对象 2 是兄弟关系
6. before()
作用：增加元素到元素前边
样例：对象 1.before(对象 2)：将对象 2 增加到对象 1 前边。对象 1 和对象 2 是兄弟关系
7. insertAfter()
样例：对象 1.insertAfter(对象 2)：将对象 1 增加到对象 2 后边。对象 1 和对象 2 是兄弟关系
8. insertBefore()
样例：对象 1.insertBefore(对象 2)：将对象 1 增加到对象 2 前边。对象 1 和对象 2 是兄弟关系
9. remove()
作用：移除元素
样例：对象.remove(): 将对象删除掉
10. empty()
作用：清空元素的所有后辈元素。
样例：对象.empty(): 将对象的后辈元素全副清空，然而保留以后对象以及其属性节点
点击关注，第一工夫理解华为云陈腐技术~
