JavaScript 第八章 作業
阿新 • • 發佈：2018-12-19
1.jQuery中有哪些DOM操作？
（1）操作CSS樣式
（2）操作文字與屬性值內容
（3）操作DOM節點
（4）遍歷DOM節點
（5）操作CSS-DOM
2.簡述html()方法，text()方法和val()方法的異同
html() : 獲取第一個匹配元素的HTML內容或文字內容。 html(content) : 設定所有匹配元素的HTML內容或文字內容。 text() : 獲取所有匹配元素的文字內容。 text (content) : 設定所有匹配元素的文字內容。 val()：獲取第一個被選元素的value屬性的值。 val(content)：設定所有匹配元素的value屬性的值。
3.簡述css()方法和addClass()方法的異同
css()和addClass()都能改變元素的樣式。
css()是直接對樣式的值進行設定，而addClass()是給元素新增類樣式。addClass()比css()更加常用，因為使用addClass()新增樣式，更加符合W3C規範中“結構與樣式分離”的準則。
4.製作遊戲列表頁面，遊戲列表放置在一個邊框顏色為#cccccc的1px實線框中，該線框與瀏覽器邊距為10px與其內容之間間距為15px標題文字大小為14px，顏色為#0066ff,超連結顏色為#ff3300，滑鼠指標移過時顯示下劃線，單擊"刪除"連結時，其對應的圖片和名稱等資訊被刪除，單擊新增遊戲按鈕時，新增遊戲資訊
實現程式碼如下:
<!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:block; float:left; 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="img/p1.jpg" /></dt> <dd>街機三國</dd> <dd><a class='del' href='javascript:void(0);'>刪除</a></dd> </dl> <dl> <dt><img src="img/p2.jpg" /></dt> <dd>霸域</dd> <dd><a class='del' href='javascript:void(0);'>刪除</a></dd> </dl> <dl> <dt><img src="img/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" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $('.add').click(function(){ var games = ''; games += '<dl>'+'<dt><img src="img/p4.jpg" /></dt>' + '<dd>大航海家OL</dd>' + '<dd><a class="del" href="javascript:void(0);">刪除</a></dd>'+'</dl>'; $(games).insertBefore($('.clear')); $('.del').click(function(){ $(this).parents('dl').remove(); }); }); }); </script> </body> </html>
5.製作男生地帶頁面，滑鼠指標移過商品圖片時，圖片變為半透明顯示，透明度為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(img/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;
}
.transparent_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='img/p1.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p1.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p2.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p3.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p4.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p4.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p2.gif' /></dt>
<dd>
簡約色彩系列帶低幫帆布鞋12 黑色
<s>市場價：￥269</s>
<font color="#FF0000">售價：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/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" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').hover(function(){
$(this).addClass('transparent_class');
},function(){
$(this).removeClass('transparent_class');
})
})
</script>
</body>
</html>