web 实验4

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量144 收藏 1
点赞数
文章标签： 前端 jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cillin9/article/details/130311256
版权

《jQuery基础应用》实验指导

一、实验目标

本实验目标为掌握jQuery库的应用、页面初始化、页面元素操作等基本用法。支撑专业核心能力的培养。

二、实验要求

  1. 掌握jQuery页面初始化方法
  2. 掌握jQuery的选择器的使用
  3. 掌握jQuery对Dom 的操作
  4. 熟悉jQuery的页面动画

三、实验内容

jQuery选择器；

jQuery页面元素操作；

jQuery页面动画；

四、主要仪器设备

硬件： PC电脑

软件： Visual Studio Code/WebStorm/HBuilder

五、考核方式及要求

提交实验报告、源代码

六、实验内容和步骤

1、修改css/main.css文件调整oscarlist.html中的表格样式

(1) 将所有偶数行背景色改为#dddddd

(2) 利用CSS伪类选择器，鼠标移上偶数行背景色改为#3dc1f1，鼠标移上奇数行背景色改为#bbedff

2、引用jQuery包，编写jQuery代码

(1) 为表格添加最后一列，该列所有单元格均放置一个“查看”链接，点击链接后在新页面打开detail.html，并构造get参数放入链接所在行所有的内容。

原理：构造包含链接的单元格HTML代码（例：<td><a href="…" target="_blank">查看</a></td>），再追加到每个tr尾部即可，最好使用append方法；构造链接的URL时，需要提取本行所有单元格的内容，先利用jQuery选择链接所在行的前5个单元格，再使用text()方法提取单元格内的内容

需要构造的链接代码例：<a href="detail.html?year=2000&number=72%E5%B1%8A& cnname=%E7%BE%8E%E5%9B%BD%E4%B8%BD%E4%BA%BA&enname=American%20Beauty&showyear=2000" target="_blank">查看</a>

参数说明：year获奖年份，number届数，cnname影片中文名，enname影片英文名，showyear上映年份

所有放入URL的参数值需要进行UrlEncode编码：encodeURIComponent("72届")

3、修改detail.html代码，引用jQuery包，编写jQuery代码

(1) 接收URL中的get参数，原理：先提取URL，然后再使用正则表达式识别URL中的各参数值：

提取URL的方法：window.location.href

提取到参数值后再解码，例：decodeURI("72%E5%B1%8A")

(2) 通过jQuery的html方法将所有的get参数渲染到表格对应的单元格中，再将影片的中文名写入到网页的title中

(3) 通过jQuery显示对应的剧照图片，只需修改图片的src属性即可，图片路径格式为"images/获奖年份.jpg"。

4、要求：本实验不允许修改HTML源代码，只能通过jQuery动态渲染HTML元素和内容。

七、实验结果

1、编写实验报告：

实验报告中写上网页制作的步骤，并附上重要步骤及结果的截图。

2、提交实验结果： 

序号

文件名

说明

1

main.html

网页文件

2

oscarlist.html

网页文件

2

其他所有图片、js和css文件

8

实验4报告.docx

实验报告

将HTML文件、CSS文件和图片打包，与报告文件分开上传，报告文件不要压缩

detail.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Detail</title>
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<script src="js\jquery-3.1.1.min.js">
	</script>
	<script>
		$().ready(function () {
			var url = window.location.href;
			var ur2 = decodeURI(url);
			var params = ur2.split("?")[1];
			var text = params.split("&");
			var text0 = text[0].replace("year", "");
			var text1 = text[1].replace("numberr", "");
			var text2 = text[2].replace("cnname", "");
			var text3 = text[3].replace("enname", "");
			var text4 = text[4].replace("showyear", "");
			$("#moviepic").attr("src", "images/" + text0 + ".jpg");
			$("tr #year").html(text0);
			$("tr #number").html(text1);
			$("tr #cnname").html(text2);
			$("tr #enname").html(text3);
			$("tr #showyear").html(text4);

		});
	</script>
</head>

