DOM操作
DOM操作
一、节点的创建
对于 JavaScript 的繁琐步骤，我们的 jQuery 有自己的优化措施。通过使用 $() 来创建元素节点，常见的创建有以下三种。
直接创建元素节点
使用格式如下所示：
$("<标签名></标签名>");
相关信息
- 点击页面上的按钮会触发
click事件。 - 在函数中我们定义了一个名为
div的变量，用来存储创建的div元素。 - 通过使用
append方法，我们把创建的div元素添加到页面上了。
创建带有文本的元素节点
使用格式如下所示：
$("<标签名>文本内容</标签名>");
$(function () {
$("input").on("click", function () {
var div = $("<div>元素宝宝</div>"); // 创建带有文本的元素节点
$("body").append(div); // 将创建的 div 元素放入 body 中
});
});
创建带有属性的元素节点
使用格式如下所示：
$("<标签名 属性='属性值'>文本内容</标签名>");
二、元素的插入
在 jQuery 中，元素插入的方法有两类，分别是：
- 子级插入方法，包括
prepend()、prependTo()、append()、appendTo()。 - 同级插入方法，包括
before()、insertBefore()、after()、insertAfter()。
prepend与prependTo
prepend() 与 prependTo() 是在元素子级的首部插入元素。
prepend 方法的语法格式为：
// 在 A 元素的子级最前面的位置插入B
$(A).prepend(B);
prependTo 方法的语法格式为：
// 在 A 元素的子级最前面的位置插入B
$(B).prependTo(A);
提示
prepend() 与 prependTo() 起到的作用是一样的，只不过使用格式是颠倒的。
append与appendTo
append() 与 appendTo() 是在元素子级的尾部插入元素。
append 方法的语法格式为：
// 在 A 元素子级的最后面位置追加 B
$(A).append(B);
这里的 A 是待插入的目标元素，B 是我们要插入的内容。
appendTo 方法的语法格式为：
// 在 A 元素子级的最后面位置追加 B
$(B).appendTo(A);
这里的 B 是待插入的目标元素，A 是我们要插入的内容。
提示
append 和 appendTo 起到的作用也是一样的，只不过使用格式是颠倒的。
before与insertBefore
before() 与 insertBefore() 是在该元素的前面插入元素。
before 方法的语法格式为：
// 在 A 的前面插入 B
$(A).before(B);
insertBefore 方法的语法格式为：
// 在 A 的前面插入 B
$(B).insertBefore(A);
提示
before 和 insertBefore 方法的作用也是相同的，只是使用格式上是颠倒的。
相关信息
- 在上面的代码中，我们点击
before，触发点击事件，通过$("#before").before($div)我们把待插入的div元素插入到了 id 名为 before 的元素前面。 - 我们点击
insertBefore，触发点击事件，通过$($div).insertBefore("#insertBefore")我们把待插入的div元素插入到了 id 名为 insertBefore 的元素前面。
after与insertAfter
after() 与 insertAfter() 是在元素的后面插入元素。
after 方法的语法格式为：
// 在 A 的后面插入 B
$(A).after(B);
insertAfter 方法的语法格式为：
// 在 A 的后面插入 B
$(B).insertAfter(A);
after 和 insertAfter 方法的作用也是相同的，只是使用格式上是颠倒的。
三、元素的删除
在 jQuery 中，删除元素常用的有如下两种方法：
remove
remove 方法可以将指定的元素及其子元素删除。
其语法格式为：
$().remove();
提示
在上面代码中，我们点击页面上的删除按钮，会触发 click 事件，通过使用 remove 方法把页面上的 div 元素块给移除掉。
empty
empty 方法是用来清空指定元素的后代元素和内容的。
其语法格式为：
$().empty();
四、元素的替换
replaceWith 方法和 replaceAll 方法都可以用来把指定元素替换成其他元素，只是在使用格式上有些差别。
其语法格式为：
// 将 A 替换为 B
$(A).replaceWith(B);
// 将 A 替换为 B
$(B).replaceAll(A);
五、元素的遍历
在 jQuery 中，each 方法是用于元素遍历的。
其语法格式为：
$().each(function (index, element) {});
each 方法会接收一个匿名函数作为参数，函数中的 index 表示元素的索引号；而函数中的 element 表示当前元素。
六、属性操作
attr 方法
attr 方法可以用来获取指定元素的属性值，也可以用来设置指定属性的属性值。
其语法格式为：
jQuery对象.attr("属性名"); // 获取属性
jQuery对象.attr("属性名", "属性值"); // 修改属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>attr 的使用</title>
<style>
input {
width: 200px;
}
</style>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("input").click(function () {
//1. 使用 attr 方法来获取 width 的属性值
alert("图片的宽为：" + $("img").attr("width"));
// 2.使用 attr 方法来修改 src 的属性值
$("img").attr("src", "bird2.jpg");
// 3. attr 可以传入 json 来同时修改多个属性
$("img").attr({ src: "bird2.jpg", width: "400px", height: "300px" });
});
});
</script>
</head>
<body>
<img width="200px" height="150px" src="bird1.jpg" /><br />
<input type="button" value="切换" />
</body>
</html>
removeAttr 方法的使用
removeAttr 方法可以删除指定元素的某个属性。
其语法格式为：
jQuery对象.removeAttr("属性名");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>removeAttr 的使用</title>
<style>
body {
text-align: center;
}
input {
width: 200px;
}
</style>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("input").click(function () {
alert("删除图片！！");
$("img").removeAttr("src"); // 删除 img 的 src 属性
});
});
</script>
</head>
<body>
<img width="200px" height="150px" src="bird1.jpg" /><br />
<input type="button" value="删除图片" />
</body>
</html>
点击页面上的删除按钮，会触发 click 事件，弹出警告框显示“删除图片！！”，使用 removeAttr("src") 移除 src 属性，移出之后，图片无法正常显示到图片上。
七、样式操作
css 方法的使用
css 方法可以用来获取指定属性的属性值，也可以用来设置属性值。
// 获取指定属性的属性值
$().css("属性名");
// 设置属性值
$().css("属性名", "属性值");
$(function () {
$("div").click(function () {
alert("背景颜色为：" + $("div").css("background-color")); // 获取背景颜色的属性值
});
$("input").click(function () {
$("div").css("border", "4px solid #94ebcd"); // 给 div 元素添加一个边框
});
});
addClass 方法的使用
addClass 方法是用来添加类选择器的。
其使用格式为：
$().addClass("类名");
$(function () {
$("div").click(function () {
$(this).addClass("circle"); // 给 div 添加一个 circle 选择器
});
});
removeClass 方法的使用
removeClass 方法可以用来移除已有的类选择器。
其语法格式为：
$().removeClass("类名");
toggleClass 方法的使用
toggleClass 方法是用来切换类选择器的。
其使用格式为：
$().toggleClass("类名");
提示
通过使用 toggleClass 让 div 元素的 circle1 样式在添加和移除之间切换，没有 circle1 这个类就加上，有则移除。
八、内容操作
html 方法的使用
html 方法可用来获取 HTML 文档中指定元素内部的元素标签和标签中的内容，也可以给元素添加内容。
其语法格式为：
// 获取元素内容
$().html();
// 设置元素内容
$().html("内容");
相关信息
- 在上面代码中，点击第一个
div元素，会弹出警告框，通过html()会获取该div元素中的子元素及内容。 - 当点击第二个
div元素，通过使用html()会把h3、p元素中内容放入到该元素中。
text 方法的使用
text 方法可以获取指定标签里的文本，也可以为指定标签添加文本。
其语法格式为：
// 获取指定标签中的文本
$().text();
// 给指定标签设置文本
$().text("内容");
注意
html 方法和 text 方法的区别在于，html 方法是带着标签一起操作，而 text 方法操作的是标签里的文本。
val 方法的使用
val 方法用于获取表单元素的值，也可以给表单元素设置值。
相关信息
- 在上面代码中，点击「获取名字」的按钮，通过
$("#name").val()可以获取输入框中的当前内容。 - 点击「设置电话」的按钮，通过
$("#phone").val("1234567")可以给id="phone"元素里的输入框添加内容为 1234567。