一、实验目标
本实验目标为掌握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>
<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 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>
<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>
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;
}