收藏
批改状态：合格
老师批语：
这次作业主要是做了一个课程表，使用了first-child、slice()、last()、eq()、contains()、addClass()、prev()等函数或选择器。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQ常用选择器函数</title>
<style type="text/css">
.main {
width: 860px;
height: 600px;
border-spacing: 0;
border-collapse: collapse;
margin: 0 auto;
}
.bor {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>
<table>
<caption>少年课外兴趣培训课程</caption>
<tr>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th colspan="3">星期六</th>
<th colspan="2">星期天</th>
</tr>
<tr>
<td>8:30-9:30</td>
<td>早课
<br>阿斯汤加</td>
<td>早课
<br>阿斯汤加</td>
<td>早课
<br>阿斯汤加</td>
<td>早课
<br>阿斯汤加</td>
<td>早课
<br>阿斯汤加</td>
<td></td>
<td></td>
<td rowspan="2">弟子记忆班</td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00-11:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>少儿
<br>拉丁舞</td>
<td>素描</td>
<td>炫酷街舞</td>
<td>创意
<br>简笔画</td>
</tr>
<tr>
<td>12:10-13:10</td>
<td>哈他瑜伽</td>
<td>哈他瑜伽</td>
<td>哈他瑜伽</td>
<td>球瑜伽</td>
<td>塑形瑜伽</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>14:00-15:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>书法练习</td>
<td></td>
<td rowspan="2">精品记忆班
<br>14:00-17:00</td>
<td colspan="2" rowspan="3">工作室
<br>清洁卫生</td>
</tr>
<tr>
<td>16:00-17:40</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>18:10-19:10</td>
<td>塑形健身操</td>
<td>塑形健身操</td>
<td>塑形健身操</td>
<td>塑形健身操</td>
<td>塑形健身操</td>
<td colspan="3">常规记忆班(17:40-20:40)</td>
</tr>
</table>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('div').css({border:"5px double red",width:"900px",margin:"0 auto",padding:"20px",borderRadius:"20px"})
$('table').addClass("main bor")
$('th,td').addClass('bor')
$('th').css({ backgroundColor: "#B48515", height: "30px" })
$('caption').css({fontSize:"2em",fontWeight:"bold"})
$('tr>td:first-child').css({ backgroundColor: "#7214E8", color: "white" })
$('tr:nth-child(2)>td').slice(1, 6).css("backgroundColor", "#16EA81")
$('tr:nth-child(4)>td').slice(1, 4).css("backgroundColor", "#31F8DE")
$('tr:nth-child(7)>td').slice(1, 6).css("backgroundColor", "#EDF334")
$('td:contains("球")').css("backgroundColor", "#DA64EF")
$('td:contains("拉丁")').css("backgroundColor", "#BAA7BC")
$('tr:nth-child(3)>td').last().css("backgroundColor", "#1A73A8")
$('tr:nth-child(3)>td').eq(7).css("backgroundColor", "#2B46B8")
$('tr:nth-child(3)>td').last().prev().css("backgroundColor", "#8EB41E")
$('td:contains("记忆班")').css("backgroundColor", "#DE3AF3")
$('td:contains("工作室")').css({ backgroundColor: "#7214E8", fontSize:"1.5em",color:"orange"})
$('td:contains("书法")').css("backgroundColor", "#F14C4C")
$('td:contains("球")').css("backgroundColor", "#BA7547")
$('tr:nth-child(4)>td:nth-child(6)').css("backgroundColor", "#E76CC0")
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：jQ需要学习的东西很多，一会半会不能全部掌握，在今后的代码编写中尽量采用，能节省大量Javascript代码的编写工作。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
