实验四渲染

最新推荐文章于 2024-12-25 21:16:06 发布
最新推荐文章于 2024-12-25 21:16:06 发布
阅读量111 收藏
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70132659/article/details/130311088
版权
该实验旨在通过jQuery实现页面初始化，如偶数行背景色变换，以及添加查看链接功能。链接点击后在新页面打开，并传递GET参数。在detail.html页面中，接收并解析URL参数，使用jQuery更新表格内容并显示对应图片。
摘要由CSDN通过智能技术生成
  • 实验目的

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

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

jQuery选择器；

jQuery页面元素操作；

jQuery页面动画；

    

  • 实验过程

 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()方法提取单元格内的内容

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"。

页面一

<!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>

页面二：

<!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>

00道
关注
实验性 DirectX 12 渲染引擎.zip
11-27
先锋渲染引擎用于探索不断发展的渲染技术的 Direct3D 12 实时渲染沙箱。主要特点基于物理的着色渲染图处理所有资源、障碍和调度在计算着色器中执行间接 GPU 驱动的渲染、高 Z 遮挡和视锥网格剔除完全无绑定资源...
jQuery 渲染页面
摸鱼小队
12-23 7712
步骤： 一、下载并模板引擎template-web.js文件 <script src="template-web.js"></script> 二、准备数据 后台请求回来的数据或者自己造的数据 三、准备要渲染的模板 注意： 1、模板要用：<script type="text/html" id="tmp"></script"> 包裹，只起包裹作用不会被渲染 2、指定 type="text/html" 3、定义模板id：id="tmp" 绑定数据的时候用，id名
【Vue案例实现1.0】页面渲染
yjj510818155的博客
03-28 529
效果 一、 实现列表渲染功能 初始代码 在这里插入代码片 `` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>静态页面</title> <style> #app { width: 600px; mar...
jQuery页面加载初始化常用的四种方法
越来越好ing的博客
07-25 1万+
当页面打开时我们需要执行一些操作，下面为大家介绍三种不错的方法，大家可以参考下 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了:  第一种: 代码如下: &lt;script type="text/javascript" src="./js/jquery-1.7.min.js"&gt...
jQuery页面加载初始化的3种方法
热门推荐
Java高知社区
08-24 15万+
jQuery 页面加载初始化的方法有3种 ，页面在加载的时候都会执行脚本，应该没什么区别，主要看习惯吧，本人觉得第二种方法最好，比较简洁。 第一种： $(document).ready(function(){ alert("第一种方法。"); });第
图形学实验四
06-24
在本实验"图形学实验四"中，我们将深入探讨计算机图形学的一个重要领域，这个实验主要基于VC++编程环境进行。计算机图形学是计算机科学的一个分支，它涉及到图像的生成、处理和显示技术，广泛应用于游戏开发、影视...
StarEngine:实验性渲染引擎
05-05
StarEngine An experimental rendering engine 知乎专栏： 系统要求 良好的网络环境，能顺利连接github与microsoft。 Visual Studio 2019 16.8, 需要安装以下模块。 1.Desktop development with C++ ...
基于三维GIS技术的动态LOD渲染方法的实验及验证.docx
04-02
实验结果表明，新方法在保证地图质量的同时显著提升了渲染效率，尤其在处理复杂地形和大量数据时，其优势更为明显。这一成果对于GIS领域的应用，如智慧城市、导航系统、地理信息系统等领域，都具有重要的实践价值。
JSP小实验不含有学号的报告四[内含完整实验报告要求文档以及答案].zip
06-21
实验内容可能包括创建简单的JSP页面，展示用户输入，处理表单数据，使用session和cookie来实现会话管理，以及利用EL（Expression Language）和JSTL（JavaServer Pages Standard Tag Library）进行数据处理和页面渲染...
vue3自定义上传功能；手写上传组件；input实现上传
i_am_a_div的博客
12-23 289
vue3自定义上传功能；手写上传组件；input实现上传
在js中实现下载base64数据，兼容低版本
最新发布
HGX-DJK
12-25 249
【代码】在js中实现下载base64数据，兼容低版本。
JavaScript基础学习
sanguine__的博客
12-20 492
正负号，自增运算符。
Vue3 +Element-Plus el-select下拉菜单样式(局部生效)
12-25 232
el-select样式修改
用户管理练习
2302_81312344的博客
12-23 241
用户管理（难点：新增和编辑的逻辑）
Vue前端开发-Pinia模块安装与配置
12-24 711
Vue Pinia是一个专门为Vue 3设计的状态管理库，旨在提供一种简单、直观且灵活的方式来处理应用中的全局状态。
Java全栈项目 - 校园资源共享平台开发实践
exlink2012的专栏
12-25 708
校园资源共享平台是一个面向高校师生的综合性资源交流平台，旨在促进校园内各类资源的有效流通与共享。本项目采用主流的Java全栈技术栈进行开发，实现了资源上传下载、在线交流、信息发布等核心功能。
【华为OD-E卷-最左侧冗余覆盖子串 100分（python、java、c++、js、c）】
CodeClimb的博客
12-22 1125
动态调整窗口：通过移出窗口的第一个字符（out_char）和加入窗口的最后一个字符（in_char），动态更新 need 和 total，同时检查是否匹配。滑动窗口时，每次移除窗口起点字符，加入窗口终点字符，动态调整 freqMap 和未匹配字符的计数 missingCount。匹配判断： 当 match == len1 时，表示窗口中字符完全覆盖了 s1 的所有字符，返回当前窗口的起始索引。每次滑动窗口时，移出窗口的第一个字符，加入窗口的最后一个字符，同时更新 count 和 missing。
Vue3：uv-upload图片上传
weixin_63643304的博客
12-22 329
效果图： 代码：
[JS]通过svg实现连接的效果
随便写写
12-25 563
通过svg实现连接效果
探索实验性延迟渲染OpenGL引擎
由于这是一个实验性项目，开发者可能在尝试不同的渲染技术，优化渲染算法，或者研究如何在保持高质量渲染效果的同时，提升渲染性能。实验性项目也可能涉及到对当前OpenGL特性的极限测试，或者在探索新的图形API特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值
>