第八章：使用jQuery操作DOM ——課後作業：
阿新 • • 發佈：2019-02-15
1.新增遊戲列表
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遊戲推薦 </title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#listbox{
margin:10px;
padding:15px;
border:1px solid #CCCCCC;
color:#0066FF;
}
dl{
display:inline-block;
margin:15px;
}
dd{
font-size:14px;
color:#663300;
}
dd a{
text-decoration:none;
font-size:14px;
color:#FF3300;
}
dd a:hover{
text-decoration:underline;
}
.clear{
clear:both;
height:0px;
}
</style>
</head>
<body>
<div id='listbox'>
<dl>
<dt><img src="images/p1.jpg" /></dt>
<dd>街機三國</dd>
<dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
</dl>
<dl>
<dt><img src="images/p2.jpg" /></dt>
<dd>霸域</dd>
<dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
</dl>
<dl>
<dt><img src="images/p3.jpg" /></dt>
<dd>鬥破乾坤</dd>
<dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
</dl>
<div class='clear'></div>
<input type="button" value='新增遊戲' class='add'/>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("input[type='button']").click(function () {
var $img="<dl><dt><img src='images/p4.jpg'></dt>"
var $name="<dd>大航海家oL</dd>"
var $sc ="<dd><a class='del' href='javascript:void(0);' >刪除</a></dd></dl>"
var $str=$img+$name+$sc;
$("#listbox dl:last").after($str).clone()
$(".del").click(function () {
$(this).parent().parent().remove()
})
})
})
</script>
</body>
</html>
2.製作男生地帶頁面，滑鼠指標移過商品圖片時，圖片變為半透明顯示，透明度為0.6；滑鼠指標移除時，恢復正常顯示，圖片透明度變為1。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>男生地帶 </title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#boxlist{
height:526px;
width:996px;
background:#fff url(images/bg.jpg) no-repeat 0px 0px;
}
.main{
margin-left:278px;
border:1px solid #CCC;
}
.box{
width:168px;
padding:23px 5px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
float:left;
cursor:pointer;
}
.class{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter:alpha(opacity=60);
opacity:0.6;
}
</style>
</head>
<body>
<div id='boxlist'>
<div style='height:43px;' ></div>
<div class='main'>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p2.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p3.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p4.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p4.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p2.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div style='clear:both;'></div>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("img").mouseover(function () {
$(this).addClass("class")
})
$("img").mouseout(function () {
$(this).removeClass("class")
})
})
</script>
</body>
</html>