# 认识 jQuery
jQuery 是 JavaScript 的一个库，它提供了丰富的 API，简化了我们的代码。
知识点
- jQuery 库的引入
- Hello jQuery
# Hello jQuery
通常情况下，我们需要去 jQuery 官方网站下载最新 jQuery 库的版本。在实验中，已经为大家准备好了，同学们使用以下命令即可下载该库到环境中。
wget https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js |
获取库之后，我们使用 script 标签在 index.html 文件中引入 jQuery 库。
当然同学们也可以不下载 jQuery 文件，使用链接直接引入，使用方法如下所示：
<script src="https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js"></script> |
在往后的学习中，同学们可以选择自己喜欢的方式引入。
准备工作已经做好，那么我们使用 jQuery 语法在页面上输出一句话看看我们引入的 jQuery 库是否有效。
在 index.html 文件中，写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>Hello jQuery</title> | |
<script> | |
$(document).ready(function () { | |
$("body").html("Hello jQuery!"); | |
}); | |
</script> | |
</head> | |
<body></body> | |
</html> |
右击鼠标，选择 Open with Live Server 来开启 8080 端口。
页面打开，可看到如下实验效果。
# 基本选择器
本节实验会给大家介绍 jQuery 中的几种基本选择器。
知识点
- 元素选择器
- ID 选择器
- 类选择器
- 群组选择器
- 通配符选择器
# 元素选择器
元素选择器也叫做标签选择器，就是通过标签名来选择元素。还记得我们在 CSS 中使用元素选择器的格式吗？如下所示：
元素名 { | |
} |
但在 jQuery 中可不是这样使用的哦！jQuery 中元素选择器的语法格式如下：
$("元素名"); |
$ 符号是 jQuery 对象的简写。
给大家介绍了元素选择器，我们接下来做一做练习吧！
# 带有边框的文本
首先，打开你们的线上环境，新建一个 index.html 文件，然后使用 ! 生成代码模版。
然后，使用以下命令获取 jQuery 库。保存了环境的同学，请忽略此步骤。
wget https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js |
接着，在 index.html 文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>元素选择器</title> | |
<script> | |
$(function () { | |
$("div").css("color", "blue"); // 设置 div 标签中的字体颜色为蓝色 | |
$("div").css("text-align", "center"); // 设置 div 标签中的字居中 | |
$("div").css("width", "100px"); // 设置 div 元素的宽度为 100 个像素 | |
$("div").css("height", "50px"); // 设置 div 元素的高度为 50 个像素 | |
$("div").css("border", "1px solid yellow"); // 设置 div 元素的边框样式 | |
}); | |
</script> | |
</head> | |
<body> | |
<div>蓝桥云课</div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
从上面内容我们可以看到，主要的代码是写在 $(function(){}) 中，它的意思是当文档加载完后执行它内部的代码。
在 $("div") 后面的 css 是用来修改样式的方法，使用方式如下：
jQuery对象.css("属性名", "属性值"); // 例如修改 width、height 等 |
属性必须用双引号括起来。
# ID 选择器
ID 选择器是用来选择指定 id 名的元素的。要使用 ID 选择器，首先我们需要给元素设置一个 id，使用格式如下：
<标签名 id="id名"></标签名> |
定义 id 之后，我们才可以用 jQuery 语法来指定含有该 id 选择器的元素，其语法格式为：
$("#id名"); |
给大家介绍了元素选择器，我们接下来做一做练习吧！
# 渲染页面部分文字
新建 index1.html 文件，在文件中写入以下内容。
<pre><br class="Apple-interchange-newline"/></pre>
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>id 选择器</title> | |
<script> | |
$(function () { | |
$("#test").css("color", "blue"); | |
}); | |
</script> | |
</head> | |
<body> | |
<span id="test">蓝桥云课</span> | |
<span>是国内领先的 IT 在线编程及在线实训学习平台。</span> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，我们在 body 中定义了两对 span 标签，其中一对标签里定义了一个名为 test 的 id 选择器，使用 jQuery 语法 $("#test").css("color","blue") ，给 id 名为 test 的 span 标签设置字体颜色为蓝色。
# 类选择器
类选择器就是选择指定类名的元素。要使用类选择器，首先我们需要给元素设置一个 class，使用格式如下：
<标签名 class="类名"></标签名> |
定义 class 之后，我们才可以用 jQuery 语法来指定含有该类选择器的元素，其语法格式为：
$(".类名"); |
给大家介绍了类选择器，我们接下来做一做练习吧！
# 类选择器的使用
新建 index2.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>类选择器</title> | |
<script> | |
$(function () { | |
$(".test").css({ | |
color: "blue", | |
width: "200px", | |
height: "80px", | |
border: "2px solid yellow", | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div class="test"> | |
<span>蓝桥云课是国内领先的 IT 在线编程及在线实训学习平台。</span> | |
</div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，给 div 标签设置了一个名为 test 的类选择器，通过使用该类选择器我们设置了字体颜色、边框、长和宽等属性样式。
同学们是否注意到，在之前的实验中，我们只在 css 中写了一个样式属性，格式如下：
jQuery对象.css("属性名", "属性值"); |
但是当我们修改多个属性时，如果使用上述方式就需要调用多次 css 方法，比较麻烦。有没有一种方式是可以同时修改元素的多个属性呢？
答案是有的。就像上述代码中，可以给 css 方法传入一个 json 对象，这样就可以同时修改多个属性了，语法如下：
$().css({"属性1":"属性值1","属性2":"属性值2"...}) |
属性名是可以加上双引号的，有些属性名中含有短横杠，此时最好就加上
类选择器除了上述这种用法，我们还可以使用「标签名。类名」的方式
上面的属性可使用引号，也可以不使用引号。
我们修改一下 index2.html 文件的代码，如下所示：
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>类选择器</title> | |
<script> | |
$(function () { | |
$("div.test").css({ | |
color: "blue", | |
width: "200px", | |
height: "80px", | |
border: "2px solid yellow", | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div class="test"> | |
<span>蓝桥云课是国内领先的 IT 在线编程及在线实训学习平台。</span> | |
</div> | |
</body> | |
</html> |
$('div.test') 表示获取 class 值为 test 的 div 标签。
# 群组选择器
群组选择器可以让我们同时定义多个选择器，多个选择器之间用 , 号隔开，最终返回一个 jQuery 对象，该对象中包含了这些选择器选中的全部元素。
其语法格式为：
$("选择器1, 选择器2,..."); |
元素选择器、类选择器、ID 选择器都可以组合在一起。
# 群组选择器的使用
新建 index3.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>群组选择器</title> | |
<script> | |
$(function () { | |
$("h3,span").css("color", "blue"); | |
}); | |
</script> | |
</head> | |
<body> | |
<h3>欢迎选择蓝桥云课</h3> | |
<span>蓝桥云课是国内领先的 IT 在线编程及在线实训学习平台。</span> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面的代码中，我们在 body 中有 h3 和 span 两对标签，使用 jQuery 语法中的群组选择器给 h3 和 span 标签中的文字内容设置了相同的字体颜色。
当然群组选择器中也可以使用其他任意的选择器，例如 ID 选择器、类选择器等，不一定只能使用元素选择器。
# 通配符选择器
通配符选择器就是可以设置全局样式的选择器，通俗来讲就是文档中的所有元素都要接受该规则。
在 jQuery 中，我们用 * 表示通配符选择器，使用格式如下所示：
$("*"); |
了解了什么是通配符选择器，接下来我们就做一做练习吧！
新建 index4.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>通配符选择器</title> | |
<style> | |
div { | |
width: 200px; | |
height: 150px; | |
border: 1px solid; | |
margin-top: 10px; | |
} | |
</style> | |
<script src="jquery-3.6.0.min.js"></script> | |
<script> | |
$(function () { | |
$("*").css({ "list-style": "none", color: "#b6c967" }); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="list1"> | |
<ul> | |
水果： | |
<li>苹果</li> | |
<li>李子</li> | |
<li>西瓜</li> | |
</ul> | |
</div> | |
<div id="list2"> | |
<ul> | |
蔬菜： | |
<li>西红柿</li> | |
<li>大白菜</li> | |
<li>小米辣</li> | |
</ul> | |
</div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，我们使用 $("*").css({"list-style":"none","color":"#b6c967"}) 给页面设置通用样式：去掉列表样式和设置字体颜色为绿色。
# 层次选择器
知识点
- 后代选择器
- 子代选择器
- 兄弟选择器
- 相邻选择器
# 后代选择器
后代选择器，听其名字我们应该可以猜到是用来选择某元素的后代元素，对的，它就是对指定元素内部中的后代元素进行操作。回忆一下，我们在 CSS 中的写法如下。
M N { | |
} | |
/* 其中 N 是 M 的后代元素 */ |
在我们的 jQuery 中，后代选择器的使用格式如下：
$("M N"); | |
// 其中 N 是 M 的后代元素 |
注意：这里的后代 N 指的不仅仅是 M 的子代，而是 M 所有能够匹配的后代元素。
# 后代选择器的使用
首先，打开你们的线上环境，新建一个 index.html 文件，然后使用快捷键生成模版。
在 index.html 文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>后代选择器</title> | |
<script> | |
$(function () { | |
$("#father p").css("color", "blue"); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="father"> | |
<p>Hello</p> | |
<p>lan qiao</p> | |
<div id="child"> | |
<p>我是蓝桥云课</p> | |
</div> | |
</div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在
body标签中，我们创建了一个 id 名为 father 的div元素，在其中包含两个p元素，和一个 id 名为 child 的div标签。 - 在 id 名为 child 的
div标签中又创建了一个p标签。 - 我们使用
$("#father p")来选择 id 名为 father 的div元素中的所有后代p元素。 - 从实验效果图中，我们可以看出这三个
p元素都被选中了，这也说明了该选择器可以选择出某个元素下符合要求的后代元素（包含儿子、孙子、重孙子等）。
# 子代选择器
子代选择器也是一种后代选择器，它与我们之前学的后代选择器有所不同，它只能对指定标签的子代元素进行操作。
在 jQuery 中，子代选择器的使用格式如下：
$("M>N"); |
接下来我们做一下练习吧！
# 子代选择器的使用
新建 index1.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>子代选择器</title> | |
<script> | |
$(function () { | |
$("#father>p").css("color", "blue"); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="father"> | |
<p>Hello</p> | |
<p>lan qiao</p> | |
<div id="child"> | |
<p>我是蓝桥云课</p> | |
</div> | |
</div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
从上面的代码和截图效果可以看出，我们使用 "#father>p" 只选择出 "id="father" 的子代 p 元素，即儿子节点，这就是它和后代选择器的区别。
# 兄弟选择器
兄弟选择器是查找元素的兄弟节点（即同级节点）从而进行操作。
其语法格式为：
$("M~N"); |
了解了兄弟选择器，接下来我们来做练习吧！
# 兄弟选择器的使用
新建 index2.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>兄弟选择器</title> | |
<script> | |
$(function () { | |
$("#child~p").css("color", "blue"); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="father"> | |
<p>Hello</p> | |
<p>lan qiao</p> | |
<div id="child"></div> | |
<p>我是蓝桥云课</p> | |
<p>我是蓝桥云课</p> | |
<p>我是蓝桥云课</p> | |
</div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
从上面效果图中可以看出，位于 ID 选择器 child 之后的 p 元素中文字的颜色都被改变了，这说明 #child~p 能够选择指定元素后面的所有兄弟元素。
# 相邻选择器
在前面我们讲的 $("#child~p") 可以选择指定元素后面的所有兄弟 p 元素，而相邻选择器只能选到指定元素的邻居兄弟元素。
其使用格式为：
$("M+N"); // 选择下一个兄弟节点 N |
了解了相邻选择器，接下来我们就用它来做练习吧！
# 相邻选择器的使用
新建 index3.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>相邻选择器</title> | |
<script> | |
$(function () { | |
$("#child+p").css("color", "blue"); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="father"> | |
<p>Hello</p> | |
<p>lan qiao</p> | |
<div id="child"></div> | |
<p>我是蓝桥云课</p> | |
<p>我是蓝桥云课</p> | |
<p>我是蓝桥云课</p> | |
</div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，我们使用相邻选择器给 id 名为 child 的 div 元素的下一个兄弟节点 p 元素设置了字体颜色。
# 属性选择器
# 属性选择器的介绍
属性选择器就是根据属性来选择元素，其中我们可以使用正则表达式中的一些符号来选择带有某些属性值的元素。
常见的属性选择器如下表所示：
| 选择器 | 说明 |
|---|---|
E[attr] | 对带有 attr 属性的 E 元素进行操作。 |
E[attr="value"] | 对 attr 值等于 value 的 E 元素进行操作。 |
E[attr !="value"] | 对 attr 值不等于 value 的 E 元素进行操作。 |
E[attr ^="value"] | 对带有 attr 属性，其属性值以 value 字符串开头的 E 元素进行操作。 |
E[attr $="value"] | 对带有 attr 属性，其属性值以 value 字符串结尾的 E 元素进行操作。 |
E[attr *="value"] | 对带有 attr 属性，其属性值包含 value 字符串的 E 元素进行操作。 |
E[attr ~="value"] | 对带有 attr 属性，其属性值为 value 或者包含 value 的 E 元素进行操作。 |
E[attr \|="value"] | 对带有 attr 属性，其属性值为 value 和以 value- 开头的 E 元素进行操作。 |
# 属性选择器的使用
在 index.html 文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>属性选择器</title> | |
<script> | |
$(function () { | |
$("div[id]").css("font-size", "30px"); | |
$("div[id='item2']").css("color", "blue"); | |
$("div[id !='item2']").css("text-shadow", "2px 2px 2px #78c4d4"); | |
$("body[class ^='c']").css("text-align", "center"); | |
}); | |
</script> | |
</head> | |
<body class="content"> | |
<div id="item1">蓝桥云课</div> | |
<div id="item2">蓝桥云课</div> | |
<div class="test1">蓝桥云课</div> | |
<div class="test2">蓝桥云课</div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面代码中，
div[id]选择了带有 ID 选择器的元素。 div[id='item2']选择了 id 名为 item2 的元素。div[id !='item2']选择了 id 名不为 item2 的元素。body[class ^='c']选择了 class 名以 c 开头的元素。
类名和 id 名都是属性，所以方括号前面只能是标签名了。
# 伪类选择器
知识点
- 位置伪类选择器
- 可见性伪类选择器
- 内容伪类选择器
- 表单伪类选择器
- 表单对象属性选择器
# 位置伪类选择器
所谓位置伪类选择器就是通过元素的位置来进行选择，比如我们可以选择指定第 n 个位置的元素等。
常见的位置伪类选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :first | 选取指定元素的第一个该元素。 |
| :last | 选取指定元素的最后一个该元素。 |
| :odd | 选取指定元素序号为奇数的所有该元素。 |
| :even | 选取指定元素序号为偶数的所有该元素。 |
| :eq(n) | 选取指定元素的第 n 个该元素。 |
| :lt(n) | 选择指定元素中小于 n 的所有该元素。 |
| :gt(n) | 选取指定元素中大于 n 的所有该元素。 |
# 位置伪类选择器的使用
在 index.html 文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>位置伪类选择器</title> | |
<script> | |
$(function () { | |
$("li:first").css("color", "#a7c5eb"); | |
$("li:last").css("color", "#ffc478"); | |
$("li:odd").css("color", "#c1a1d3"); | |
$("li:even").css("font-size", "25px"); | |
$("li:eq(4)").css("text-shadow", "2px 2px 2px #96bb7c"); | |
// $("li:lt(4)").css("text-shadow","2px 2px 2px #96bb7c"); | |
// $("li:gt(4)").css("text-shadow","2px 2px 2px #96bb7c"); | |
}); | |
</script> | |
</head> | |
<body> | |
水果清单： | |
<ul> | |
<li>苹果</li> | |
<li>梨子</li> | |
<li>葡萄</li> | |
<li>西瓜</li> | |
<li>樱桃</li> | |
<li>草莓</li> | |
<li>桑葚</li> | |
</ul> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面的代码中，我们使用
li:first选择了第一个列表项。 - 使用
li:last选择了最后一个列表项； - 使用
li:odd选择了下标为奇数的列表项。 - 使用
li:even选择了下标为偶数的列表项。 - 使用
li:eq(4)选择了下标为 4 的列表项元素。（下标从 0 开始） - 使用
li:lt(4)选择了索引下标小于 4 的列表项元素。（下标从 0 开始） - 使用
li:gt(4)选择了索引下标大于 4 的列表项元素。（下标从 0 开始）
# 可见性伪类选择器
所谓可见性伪类选择器，是针对元素在页面上显示或者隐藏而言的。
可见性伪类选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :visible | 选取所有可见元素。 |
| :hidden | 选取所有不可见元素。 |
# 可见性伪类选择器的使用
新建 index1.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>可见性伪类选择器</title> | |
<style> | |
/* 不可见元素 */ | |
.select1 { | |
display: none; /* 元素隐藏 */ | |
} | |
</style> | |
<script> | |
$(function () { | |
$("#btn1").click(function () { | |
$("div:hidden").css("display", "block"); /* 让隐藏元素显示到页面上 */ | |
}); | |
$("#btn2").click(function () { | |
$("div:visible").css("color", "blue"); /* 改变显示元素的字体颜色 */ | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div class="select1">🌝</div> | |
<div class="select2">Hello</div> | |
<input id="btn1" type="button" value="显示" /> | |
<input id="btn2" type="button" value="变色" /> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面代码中，我们把
class=select1的 div 元素通过 display 属性设置为页面上不可见。 - 当点击显示按钮时，隐藏元素会显示到页面上，因为我们通过使用
div:hidden能够选择到被隐藏元素，设置它为可见，这样就成功显示到页面上了。 - 点击第二个按钮，触发
$("#btn2").click(function()执行内部代码，我们通过使用div:visible给页面上可见元素的字颜色设置为蓝色。
# 内容伪类选择器
所谓内容选择器就是根据元素的内容来选择的。
内容伪类选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :contains(text) | 对包含指定 text 文本的元素进行操作。 |
| :has(selector) | 对包含指定选择器的元素进行操作。 |
| :parent | 对含有文本或者子元素的元素进行操作。 |
| :empty | 对空元素进行操作。 |
# 内容伪类选择器的使用
新建 index2.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>内容伪类选择器</title> | |
<style> | |
table, | |
tr, | |
td { | |
border: 3px solid rgb(123, 145, 29); | |
} | |
td { | |
width: 50px; | |
height: 50px; | |
text-align: center; | |
} | |
</style> | |
<script> | |
$(function () { | |
$("td:contains('1')").css("color", "#ade498"); | |
$("tr:has(td)").css("background-color", "#e1ffc2"); | |
$("td:empty").append("10"); // 在指定元素里添加内容 | |
//$("td:parent").append("❤") | |
}); | |
</script> | |
</head> | |
<body> | |
<table> | |
<tr> | |
<td>123</td> | |
<td>2</td> | |
<td>3</td> | |
</tr> | |
<tr> | |
<td>4</td> | |
<td>213</td> | |
<td>5</td> | |
</tr> | |
<tr> | |
<td>6</td> | |
<td></td> | |
<td>321</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面代码中，使用
$("td:contains('1')")给td元素中包含内容 1 的元素设置绿色字体。 - 使用
$("tr:has(td)")给包含td元素的tr元素设置背景颜色。 - 使用
$("td:empty")给空的td元素添加文字内容。 - 使用
$("td:parent")给是父亲的td元素添加文字内容。
td:contains 是内容含有就好了，不是内容完全一样。
# 表单伪类选择器
表单伪类选择器是专用给表单元素设计的。
表单伪类选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :input | 选取所有 input 元素。 |
| :button | 选取所有 input 类型为 button 的元素。 |
| :submit | 选取所有 input 类型为 submit 的元素。 |
| :reset | 选取所有 input 类型为 reset 的元素。 |
| :text | 选取所有 input 类型为 text 的元素。 |
| :textarea | 选取所有多行文本框。 |
| :password | 选取所有 input 类型为 password 的元素。 |
| :radio | 选取所有 input 类型为 radio 的元素。 |
| :checkbox | 选取所有 input 类型为 checkbox 的元素。 |
| :image | 选取所有图片域。 |
| :file | 选取所有 input 类型为 file 的元素。 |
# 表单伪类选择器的使用
新建 index3.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>表单伪类选择器</title> | |
<style> | |
body { | |
width: 240px; | |
height: 320px; | |
border: 2px solid rgb(19, 37, 206); | |
} | |
</style> | |
<script> | |
$(function () { | |
$(":text").css("background-color", "blue"); | |
$(":password").css("background-color", "pink"); | |
$(":radio[value='male']").attr( | |
"checked", | |
"true" | |
); /* 匹配单选按钮并选中 */ | |
$(':checkbox[value="reading"],:checkbox[value="programming"]').attr( | |
"checked", | |
"true" | |
); | |
$(":file").css("color", "#aeefac"); | |
$(":submit").css("border-radius", "30%"); /* 给按钮设置圆角边框 */ | |
$(":reset").css("border-radius", "30%"); | |
}); | |
</script> | |
</head> | |
<body> | |
<form> | |
姓名：<input type="text" /><br /><br /> | |
密码：<input type="password" /><br /><br /> | |
男：<input type="radio" value="male" /> 女：<input | |
type="radio" | |
value="female" | |
/><br /> | |
<br /> | |
爱好： | |
<input type="checkbox" value="reading" />阅读 | |
<input type="checkbox" value="programming" />编程 | |
<input type="checkbox" value="others" />其他<br /><br /> | |
<input type="file" /><br /><br /> | |
<input type="submit" /> | |
<input type="reset" /> | |
</form> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面代码中，使用
$("input:text")给 text 类型的表单元素设置背景颜色为黄色。 - 使用
$("input:password")给 password 类型的表单元素设置背景颜色为粉色。 - 使用
$("input:radio")给 radio 类型的表单元素匹配单选按钮并选中。 - 使用
$("input:checkbox")给 checkbox 类型的表单元素匹配单选按钮并选中。 - 使用
$("input:file")给 file 类型的表单元素设置字体颜色为绿色。 - 使用
$("input:submit")给 submit 类型的表单元素设置 30% 的圆角边框。 - 使用
$("input:reset")给 reset 类型的表单元素设置 30% 的圆角边框。
# 表单对象属性选择器
前面给大家介绍了表单伪类选择器，我们即将讲的选择器也是针对表单元素而言，区别在于，表单对象属性选择器是根据表单元素的状态来选择的。
表单对象属性选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :checked | 选取所有被选中的表单元素。 |
| :selected | 选取被选中的表单元素项。 |
| :enabled | 选取所有可用的表单元素。 |
| :disabled | 选取所有不可用的表单元素。 |
| :read-only | 选取只读权限的表单元素。 |
| :focus | 选取所有获得焦点的表单元素。 |
# 表单对象属性选择器的使用
新建 index4.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>表单对象属性选择器</title> | |
<style> | |
body { | |
width: 240px; | |
height: 140px; | |
border: 2px solid rgb(19, 37, 206); | |
} | |
</style> | |
<script> | |
$(function () { | |
$("input:enabled").css("color", "#9fd8df"); // 给可用表单的输入框加上字体颜色 | |
$("input:disabled").css("border", "1px solid #81b214"); // 给不可更改的表单输入框设置边框样式 | |
}); | |
</script> | |
</head> | |
<body> | |
<form> | |
<!-- 姓名输入框不能更改 --> | |
姓名：<input type="text" value="小明" disabled="disabled" /><br /><br /> | |
电话：<input type="phone" /><br /><br /> | |
</form> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
在上面代码中，我们通过使用 $('input:enabled') 对所有可用的表单元素加上了字体颜色；使用 $("input:disabled") 给所有不可用元素添加了边框。
修改 index4.html ，编写代码如下：
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="jquery-3.6.0.min.js"></script> | |
<title>表单对象属性选择器</title> | |
<style></style> | |
<script> | |
$(function () { | |
$("input:checked").before("❤"); | |
}); | |
</script> | |
</head> | |
<body> | |
<form> | |
您的爱好是: 足球:<input | |
type="checkbox" | |
name="hobby" | |
checked="checked" | |
value="football" | |
/> | |
篮球:<input type="checkbox" name="hobby" value="basketball" /> | |
羽毛球:<input | |
type="checkbox" | |
name="hobby" | |
checked="checked" | |
value="badminton" | |
/> | |
</form> | |
</body> | |
</html> |
运行程序，效果如下：
# 事件
本节实验给大家介绍 jQuery 中的事件，让我们一起来学一学吧！
# 知识点
- 页面事件
- 鼠标事件
- 键盘事件
- 表单事件
- 滚动事件
- 绑定事件
- 合成事件
- 自定义事件
# 页面事件
jQuery 中页面事件的语法格式如下：
jQuery 对象.事件名(事件处理函数) |
例如：
$(document).ready(function () {}); | |
// 简写成 | |
$(function () {}); |
其中 $ 是 jQuery 对象的简写， $(document) 是把 dom 对象转换成 jQuery 对象。
页面事件用 ready 表示，它类似于 JavaScript 中的 onload 事件。但是 ready 要高级一点点，因为 ready 事件只等 dom 元素加载完毕即可执行内部代码，也就是说文档中引入的外部图片、 css 或者 js 文件就算没完成加载，该事件也可以执行，这个之前在第一章的面试题中已经说过，我们不再赘述。
了解了页面事件，接下来我们练一练吧！
# 页面事件的使用
首先，打开你们的线上环境，新建一个 index.html 文件，然后使用 ! 生成代码模版。
然后，使用以下命令获取 jQuery 库。保存了环境的同学，请忽略此步骤。
wget https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js |
接着，在 index.html 文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="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
# 鼠标事件的使用
新建 index1.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="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> | |
<input type="button" value="点我" id="btn" /> | |
<p>鼠标按下和抬起时会变色</p> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
# 键盘事件
键盘事件有以下三种：
| 事件 | 说明 |
|---|---|
| keydown | 键盘按下时触发。 |
| keyup | 键盘松开时触发。 |
| keypress | 事件会在键盘按键被按下并释放一个键时触发。 |
新建 index2.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="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> | |
电话号码：<input id="num" type="text" /> | |
<div id="div1"></div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面代码中，当我们在输入框中输入字符时，会触发
keydown事件打印 “正在输入”。 - 当键盘松开，会触发
keyup事件，我们使用正则表达式定义了输入框的输入规则，通过val获取当前输入，如果当前输入符合规则，则在输入框下方会显示文字 “输入的电话号码符合要求！”，反之输入框下方会显示 “手机号码格式不正确！”。
# 表单事件
表单事件是表单元素处于某种状态下会触发的事件。
常见的表单事件如下所示：
| 事件 | 说明 |
|---|---|
| focus | 获得焦点时触发的事件。 |
| blur | 失去焦点时触发的事件。 |
| select | 选中单行或多行文本框会触发的事件。 |
| change | 单选框、复选框、下拉列表框等选中项发生改变触发的事件。 |
# 聚焦与失焦
需求：文本框获得焦点后清空，如果是用户输入的内容则不会清空）。移除焦点后如果文本框是空，则恢复成 “搜索一下，喜欢的课”。
新建一个 index3.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="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> | |
<img | |
src="https://labfile.oss.aliyuncs.com/courses/3774/lanqiao.png" | |
/><br /> | |
<input id="search" type="text" value="搜索一下，喜欢的课程" /> | |
<input type="button" value="搜索" /><br /> | |
<img src="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> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="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> | |
姓名：<input type="text" value="请输入你的姓名" /><br /> | |
年龄：<input type="text" value="请输入你的年龄" /><br /><br /> | |
<textarea cols="23" rows="6">自我介绍...</textarea> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面代码中，当我们选中输入框时，会触发
select事件，输入框的背景颜色改变。 - 当我们选中多行文本框时，文本框中的字体颜色改变。
# change 事件
新建 index5.html 文件，在文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script src="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><input type="radio" name="hobby" value="画画" />画画</label> | |
<label><input type="radio" name="hobby" value="游泳" />游泳</label> | |
<label><input type="radio" name="hobby" value="旅行" />旅行</label> | |
<label><input type="radio" name="hobby" value="摄影" />摄影</label> | |
<label><input type="radio" name="hobby" value="编程" />编程</label> | |
<label><input type="radio" name="hobby" value="其他" />其他</label> | |
</div> | |
<div id="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> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>滚动事件</title> | |
<style> | |
div { | |
width: 250px; | |
height: 170px; | |
border: 2px solid black; | |
overflow: scroll; | |
} | |
</style> | |
<script src="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> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>绑定事件</title> | |
<style> | |
div { | |
width: 50px; | |
height: 50px; | |
background-color: #2e7aeb; | |
margin-left: 50%; | |
} | |
</style> | |
<script src="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> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>绑定多个事件</title> | |
<style> | |
div { | |
width: 50px; | |
height: 50px; | |
background-color: #2e7aeb; | |
margin-left: 50%; | |
} | |
</style> | |
<script src="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> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>合成事件</title> | |
<style> | |
div { | |
width: 50px; | |
height: 50px; | |
margin: 20px 0 0 50px; | |
text-align: center; | |
background-color: #24a9dd; | |
} | |
</style> | |
<script src="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> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>自定义事件事件</title> | |
<style> | |
div { | |
width: 50px; | |
height: 50px; | |
background-color: #b8b5ff; | |
margin-left: 50%; | |
} | |
</style> | |
<script src="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 对象
# 事件对象的介绍
当事件发生时，我们会把该事件的详细信息记录在事件对象中，然后通过事件对象的属性来了解事件的相关信息。
在 jQuery 中，我们使用 event 来获取一个事件的信息。
| 属性 | 说明 |
|---|---|
| type | 获取事件的类型。 |
| target | 获取触发事件的元素。 |
| which | 获取单击事件中鼠标的左、中、右键。 |
| clientX、clientY | 获取鼠标相对于页面左上角的坐标。 |
| pageX、pageY | 获取鼠标相对于页面左上角的坐标。（包括滚动条滚动的 x、y 轴距离） |
| shiftKey | 判断是否按下 shift 键。 |
| ctrlKey | 判断是否按下 ctrl 键。 |
| altKey | 判断是否按下 alt 键。 |
| keyCode | 获取按下键盘的键码值。 |
# type 和 target 属性的使用
使用以下命令获取 jQuery 库。保存了环境的同学，请忽略此步骤。
wget https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js |
接着，在 index1.html 文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>type 和 target 属性</title> | |
<script src="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> | |
<input id="btn" type="button" value="点击" /> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面代码中，当我们点击页面上的按钮，会触发
click事件，通过使用event.type，警告框中会输出当前触发事件的类型。 - 通过使用
event.target会给当前触发该事件的目标元素设置背景颜色。
# 键盘操作
首先，打开你们的线上环境，新建一个 index2.html 文件，然后使用 ! 键生成代码模版。
然后，在 index2.html 文件中写入以下内容。
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>键盘操作</title> | |
<script src="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> | |
<input type="text" /> | |
<div></div> | |
</body> | |
</html> |
最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。
- 在上面代码中，页面上有一个输入框，当我们键入一些字符时，会触发
keydown事件。 - 在函数中，我们使用
if(e.shiftKey || e.altKey || e.ctrlKey)来判断输入的字符是否是 shift、alt、ctrl 键。 - 如果是 shift、alt、ctrl 键，则在输入框的下方显示红色的警告语，如果不是，则弹出提示框，通过使用
e.keyCode，在提示框中会显示当前的键值码。
