jQuery实验
1 实验类型
验证型，2学时，必选实验
2 实验目的
掌握jQuery常见选择器；掌握jQuery常见事件；掌握jQuery常见效果；掌握jQuery对象遍历方法；掌握jQuery操作Html对象；熟悉jQuery Ajax方法。
3 实验内容与要求
实现jQuery常见选择器的使用；实现jQuery常见事件处理；实现jQuery常见效果；实现jQuery对象遍历方法；实现jQuery操作Html对象；通过FastApi实现jQuery Ajax请求与响应。
4 实验环境
Windows7、Microsoft Edge/Chrome/Firefox等浏览器、Visual Studio Code(VS Code)、REST Client、jquery-3.7.1`
jquery下载地址：https://code.jquery.com/jquery-3.7.1.min.js
5 步骤
-
创建工作目录{盘符}:\{学号}\exp3_jquery
-
将jquery-3.7.1.min.js放到工作目录
注意：若参考代码中引用的文件路径与实际不符时，请按实际情况调整
选择器
创建一个段落元素(id=p1)，通过jQuery的元素选择器,#id选择器,.class选择器,CSS选择器等获取p1并实现显示/隐藏功能。
-
创建文件：jq_selector.html，分别实现元素选择器,#id选择器,.class选择器,CSS选择器，参考代码如下：
| 选择器 |
|---|
| <!-- selector.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器示例</title>
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<h1>元素选择器</h1>
<p id="p1" class="my_class" style="background-color: green;">这是一个段落。</p>
<button onclick="$('p').show()">显示段落</button>
<button onclick="$('p').hide()">隐藏段落</button>
<h1>#id选择器</h1>
<button onclick="$('#p1').show()">显示段落1</button>
<button onclick="$('#p1').hide()">隐藏段落1</button>
<h1>.class选择器</h1>
<button onclick="$('.my_class').show()">显示段落my_class</button>
<button onclick="$('.my_class').hide()">隐藏段落my_class</button>
<h1>CSS选择器</h1>
<button onclick="$('p').css('background-color', 'red')">修改段落背景为红色</button>
<button onclick="$('p').css('background-color', 'blue')">修改段落背景为蓝色</button>
</body>
</html>
|
-
在浏览器中打开页面，操作各模块并观察效果
事件
编写段落元素(id=p1)，通过jQuery捕获p1的click事件；编写文本框(id=k1)，通过jQuery捕获k1的keypress事件；编写表单(id=f1)，捕获f1的submit事件；捕获window对象的resize事件。
-
创建文件：jq_event.html，分别实现鼠标事件,键盘事件,表单事件,文档/窗口事件，参考代码如下：
| 事件 |
|---|
| <!-- event.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件示例</title>
<script src="jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function () {
$action_docment = $("#action_docment")
$("#p1").click(function () {
$("#action_mouse").text("click事件");
});
$("#k1").keypress(function () {
$("#action_key").text("keypress事件");
});
$("#f1").submit(function () {
$("#action_form").text("submit事件");
return false;
});
$(window).resize(function () {
$("#action_docment").text("resize事件")
})
});
</script>
</head>
<body>
<h1>鼠标事件</h1>
<span>当前动作：</span><span id="action_mouse"></span>
<p id="p1">这是一个段落。</p>
<h1>键盘事件</h1>
<span>当前动作：</span><span id="action_key"></span>
<p><input id="k1" type="text"></input></p>
<h1>表单事件</h1>
<span>当前动作：</span><span id="action_form"></span>
<form id="f1">
<input type="text"></input>
<input type="submit"></input>
</form>
<h1>文档/窗口事件</h1>
<span>当前动作：</span><span id="action_docment"></span>
</body>
</html>
|
-
在浏览器中打开页面，操作各模块并观察效果
效果
创建一个段落元素，通过jQuery分别实现显示/隐藏,淡入/淡出,滑动方法,动画等效果。
-
创建文件：jq_effect.html，分别实现显示/隐藏,淡入/淡出,滑动方法,动画，参考代码如下：
| 效果 |
|---|
| <!-- effect.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>效果示例</title>
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<p>这是一个段落。</p>
<h1>显示/隐藏</h1>
<button onclick="$('p').show()">显示</button>
<button onclick="$('p').hide()">隐藏</button>
<button onclick="$('p').toggle()">隐藏/显示</button>
<h1>淡入/淡出</h1>
<button onclick="$('p').fadeIn()">淡入</button>
<button onclick="$('p').fadeOut()">淡出</button>
<button onclick="$('p').fadeToggle()">淡入/淡出</button>
<h1>滑动方法</h1>
<button onclick="$('p').slideDown()">向下滑动</button>
<button onclick="$('p').slideUp()">向上滑动</button>
<button onclick="$('p').slideToggle()">向下滑动/向上滑动</button>
<h1>动画</h1>
<button onclick="$('p').animate({height:'300px',opacity:'0.4'}, 'slow')">动画</button>
</body>
</html>
|
-
在浏览器中打开页面，操作各模块并观察效果
遍历
编写包含span元素的嵌套对象，使用父节点遍历函数修改span的所有父节点的样式为：{ "color": "red", "border": "2px solid red" }。
-
创建文件：jq_traverse.html，通过jQuery实现span父元素样式修改，参考代码如下：
| 遍历 |
|---|
| <!-- traverse.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历示例</title>
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="jquery-3.6.1.min.js">
</script>
<script>
$(document).ready(function () {
$("span").parent().css({ "color": "red", "border": "2px solid red" });
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
|
-
在浏览器中打开页面，操作各模块并观察效果
Html
创建一个段落元素(id=p1)，通过jQuery分别实现对p1的获取内容和属性，设置内容和属性，添加元素，删除元素，CSS类等动作。
-
创建文件：jq_html.html，分别实现获取内容和属性，设置内容和属性，添加元素，删除元素，CSS类，参考代码如下：
| Html |
|---|
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html示例</title>
<script src="jquery-3.6.1.min.js"></script>
<style>
.ok_class {
background-color: green;
}
.fail_class {
background-color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p id="p1" class="ok_class">这是一个段落。</p>
<h1>获取内容和属性</h1>
<button onclick="alert($('#p1').text())">text</button>
<button onclick="alert($('#p1').html())">html</button>
<button onclick="alert($('#p1').val())">val</button>
<button onclick="alert($('#p1').attr('class'))">attr</button>
<h1>设置内容和属性</h1>
<button onclick="$('#p1').text('hello paragraph!')">text</button>
<button onclick="$('#p1').text('<button>hello paragraph!</button>')">html</button>
<button onclick="$('#p1').val('hello val!')">val</button>
<button onclick="$('#p1').attr('class', 'fail_class')">attr</button>
<h1>添加元素</h1>
<button onclick="$('#p1').append('Some appended text.')">append</button>
<button onclick="$('#p1').prepend('Some prepended text.')">prepended</button>
<button onclick="$('#p1').after('<p>Some after text.</p>')">after</button>
<button onclick="$('#p1').before('<p>Some before text.</p>')">before</button>
<h1>删除元素</h1>
<button onclick="$('#p1').remove()">remove</button>
<button onclick="$('#p1').empty()">remove</button>
<h1>CSS类</h1>
<button onclick="$('#p1').addClass('blue')">addClass</button>
<button onclick="$('#p1').removeClass('blue')">removeClass</button>
<button onclick="$('#p1').toggleClass('blue')">toggleClass</button>
</body>
</html>
|
-
在浏览器中打开页面，操作各模块并观察效果
综合
表单校验
使用jQuery对Html基础实验中创建的学生表的表单数据进行校验，失败时在元素后边显示错误信息，至少实现以下规则：
| 元素 |
校验规则 |
| 学号 (no) |
- 不能为空
- 必须是数字 |
| 姓名 (name) |
- 不能为空 |
| 性别 (gender) |
- 必须是"男"或"女" |
| 年龄 (age) |
- 不能为空
- 必须是正整数 |
| 所在系 (dept) |
- 不能为空 |
代码模板如下：
| 表单校验 |
|---|
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生表</title>
<script src="jquery-3.6.1.min.js"></script>
<style>
.error-message {
color: red;
}
</style>
<script>
$(document).ready(function () {
// 绑定表单提交事件
$("form[name='studentForm']").on("submit", function (e) {
e.preventDefault(); // 阻止表单的默认提交行为
var isValid = validateForm($(this));
if (isValid) {
this.submit(); // 如果验证通过，则手动提交表单
}
});
// 定义校验函数
function validateForm($form) {
var isValid = true;
// 清空所有错误消息
$(".error-message").remove();
// 校验学号
var no = $form.find("#no").val();
if (no === "") {
$form.find("#no").after("<span class='error-message'>学号不能为空</span>");
isValid = false;
}
// 校验其他字段...
return isValid;
}
});
</script>
</head>
<body>
<h3>学生表</h3>
<div class="container">
<form name="studentForm" action="#">
<div>
<label for="no">学号:</label>
<input type="text" id="no" name="no" placeholder="请输入学号..">
</div>
<!-- 完整代码需要包含其他字段的校验 -->
<button type="submit">提交</button>
</form>
</div>
</body>
</html>
|
拓展练习
- 使用jQuery实现课程表表单的校验