web实验四

最新推荐文章于 2024-08-08 16:10:15 发布

于鱼123

最新推荐文章于 2024-08-08 16:10:15 发布

阅读量239

点赞数

文章标签：前端 jquery css

本文链接：https://blog.csdn.net/m0_61530475/article/details/130326529

版权

一、实验目标

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

二、实验要求

掌握jQuery页面初始化方法
掌握jQuery的选择器的使用
掌握jQuery对Dom 的操作
熟悉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元素和内容。

代码

<!DOCTYPE html>

<head>

<title>Detail</title>

$().ready(function(){

var params=window.location.href.split("?")[1].split("&");

var url=decodeURI(params);

alert(url);

for(var i=0;i<=4;i++){

var item=decodeURI(params[i].split("=")[1]);

$("tr").eq(i).find("td").eq(1).html(item);

}

name=decodeURI(params[2].split("=")[1])

$("title").html(name);

year=decodeURI(params[0].split("=")[1])

src_value='images/'+year+'.jpg';

// alert(decodeURI(params[3].split("=")[1]))

$("#moviepic").attr("src",src_value);

})

</script>

</head>

<body>

<tr><td>影片中文名</td><td id="cnname">3</td></tr>

<tr><td>影片英文名</td><td id="enname">4</td></tr>

</table>

</div>

</body>

</html>

css

#main_table th{

background-color:#1A789A;

color:#FFFFF3;

font-weight:bold;

}

#main_table{

border-color:#000000;

border-style:solid;

border-width:1px 1px 1px 0px;

}

#main_table th:first-child{

border-width:0px 0px 0px 1px;

border-left:1px solid #000000;

}

#main_table th{

padding: 2px;

border-width:0px 0px 0px 1px;

border-left:1px dashed #FFFFFF;

}

/*每一行的第一个td*/

#main_table td:first-child{

border-width:1px 0px 0px 1px;

border-left:1px solid #000000;

border-top:1px solid #000000;

}

#main_table td{

padding: 2px;

border-width:1px 0px 0px 1px;

border-left:1px dashed #888888;

border-top:1px solid #000000;

}

#moviepic{

width: 800px;

}

#detail_table{

width: 800px;

border: #000000 solid;

border-width: 1px 0px 0px 1px;

}

#detail_table td{

border: #000000 solid;

border-width: 0px 1px 1px 0px;

padding: 3px 6px 3px 6px;

}

#detail_table td:nth-child(1){

width: 140px;

text-align: right;

font-weight: bold;

}

tr:nth-child(even){

background-color: #dddddd;

}

tr:nth-child(odd):hover{

background-color: #bbedff;

}

tr:nth-child(even):hover{

background-color: #3dc1f1;

}

于鱼123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
web实验四

上映年份</td><td id="showyear">5</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="year">1</td></tr><tr><td>届数</td><td id="number">2
复制链接

扫一扫