文章介绍了jQuery中的事件处理，如页面事件、鼠标事件、键盘事件，以及DOM操作，包括元素的创建、插入、删除、替换、遍历、样式和内容操作。还讲解了如何使用on、before、after、remove、toggleClass等方法，以及如何获取和设置元素属性、内容。
事件
页面事件
jQuery 中页面事件的语法格式如下：
jQuery 对象.事件名(事件处理函数)例如：
$(document).ready(function () {});
// 简写成
$(function () {});其中 $ 是 jQuery 对象的简写，$(document) 是把 dom 对象转换成 jQuery 对象。
页面事件用 ready 表示，它类似于 JavaScript 中的 onload 事件。但是 ready 要高级一点点，因为 ready 事件只等 dom 元素加载完毕即可执行内部代码，也就是说文档中引入的外部图片、 css 或者 js 文件就算没完成加载，该事件也可以执行，这个之前在第一章的面试题中已经说过，我们不再赘述。
了解了页面事件，接下来我们练一练吧！
页面事件的使用
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><scriptsrc="jquery-3.6.0.min.js"></script><title>页面事件</title><script>
$(document).ready(function () {
alert("欢迎来到蓝桥云课"); // 页面弹出警告框
});
</script></head><body></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
鼠标事件
鼠标事件是当鼠标处于某种状态会触发的事件。
鼠标事件有以下几种：
事件 | 说明 |
click | 单击左键事件。 |
mouseover | 鼠标移入事件。 |
mouseout | 鼠标移出事件。 |
mousedown | 鼠标按下事件。 |
mouseup | 鼠标松开事件。 |
mousemove | 鼠标移动事件。 |
onmousedown 事件会在鼠标按键被按下时发生。
与 onmousedown 事件相关连得事件发生次序（ 鼠标左侧/中间 按钮）：
onmousedown
onmouseup
onclick
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):
onmousedown
onmouseup
oncontextmenu
鼠标事件的使用
在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><scriptsrc="jquery-3.6.0.min.js"></script><title>鼠标事件</title><style>div {
width: 50px;
height: 50px;
margin-top: 20px;
border-radius: 100%;
border: 1px solid;
}
</style><script>
$(function () {
// 鼠标点击事件
$("#btn").click(function () {
alert("嘻嘻！欢迎到来");
});
// 鼠标移入
$("div")
.mouseover(function () {
$(this).css("background-color", "blue");
// 鼠标移除
})
.mouseout(function () {
$(this).css("background-color", "pink");
});
// 鼠标按下事件
$("p")
.mousedown(function () {
$(this).css("color", "blue"); // this 是指定的当前元素
})
.mouseup(function () {
$(this).css("color", "pink"); // this 是指定的当前元素
});
});
</script></head><body><div></div><inputtype="button"value="点我"id="btn" /><p>鼠标按下和抬起时会变色</p></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在我们的代码中，使用 $("div").mouseover 给 id 名为 item1 的元素设置鼠标移入事件，当鼠标移入该元素，元素会添加背景蓝色。
使用 mouseout 设置鼠标移出，元素背景颜色变为粉色。
使用 $("#btn").click 给 id 名为 btn 的元素设置点击事件，当点击该元素，跳出一个警告框。
使用 $("p").mousedown 设置鼠标按下事件，当按下该元素，p 元素的文字颜色变为蓝色。
使用 $("p").mousedown 设置鼠标按下事件，当按下该元素，p 元素的文字颜色变为粉色。
键盘事件
键盘事件有以下三种：
事件 | 说明 |
keydown | 键盘按下时触发。 |
keyup | 键盘松开时触发。 |
keypress | 事件会在键盘按键被按下并释放一个键时触发。 |
新建 index2.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><scriptsrc="jquery-3.6.0.min.js"></script><title>键盘事件</title><style>div {
color: coral;
}
</style><script>
$(function () {
// 键盘松开
$("#num").keyup(function () {
var limit = /^1[0-9]{10}$/; // 正则表达式，只能输入 11 位 0-9 之间的整数var value = $(this).val(); // 获取当前值if (limit.test(value)) {
// test 方法用来检查当前输入是否符合 limit 中正则表达式的要求
$("#div1").text("输入的手机号码符合要求!");
} else {
$("#div1").text("手机号码格式不正确");
}
});
// 键盘按下
$("#num").keydown(function () {
// 注意如果这里获取内容是获取的上一次文本框的内容 因为键盘并没有弹起 本次输入的内容还没有加入到文本框中console.log("正在输入"); // 同学们可以加入 + $(this).val() 进行测试
});
});
</script></head><body>
电话号码：<inputid="num"type="text" /><divid="div1"></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，当我们在输入框中输入字符时，会触发 keydown 事件打印“正在输入”。
当键盘松开，会触发 keyup 事件，我们使用正则表达式定义了输入框的输入规则，通过 val 获取当前输入，如果当前输入符合规则，则在输入框下方会显示文字“输入的电话号码符合要求!”，反之输入框下方会显示“手机号码格式不正确!”。
表单事件
表单事件是表单元素处于某种状态下会触发的事件。
常见的表单事件如下所示：
事件 | 说明 |
focus | 获得焦点时触发的事件。 |
blur | 失去焦点时触发的事件。 |
select | 选中单行或多行文本框会触发的事件。 |
change | 单选框、复选框、下拉列表框等选中项发生改变触发的事件。 |
聚焦与失焦
需求: 文本框获得焦点后清空，如果是用户输入的内容则不会清空）。移除焦点后如果文本框是空，则恢复成 “搜索一下，喜欢的课”。
新建一个 index3.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><scriptsrc="jquery-3.6.0.min.js"></script><title>focus 与 blur 事件</title><style>body {
text-align: center;
background-color: rgba(128, 128, 128, 0.05);
}
#search {
color: gray;
}
</style><script>
$(function () {
// 输入框获得焦点，让输入框的内容为空
$("#search").focus(function () {
if ($(this).val() === "搜索一下，喜欢的课程") {
$(this).val("");
}
});
// 输入框失去焦点，恢复原状
$("#search").blur(function () {
if ($(this).val().trim() == "") {
$(this).val("搜索一下，喜欢的课程");
}
});
});
</script></head><body><imgsrc="https://labfile.oss.aliyuncs.com/courses/3774/lanqiao.png"
/><br /><inputid="search"type="text"value="搜索一下，喜欢的课程" /><inputtype="button"value="搜索" /><br /><imgsrc="https://labfile.oss.aliyuncs.com/courses/3774/courses.png" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，当聚焦到搜索输入框时，会触发 focus 事件，输入框中的 value 被置为空；当移开鼠标，会触发 blur 事件，输入框失去焦点，value 又变成了 "搜索一下，喜欢的课程"。
select 事件
新建一个 index4.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><scriptsrc="jquery-3.6.0.min.js"></script><title>select 事件</title><style>textarea {
color: darkgray;
}
</style><script>
$(function () {
$("input").select(function () {
$(this).css("background-color", "#a1c2e2");
});
$("textarea").select(function () {
$(this).css("color", "#a1c2e2");
});
});
</script></head><body>
姓名：<inputtype="text"value="请输入你的姓名" /><br />
年龄：<inputtype="text"value="请输入你的年龄" /><br /><br /><textareacols="23"rows="6">自我介绍...</textarea></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，当我们选中输入框时，会触发 select 事件，输入框的背景颜色改变。
当我们选中多行文本框时，文本框中的字体颜色改变。
change 事件
新建 index5.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><scriptsrc="jquery-3.6.0.min.js"></script><title>change 事件</title><style></style><script>
$(function () {
$('input[type="radio"]').change(function () {
$("#item").text("你的爱好是：" + $(this).val());
$("#item").css("color", "blue");
});
});
</script></head><body><div><label><inputtype="radio"name="hobby"value="画画" />画画</label><label><inputtype="radio"name="hobby"value="游泳" />游泳</label><label><inputtype="radio"name="hobby"value="旅行" />旅行</label><label><inputtype="radio"name="hobby"value="摄影" />摄影</label><label><inputtype="radio"name="hobby"value="编程" />编程</label><label><inputtype="radio"name="hobby"value="其他" />其他</label></div><divid="item"></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面的代码中，当我们选中其中一个表单元素项时，会触发 change 事件，通过 $("#item").text() 我们可以在 id 名为 item 的元素中添加 text 方法括号里的内容。
通过 $(this).val() 我们可以获取当前选中表单选项的内容，最后使用 css 方法把元素的字设置为蓝色。
滚动事件
在 jQuery 中，使用 scroll 来绑定一个滚动事件。何为滚动事件呢？当文档通过鼠标发生滚动时，会触发的事件。
其使用格式如下所示：
jQuery对象.scroll(事件处理函数);了解了 scroll，接下来我们做一做练习吧！
scroll 的使用
新建 index6.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>滚动事件</title><style>div {
width: 250px;
height: 170px;
border: 2px solid black;
overflow: scroll;
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("div").scroll(function () {
$("strong").css("color", "blue");
$("div").css({
"border-color": "blue",
"box-shadow": "3px 3px 10px #D1D9D9",
});
});
// 给文档对象绑定滚动事件
$(document).scroll(function () {
var r = Math.random() * 255;
var g = Math.random() * 255;
var b = Math.random() * 255;
$("pre").css("color", `rgb(${r},${g},${b})`);
});
});
</script></head><body><div><strong>大熊猫（学名：Ailuropoda melanoleuca）</strong
>，也称作大猫熊，一般称为“熊猫”或“猫熊”，属于食肉目熊科的一种哺乳动物，体色为黑白两色。
熊猫是中国特有物种，现存的主要栖息地是中国中西部四川盆地周边的山区和陕西南部的秦岭地区。
全世界野生大熊猫现存大约有2060头。2016年末，<strong>世界自然保护联盟（IUCN）</strong>将大熊猫的受威胁等级从“濒危级”降为“易危级”。
</div><pre>
我
是
一
个
很
长
很
长
很
长
很
长
很
长
很
长
很
长
很
长
很
长
很
长
很
长
很
长
很
长
的
瀑
布
</pre>
</body></html>最后，开启 8080 端口，打开 Web 服务，我们可以看到如下效果：
拖动网页右侧滚动条可以看到文字在随机变色，效果如下：
从上面代码可以看出，当我们滚动页面或 div 中的内容时，会触发 scroll 事件。
使用 $("strong").css("color","#39A2DB") 给 strong 标签中的字设置字体颜色为蓝色。
使用 $("div").css({"border-color":"#39A2DB","box-shadow":"3px 3px 10px #D1D9D9"}) 给 div 元素设置边框颜色为蓝色，并设置了盒子阴影的效果。
绑定事件
在 jQuery 中，我们使用 on 或 bind 方法可以绑定一个或者多个事件。
其语法格式为：
jQuery对象.on(事件类型, 事件处理函数);或
jQuery对象.bind(事件类型, 事件处理函数);了解了这两种绑定事件的方式，我们来做一下练习吧。
绑定事件的使用
新建 index7.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>绑定事件</title><style>div {
width: 50px;
height: 50px;
background-color: #2e7aeb;
margin-left: 50%;
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
// 需求: 单击 div 显示 "欢迎来到蓝桥云课！"// 改为bind 绑定事件效果一样
$("div").on("click", function () {
alert("欢迎来到蓝桥云课！");
});
});
</script></head><body><div></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，我们使用 on 给 div 标签绑定了 click 事件，当点击页面上的 div 元素则会触发该事件，在页面上会弹出一个警告框，改为 bind 效果一样。具体这两种方式有什么区别，我们在本章的面试题中给大家解答。
我们再来看一个绑定两个事件的例子。
新建一个 index8.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>绑定多个事件</title><style>div {
width: 50px;
height: 50px;
background-color: #2e7aeb;
margin-left: 50%;
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
// 需求: 鼠标移入div变为绿色，鼠标移除时 div变为粉色// 改为 bind 效果一样
$("div").on("mouseover mouseout", function () {
if (event.type == "mouseover") {
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "pink");
}
});
});
</script></head><body><div></div></body></html>运行该程序，鼠标悬浮到 div 上后 div 变为绿色，鼠标移除时变为粉色。效果如下：
合成事件
合成事件就是一个事件来代表多个事件，例如：
我们可以使用 hover 方法来给元素同时绑定鼠标移入和移出的处理函数。即：
hover = mouseover + mouseout
其语法结构为：
jQuery对象.hover(mouseover的事件处理函数, mouseout的事件处理函数);函数 1 是鼠标移入事件会触发的处理函数；函数 2 是鼠标移出事件会触发的处理函数。
了解了合成事件，接下来我们做一下练习吧！
合成事件的使用
新建 index9.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>合成事件</title><style>div {
width: 50px;
height: 50px;
margin: 20px0050px;
text-align: center;
background-color: #24a9dd;
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("div").hover(
function () {
$(this).css("transform", "rotate(60deg)");
},
function () {
$(this).css("transform", "rotate(360deg)");
}
);
});
</script></head><body><div>旋转</div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，页面上会显示一个可旋转的 div 元素块，当我们把鼠标移到元素上，会触发鼠标移入事件，元素会旋转 60 度；当我们把鼠标移开目标元素，元素旋转 360 度，恢复原状。
自定义事件
自定义事件就是用户可以自己定义一个事件。在 jQuery 中，我们使用 on 方法来定义事件，然后通过 trigger 方法来触发该事件。
其语法格式为：
jQuery对象.on(事件类型, 处理函数); // bind 也可以
jQuery对象.trigger(事件类型);了解了什么是自定义事件，接下来我们练习一下吧！
自定义事件的使用
新建 index10.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>自定义事件事件</title><style>div {
width: 50px;
height: 50px;
background-color: #b8b5ff;
margin-left: 50%;
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
// 自定义一个名为 changecolor 的事件
$("div").on("changecolor", function () {
$(this).css("background-color", "#ffce89");
});
$("div").click(function () {
$("div").trigger("changecolor");
});
});
</script></head><body><div></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，我们定义了一个名为 changecolor 的事件，该事件可以实现给 div 元素设置背景颜色，当点击 div 元素时使用 trigger 方法触发了 changecolor 事件。
事件对象
事件对象的介绍
当事件发生时，我们会把该事件的详细信息记录在事件对象中，然后通过事件对象的属性来了解事件的相关信息。
在 jQuery 中，我们使用 event 来获取一个事件的信息。
属性 | 说明 |
type | 获取事件的类型。 |
target | 获取触发事件的元素。 |
which | 获取单击事件中鼠标的左、中、右键。 |
clientX、clientY | 获取鼠标相对于页面左上角的坐标。 |
pageX、pageY | 获取鼠标相对于页面左上角的坐标。（包括滚动条滚动的 x、y 轴距离） |
shiftKey | 判断是否按下 shift 键。 |
ctrlKey | 判断是否按下 ctrl 键。 |
altKey | 判断是否按下 alt 键。 |
keyCode | 获取按下键盘的键码值。 |
type 和 target 属性的使用
在 index1.html 文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>type 和 target 属性</title><scriptsrc="jquery-3.6.0.min.js"></script><style>body {
text-align: center;
}
</style><script>
$(function () {
$("#btn").click(function () {
alert("这是一个 " + event.type + " 事件");
$(event.target).css("background-color", "#99f3db"); // event.target 相当于 this
});
});
</script></head><body><inputid="btn"type="button"value="点击" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，当我们点击页面上的按钮，会触发 click 事件，通过使用 event.type，警告框中会输出当前触发事件的类型。
通过使用 event.target 会给当前触发该事件的目标元素设置背景颜色。
键盘操作
在 index2.html 文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>键盘操作</title><scriptsrc="jquery-3.6.0.min.js"></script><style>body {
text-align: center;
}
</style><script>
$(function () {
$("input").keydown(function (e) {
if (e.shiftKey || e.altKey || e.ctrlKey) {
$("div").text("不允许按下 shift/alt/ctrl 键");
$("div").css("color", "red");
} else {
alert(e.keyCode);
$("div").empty(); // empty 方法用于清空元素中的内容
}
});
});
</script></head><body><inputtype="text" /><div></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，页面上有一个输入框，当我们键入一些字符时，会触发 keydown 事件。
在函数中，我们使用 if(e.shiftKey || e.altKey || e.ctrlKey) 来判断输入的字符是否是 shift、alt、ctrl 键。
如果是 shift、alt、ctrl 键，则在输入框的下方显示红色的警告语，如果不是，则弹出提示框，通过使用 e.keyCode，在提示框中会显示当前的键值码。
DOM 操作
直接创建元素节点
使用格式如下所示：
$("<标签名></标签名>");在 index.html 文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>DOM 创建</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
width: 50px;
height: 50px;
margin-top: 20px;
background-color: cornflowerblue;
}
</style><script>
$(function () {
$("input").on("click", function () {
var div = $("<div></div>"); // 创建一个 div 元素
$("body").append(div); // 将创建的 div 元素放入 body 中
});
});
</script></head><body><inputid="btn"type="button"value="创建元素" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
点击页面上的按钮会触发 click 事件。
在函数中我们定义了一个名为 div 的变量，用来存储创建的 div 元素。
通过使用 append 方法，我们把创建的 div 元素添加到页面上了。
创建带有文本的元素节点
使用格式如下所示：
$("<标签名>文本内容</标签名>");新建 index1.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>DOM 创建</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
width: 100px;
height: 100px;
text-align: center;
border-radius: 20%;
margin-top: 20px;
background-color: rgb(100, 187, 237);
}
</style><script>
$(function () {
$("input").on("click", function () {
var div = $("<div>元素宝宝</div>"); // 创建带有文本的元素节点
$("body").append(div); // 将创建的 div 元素放入 body 中
});
});
</script></head><body><inputid="btn"type="button"value="创建元素" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
创建带有属性的元素节点
使用格式如下所示：
$("<标签名 属性='属性值'>文本内容</标签名>");新建 index2.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>DOM 创建</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
text-align: center;
border-radius: 100%;
margin-top: 20px;
}
</style><script>
$(function () {
$("input").on("click", function () {
var div = $(
"<div style='width:50px; height:50px; background-color: #ddffbc'>嗨</div>"
); // 创建带有属性的元素节点
$("body").append(div); // 将创建的 div 元素放入 body 中
});
});
</script></head><body><inputid="btn"type="button"value="创建元素" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
从上面举的三个例子中我们可以看出，创建一个元素很容易，只要把它存储到一个变量中，然后使用 append 方法添加到指定位置即可。append 是 DOM 操作中的一个，在这里我们先了解一下，后面的内容中我们会详细介绍。
元素的插入
在 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() 起到的作用是一样的，只不过使用格式是颠倒的。
新建 index3.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>prepend() 与 prependTo() 的使用</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
color: cornflowerblue;
}
</style><script>
$(function () {
// prepend 方法的使用
$("#div1").one("click", function () {
var $span = $("<span>欢迎来到</span>");
$("#div1").prepend($span);
});
// prependTo 方法的使用
$("#div2").one("click", function () {
var $span = $("<span>欢迎来到</span>");
$($span).prependTo("#div2");
});
});
</script></head><body><divid="div1">蓝桥云课</div><divid="div2">jQuery 学习</div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
从上面的例子中我们可以看出 prepend 方法 和 prependTo 方法起到的作用是一样的，但是两者的用法是颠倒的。
append() 与 appendTo()
append() 与 appendTo() 是在元素子级的尾部插入元素。
append 方法的语法格式为：
// 在 A 元素子级的最后面位置追加 B
$(A).append(B);这里的 A 是待插入的目标元素，B 是我们要插入的内容。
appendTo 方法的语法格式为：
// 在 A 元素子级的最后面位置追加 B
$(B).appendTo(A);这里的 B 是待插入的目标元素，A 是我们要插入的内容。
append 和 appendTo 起到的作用也是一样的，只不过使用格式是颠倒的。
新建 index4.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>append() 与 appendTo()的使用</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
color: cornflowerblue;
}
</style><script>
$(function () {
// append 方法的使用
$("#div1").one("click", function () {
var $span = $("<span>蓝桥云课</span>");
$("#div1").append($span);
});
// appendTo 方法的使用
$("#div2").one("click", function () {
var $span = $("<span>jQuery</span>");
$($span).appendTo("#div2");
});
});
</script></head><body><divid="div1">欢迎来到</div><divid="div2">欢迎学习</div></body></html>接着，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，我们使用 append 方法和 appendTo 方法分别给页面上的两对 div 元素的尾部插入新的元素，两个方法的使用也是颠倒的
before() 与 insertBefore()
before() 与 insertBefore() 是在该元素的前面插入元素。
before 方法的语法格式为：
// 在 A 的前面插入 B
$(A).before(B);insertBefore 方法的语法格式为：
// 在 A 的前面插入 B
$(B).insertBefore(A);before 和 insertBefore 方法的作用也是相同的，只是使用格式上是颠倒的。
新建 index5.html 文件，在文件中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>before() 与 insertBefore()</title><scriptsrc="https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js"></script><style>div {
border: 1px solid #000;
margin: 10px;
}
</style><script>
$(function () {
var i = 0;
var j = 0;
// before 的使用
$("#div1").click(function () {
i++;
var $div = $(`<div>我喜欢 jQuery${i}</div>`);
$("#div1").before($div);
});
// insertBefore 的使用
$("#div2").click(function () {
j++;
var $div = $(`<div>I like jQuery${j}</div>`);
$($div).insertBefore("#div2");
});
});
</script></head><body><divid="div1">before</div><divid="div2">insertBefore</div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面的代码中，我们点击 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 方法的作用也是相同的，只是使用格式上是颠倒的。
新建 index6.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>after() 与 insertAfter()</title><scriptsrc="https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js"></script><style>div {
border: 1px solid #000;
margin: 10px;
}
</style><script>
$(function () {
var i = 0;
var j = 0;
// after 的使用
$("#div1").click(function () {
i++;
var $div = $(`<div>我喜欢 jQuery${i}</div>`);
$("#div1").after($div);
});
// insertAfter 的使用
$("#div2").click(function () {
j++;
var $div = $(`<div>I like jQuery${j}</div>`);
$($div).insertAfter("#div2");
});
});
</script></head><body><divid="div1">after</div><divid="div2">insertAfter</div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，点击 after，使用 $("#after").after($div) 把待插入的 div 元素插入到 id 名为 after 元素外部的尾部。
点击 insertAfter，使用 $($div).insertAfter("#insertAfter") 把待插入的 div 元素插入到 id 名为 insertAfter 元素外部的尾部。
元素的删除
在 jQuery 中，删除元素常用的有如下两种方法：
remove()
empty()
remove 方法
remove 方法可以将指定的元素及其子元素删除。
其语法格式为：
$().remove();新建 index7.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>remove()</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
width: 100px;
height: 40px;
text-align: center;
margin-top: 20px;
background-color: cornflowerblue;
}
</style><script>
$(function () {
$("input").click(function () {
$("div").remove();
});
});
</script></head><body><div>remove me</div><inputtype="button"value="删除" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，我们点击页面上的删除按钮，会触发 click 事件，通过使用 remove 方法把页面上的 div 元素块给移除掉。
empty 方法
empty 方法是用来清空指定元素的后代元素和内容的。
其语法格式为：
$().empty();新建一个 index8.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>empty 的使用</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
width: 290px;
height: 150px;
text-align: center;
margin-top: 20px;
border: 1px solid #cee6b4;
}
</style><script>
$(function () {
$("div").click(function () {
$(this).empty();
});
});
</script></head><body><div><h3>四时田园杂兴</h3><p>谷雨如丝复似尘，煮瓶浮蜡正尝新。</p><p>牡丹破萼樱桃熟，未许飞花减却春。</p></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
元素的替换
replaceWith 方法和 replaceAll 方法都可以用来把指定元素替换成其他元素，只是在使用格式上有些差别。
其语法格式为：
// 将 A 替换为 B
$(A).replaceWith(B);
// 将 A 替换为 B
$(B).replaceAll(A);新建一个 index9.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>元素替换</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
width: 290px;
height: 150px;
text-align: center;
margin-top: 20px;
border: 1px solid #cee6b4;
}
</style><script>
$(function () {
$("div").click(function () {
var $poem1 = $("<p>柳花深巷午鸡声，桑叶尖新绿未成。</p>");
var $poem2 = $("<p>坐睡觉来无一事，满窗晴日看蚕生。</p>");
$("#poem1").replaceWith($poem1);
$($poem2).replaceAll("#poem2");
});
});
</script></head><body><div><h3>四时田园杂兴</h3><pid="poem1">谷雨如丝复似尘，煮瓶浮蜡正尝新。</p><pid="poem2">牡丹破萼樱桃熟，未许飞花减却春。</p></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
元素的遍历
在 jQuery 中，each 方法是用于元素遍历的。
其语法格式为：
$().each(function (index, element) {});each 方法会接收一个匿名函数作为参数，函数中的 index 表示元素的索引号；而函数中的 element 表示当前元素。
新建一个 index10.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>each 的使用</title><scriptsrc="jquery-3.6.0.min.js"></script><style>div {
display: inline-flex;
width: 50px;
height: 50px;
margin: 20px010px0;
border: 1px solid #78c4d4;
}
</style><script>
$(function () {
var colors = ["#ffc478", "#d3e0dc", "#fce2e1", "#aee1e1"];
$("div").click(function () {
$("div").each(function (index, element) {
$(this).css("background-color", colors[index]);
});
});
});
</script></head><body><div></div><div></div><div></div><div></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
attr 方法
attr 方法可以用来获取指定元素的属性值，也可以用来设置指定属性的属性值。
其语法格式为：
jQuery对象.attr("属性名"); // 获取属性
jQuery对象.attr("属性名", "属性值"); // 修改属性我们来举个例子～
新建一个 index11.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>attr 的使用</title><style>input {
width: 200px;
}
</style><scriptsrc="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><imgwidth="200px"height="150px"src="bird1.jpg" /><br /><inputtype="button"value="切换" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，页面上有一张图片和一个按钮。
当我们点击页面上的按钮时，会触发 click 事件，页面上会弹出警告框。
通过使用 $("img").attr("width") 会获取到图片的宽度，输出到警告框中。
通过使用 $("img").attr("src","bird2.jpg") 把 img 中原有 src 的属性值替换为 bird2.jpg 了。
removeAttr 方法的使用
removeAttr 方法可以删除指定元素的某个属性。
其语法格式为：
jQuery对象.removeAttr("属性名");新建一个 index12.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>removeAttr 的使用</title><style>body {
text-align: center;
}
input {
width: 200px;
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("input").click(function () {
alert("删除图片！！");
$("img").removeAttr("src"); // 删除 img 的 src 属性
});
});
</script></head><body><imgwidth="200px"height="150px"src="bird1.jpg" /><br /><inputtype="button"value="删除图片" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
点击页面上的删除按钮，会触发 click 事件，弹出警告框显示“删除图片！！”，使用 removeAttr("src") 移除 src 属性，移出之后，图片无法正常显示到图片上。
样式操作
这里给大家介绍四种样式操作的方法，分别是：
css 方法
addClass 方法
removeClass 方法
toggleClass 方法
css 方法的使用
css 方法可以用来获取指定属性的属性值，也可以用来设置属性值。
// 获取指定属性的属性值
$().css("属性名");
// 设置属性值
$().css("属性名", "属性值");新建一个 index13.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>css 方法的使用</title><style>div {
width: 100px;
height: 100px;
background-color: rgb(100, 198, 237);
}
input {
width: 100px;
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("div").click(function () {
alert("背景颜色为：" + $("div").css("background-color")); // 获取背景颜色的属性值
});
$("input").click(function () {
$("div").css("border", "4px solid #94ebcd"); // 给 div 元素添加一个边框
});
});
</script></head><body><div></div><br /><inputtype="button"value="添加边框" /></body></html>最后，8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，当我们点击「添加边框」的按钮时，会触发 $("input").click，给 div 元素块添加边框。
当我们点击 div 元素块时，会触发 $("div").click，页面上弹出警告框，通过 $("div").css("background-color") 可以获取到 div 元素的背景颜色编码值。
addClass 方法的使用
addClass 方法是用来添加类选择器的。
其使用格式为：
$().addClass("类名");新建一个 index14.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>addClass 方法的使用</title><style>div {
width: 100px;
height: 100px;
border-radius: 100px;
border: 1px solid #c7ffd8;
}
.circle {
background-image: radial-gradient(#ffe6e6, #c6c9ff, #8ad7c1);
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("div").click(function () {
$(this).addClass("circle"); // 给 div 添加一个 circle 选择器
});
});
</script></head><body><div></div></body></html>接着，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，点击页面上的圆环，触发 click 事件；通过使用 addClass 给圆环添加 class="circle" 的样式属性。
removeClass 方法的使用
removeClass 方法可以用来移除已有的类选择器。
其语法格式为：
$().removeClass("类名");新建一个 index15.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>removeClass 方法的使用</title><style>div {
width: 100px;
height: 100px;
border-radius: 100px;
border: 1px solid #c7ffd8;
}
.circle {
background-image: radial-gradient(#ffe6e6, #c6c9ff, #8ad7c1);
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("div").click(function () {
$(this).removeClass("circle"); // 移除类选择器
});
});
</script></head><body><divclass="circle"></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，当点击页面上的 div 元素，会触发 click 事件，通过 removeClass 会移除 class="circle" 的样式。
toggleClass 方法的使用
toggleClass 方法是用来切换类选择器的。
其使用格式为：
$().toggleClass("类名");新建一个 index16.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>toggleClass 方法的使用</title><style>div {
width: 100px;
height: 100px;
border-radius: 100px;
border: 1px solid #c7ffd8;
}
.circle {
background-image: radial-gradient(#ffe6e6, #c6c9ff, #8ad7c1);
}
.circle1 {
background-image: linear-gradient(#1687a7, #583d72, #b8de6f);
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("div").click(function () {
$(this).toggleClass("circle1");
});
});
</script></head><body><divclass="circle"></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
通过使用 toggleClass 让 div 元素的 circle1 样式在添加和移除之间切换，没有 circle1 这个类就加上，有则移除。
内容操作
本文会给大家介绍以下三种内容操作的方法：
html 方法
text 方法
val 方法
html 方法的使用
html 方法可用来获取 HTML 文档中指定元素内部的元素标签和标签中的内容，也可以给元素添加内容。
其语法格式为：
// 获取元素内容
$().html();
// 设置元素内容
$().html("内容");新建一个 index17.html 文件，在文件中写入以下内容。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>html 方法的使用</title><style>div {
width: 300px;
height: 150px;
margin-top: 10px;
text-align: center;
border: 1px solid rgb(27, 179, 128);
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("#poem1").click(function () {
alert($(this).html());
});
$("#poem2").click(function () {
$(this).html(
"<h3>客中行</h3><p>兰陵美酒郁金香，玉碗盛来琥珀光。</p><p>但使主人能醉客，不知何处是他乡。</p>"
);
});
});
</script></head><body><divid="poem1"><h3>山中问答</h3><p>问余何意栖碧山，笑而不答心自闲。</p><p>桃花流水窅然去，别有天地非人间。</p></div><divid="poem2"></div></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，点击第一个 div 元素，会弹出警告框，通过 html() 会获取该 div 元素中的子元素及内容。
当点击第二个 div 元素，通过使用 html() 会把 h3、p 元素中内容放入到该元素中。
text 方法的使用
text 方法可以获取指定标签里的文本，也可以为指定标签添加文本。
其语法格式为：
// 获取指定标签中的文本
$().text();
// 给指定标签设置文本
$().text("内容");新建一个 index18.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>text 方法的使用</title><style>div {
width: 300px;
height: 150px;
margin: 10px010px0;
text-align: center;
border: 1px solid rgb(27, 179, 128);
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("#poem1").click(function () {
alert($(this).text());
});
$("input").click(function () {
$("h3").text("山中问答");
});
});
</script></head><body><divid="poem1"><h3></h3><p>问余何意栖碧山，笑而不答心自闲。</p><p>桃花流水窅然去，别有天地非人间。</p></div><inputtype="button"value="添加标题" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
注意： html 方法和 text 方法的区别在于， html 方法是带着标签一起操作，而 text 方法操作的是标签里的文本。
val 方法的使用
val 方法用于获取表单元素的值，也可以给表单元素设置值。
新建一个 index19.html 文件，在文件中写入以下内容。
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>val 方法的使用</title><style>div {
width: 300px;
height: 150px;
margin: 10px010px0;
text-align: center;
border: 1px solid rgb(27, 179, 128);
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><script>
$(function () {
$("#get").click(function () {
alert($("#name").val());
});
$("#set").click(function () {
$("#phone").val("1234567");
});
});
</script></head><body><div><inputtype="text"value="请输入你的名字"id="name" /><inputtype="phone"id="phone" /></div><inputtype="button"value="获取名字"id="get" /><inputtype="button"value="设置电话"id="set" /></body></html>最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，点击「获取名字」的按钮，通过 $("#name").val() 可以获取输入框中的当前内容。
点击「设置电话」的按钮，通过 $("#phone").val("1234567") 可以给 id="phone" 元素里的输入框添加内容为 1234567。
实验总结
本节实验给大家介绍了几种常用的 DOM 操作。分别是：
节点的创建：使用 $() 来创建元素节点。
元素的插入：分为子级插入和同级插入。
子级插入方法，包括 prepend()、prependTo()、append()、appendTo()。
同级插入方法，包括 before()、insertBefore()、after()、insertAfter()。
元素的删除：使用 remove() 或者 empty() 方法可以删除元素。
元素的替换：使用 replaceWith() 或者 replaceAll() 可以替换元素。
元素的遍历：使用 each 可以遍历元素。
属性操作：使用 attr() 设置属性、获取属性和使用 removeAttr 删除属性。
样式操作：使用 css() 获取样式，使用 addClass() 添加样式，使用 removeClass() 移除样式，使用 toggleClass() 切换类选择器。
内容操作：使用 html() 获取指定元素内部的元素标签和标签中的内容 ，使用 text() 获取指定标签里的文本或者给指定标签添加文本，使用 val() 获取表单元素的值或者给表单元素设置值。
扫一扫
1651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