<body>
	<div id="main_area">
		<img id="moviepic" src="images/.jpg" /><br>
		<table id="detail_table" cellpadding="0" cellspacing="0">
			<tr>
				<td>获奖年份</td>
				<td id="year">1</td>
			</tr>
			<tr>
				<td>届数</td>
				<td id="number">2</td>
			</tr>
			<tr>
				<td>影片中文名</td>
				<td id="cnname">3</td>
			</tr>
			<tr>
				<td>影片英文名</td>
				<td id="enname">4</td>
			</tr>
			<tr>
				<td>上映年份</td>
				<td id="showyear">5</td>
			</tr>
		</table>
	</div>
</body>

</html>

oscarlist.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Oscar List</title>
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<script src="js\jquery-3.1.1.min.js">
	</script>
	<script>
		$().ready(function () {
			var $tr0 = $("tr:first");
			$tr0.append($('<th></th>'));
			$("tr:gt(0)").each(function () {
				$("tr:even").css("background-color", "#dddddd")
				$(function () {
					$("tr:even").mouseenter(function () {
						$(this).css("background-color", "#3dc1f1")
					})
					$("tr:odd").mouseenter(function () {
						$(this).css("background-color", "#bbedff")
					})
				})
				var url = "detail.html"
				url += "?year" + $(this).find("td").eq(0).text();
				url += "&number" + encodeURIComponent($(this).find("td").eq(1).text());
				url += "&cnname" + encodeURIComponent($(this).find("td").eq(2).text());
				url += "&enname" + encodeURIComponent($(this).find("td").eq(3).text());
				url += "&showyear" + encodeURIComponent($(this).find("td").eq(4).text());
				$(this).append("<td><a href='" + url + "'>查看</a></td>");
			});
		});
	</script>
</head>

<body>
	<div id="main_area">
		<table id='main_table' cellpadding="0" cellspacing="0">
			<tr>
				<th>年份</th>
				<th>奥斯卡</th>
				<th>影片（中文名）</th>
				<th>影片（英文名）</th>
				<th>上映年份</th>
			</tr>
			<tr>
				<td>2023</td>
				<td>95届</td>
				<td>瞬息全宇宙</td>
				<td>Everything Everywhere All at Once</td>
				<td>2022</td>
			</tr>
			<tr>
				<td>2022</td>
				<td>94届</td>
				<td>健听女孩</td>
				<td>Children of Deaf Adults</td>
				<td>2021</td>
			</tr>
			<tr>
				<td>2021</td>
				<td>93届</td>
				<td>无依之地</td>
				<td>Nomadland</td>
				<td>2020</td>
			</tr>
			<tr>
				<td>2020</td>
				<td>92届</td>
				<td>极速车王</td>
				<td>Ford v.Ferrari</td>
				<td>2019</td>
			</tr>
			<tr>
				<td>2019</td>
				<td>91届</td>
				<td>绿皮书</td>
				<td>Green Book</td>
				<td>2018</td>
			</tr>
			<tr>
				<td>2018</td>
				<td>90届</td>
				<td>水形物语</td>
				<td>The Shape of Water</td>
				<td>2018</td>
			</tr>
			<tr>
				<td>2017</td>
				<td>89届</td>
				<td>月光男孩</td>
				<td>Moonlight</td>
				<td>2017</td>
			</tr>
			<tr>
				<td>2016</td>
				<td>88届</td>
				<td>聚焦</td>
				<td>Spotlight</td>
				<td>2016</td>
			</tr>
			<tr>
				<td>2015</td>
				<td>87届</td>
				<td>鸟人</td>
				<td>Birdman</td>
				<td>2015</td>
			</tr>
			<tr>
				<td>2014</td>
				<td>86届</td>
				<td>为奴十二年</td>
				<td>12 Years a Slave</td>
				<td>2014</td>
			</tr>
			<tr>
				<td>2013</td>
				<td>85届</td>
				<td>逃离德黑兰</td>
				<td>Argo</td>
				<td>2013</td>
			</tr>
			<tr>
				<td>2012</td>
				<td>84届</td>
				<td>艺术家</td>
				<td>The Artist</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>2011</td>
				<td>83届</td>
				<td>国王的演讲</td>
				<td>The King's Speech</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>2010</td>
				<td>82届</td>
				<td>拆弹部队</td>
				<td>The Hurt Locker</td>
				<td>2008</td>
			</tr>
			<tr>
				<td>2009</td>
				<td>81届</td>
				<td>贫民窟的百万富翁</td>
				<td>Slumdog Millionaire</td>
				<td>2008</td>
			</tr>
			<tr>
				<td>2008</td>
				<td>80届</td>
				<td>老无所依</td>
				<td>No Country for Old Men</td>
				<td>2007</td>
			</tr>
			<tr>
				<td>2007</td>
				<td>79届</td>
				<td>无间道风云</td>
				<td>The Departed</td>
				<td>2006</td>
			</tr>
			<tr>
				<td>2006</td>
				<td>78届</td>
				<td>撞车</td>
				<td>Crash</td>
				<td>2004</td>
			</tr>
			<tr>
				<td>2005</td>
				<td>77届</td>
				<td>百万美元宝贝</td>
				<td>Million Dollar Baby</td>
				<td>2004</td>
			</tr>
			<tr>
				<td>2004</td>
				<td>76届</td>
				<td>指环王3</td>
				<td>The Lord of the Rings: The Return of The King</td>
				<td>2003</td>
			</tr>
			<tr>
				<td>2003</td>
				<td>75届</td>
				<td>芝加哥</td>
				<td>Chicago</td>
				<td>2002</td>
			</tr>
			<tr>
				<td>2002</td>
				<td>74届</td>
				<td>美丽心灵</td>
				<td>A Beautiful Mind</td>
				<td>2001</td>
			</tr>
			<tr>
				<td>2001</td>
				<td>73届</td>
				<td>角斗士</td>
				<td>Gladiator</td>
				<td>2001</td>
			</tr>
			<tr>
				<td>2000</td>
				<td>72届</td>
				<td>美国丽人</td>
				<td>American Beauty</td>
				<td>2000</td>
			</tr>
		</table>
	</div>
</body>

</html>

cillin9
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java web实验_javaweb实验报告
weixin_32188111的博客
02-12 3690
javaweb实验报告 甘肃政法学院本科生实验报告(一)姓名:学院:计算机科学学院专业: 计算机科学与技术班级实验课程名称:实验日期:2012 年 04 月 9 日指导教师及职称实验成绩:开课时间：2012 学年 二 学期甘肃政法学院实验管理中心印制实验题目 Java Web 项目开发环境搭建于简单开发 Jsp 指令标记与动作标记 Jsp 内置对象 小组合作 否姓名 班级 学 号一、实验目的1、 ...
Web实验六 JavaScript实验
Yutouxn0的博客
06-02 1636
一、实验目的：掌握JavaScript的变量；掌握JavaScript的数据类型；掌握JavaScript 的运算符；掌握JavaScript 的逻辑控制语句。掌握JavaScript数组和函数的使用方式。二、实验内容1、给定数组var numberList = [35,23,30,40,12,18,21,15,49,8,37,10]，以30为基准，使得数组numberList以30为界形成两个子集，数组前子集"小于30"，后子集"大于等于30"，并输出结果。 2、使用javascript的数组和数学对
java web实验报告_JavaWeb实验报告
weixin_28712661的博客
02-21 5275
实验一开发环境配置及Servlet程序设计一、实验目的1、了解并熟悉编程环境、编程工具，包括Tomcat、MyEclipse和JDK；2、学会配置环境变量；3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法；4、掌握在Tomcat中手工创建可执行程序的方法；二、实验内容及要求本次实验内容分为两部分：1、验证部分1)通过手动的方式在Tomcat中建立工程my，在该工程...
WEB实验四2021.4.27
weixin_47786301的博客
04-25 1692
WEB实验四 实验目的及要求： （1） 握Jquery页面初始化方法 （2） 掌握Jquery的选择器的基本使用 （3） 掌握Jquery对DOM 的基本操作 实验内容： 1.使用jquery实现如下界面效果： 提示：  奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500  选中行时，设置单选框选中状态  运行截图  代码： <!DOCTYPE html> <html lang="en"> <head> <meta
Web实验二
weixin_47786301的博客
04-25 1197
web实验二 实验内容： 1． 应用html标签和css完成如下所示页面效果，图片见附件。 说明：  内容相对于浏览器居中,宽860px  鼠标移动至列表项上，显示背景色#F8F8F8  分割线2px solid #ccc，每项高130px  第一行文字：20px 黑体  标签：字颜色#cccc00 16px  标签项：背景颜色#eee 字体颜色#999 文字大小14px  第三行文字：边框1px solid #eee; 圆角半径25px 其他样式可根据界面效果进行设置 运行截图 代码： &
网络安全实验——web安全
weixin_58628068的博客
05-18 3198
XSS（Cross-Site Scripting）是一种常见的Web应用程序漏洞，攻击者可以通过注入恶意脚本来获取用户的敏感信息或者控制用户的账户。攻击者可以通过在输入框、URL参数等地方注入恶意脚本来实现XSS攻击。为了防止XSS攻击，应该对用户提交的数据进行过滤和转义，避免将用户输入的内容作为HTML或JavaScript代码直接输出到页面上。在盗取rookie（一个虚拟人物）的实验中，攻击者通过在评论中注入恶意脚本，来实现对rookie账户的控制。
web实验超详细步骤
qq_56628318的博客
05-31 2213
web网页详细制作
Java与web实验报告,Java Web实验报告一
weixin_33226816的博客
03-10 1131
实验一 开发环境配置及Servlet程序设计一、实验目的1、了解并熟悉编程环境、编程工具，包括Tomcat、MyEclipse和JDK；2、学会配置环境变量；3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法； 4、掌握在Tomcat中手工创建可执行程序的方法；5、加强对servlet的生命周期的理解；掌握servlet程序的实现方法。 二、实验内容及要求本次实验...
java web实验报告,789Java Web实验报告
weixin_42101056的博客
03-13 2127
处罚规定规范vhghgyugg一天实验报告实验一1、安装JDK、Tomcat，进行测试。2、修改Tomcat端口为8976，重新进行测试。3、安装MyEclipse，绑定Tomcat，建立站点，并测试。4、在站点内编写一个简单的网页，在服务器中运行，在本机上访问，然后用另一台机器访问。时间：9月2日实验二1、用服务器端脚本在屏幕上打印100个“欢迎”，然后用客户端脚本在屏幕上打印100个“欢迎”，...
web实验报告
06-16
在本“Web实验报告”中，我们探讨了Web开发的核心概念和技术，这是一份由合肥学院的学生精心编写的参考资料，旨在帮助学习者更好地理解和实践Web开发。这份报告涵盖了多个关键领域，包括HTML、CSS、JavaScript基础，...
web网站实验报告
11-26
实验目的及要求】 1. 架设web服务器的需求环境； 2. 创建网站的虚拟目录； 3. 创建web网站； 安全管理web网站
java web 实验
01-17
在"java web"这个实验项目中，可能会涵盖上述一个或多个知识点，帮助学习者了解和实践Java Web开发的基本流程。通过实际项目，读者能够更好地理解如何将理论知识应用于实际场景，提升编程技能和问题解决能力。对于...
Java Web 实验报告
01-05
Java Web 实验报告 防盗链的设计
web配置实验报告
04-07
web服务器配置实验报告，通过实验理解IIS 服务的概念及其所具有的功能。 掌握IIS 服务的安装方法。 掌握WEB 服务的配置包括IP 地址、端口号、默认文档、安全等设定，以及如何应用Web 服务的方法。 了解虚拟目录服务...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 282
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1047
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 518
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1504
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 287
【代码】博客前端项目学习day03——框架页。
Web实验教程：ASP与CSS实践
"这是一份针对学生的Web实验指导书，涵盖了使用ASP和CSS进行网页设计以及JavaScript编程的基础知识。实验内容包括HTML基本元素的使用、CSS样式应用、JavaScript交互功能的实现，旨在提升学生的Web开发技能。" 实验...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值