JavaScript 第三章 作業
阿新 • • 發佈：2018-12-19
1.簡述Core DoM與HTML DOM 訪問和修改節點屬性值的方法
1、document.getElementById("物件的id");獲取單個物件，獨立訪問某一個物件的時候
2、document.getElementsByName("物件的name");根據網頁元素的name獲取物件，獲取的是節點列表（物件陣列）
3、document.getElementsByTagName("標籤的名稱");根據網頁標籤名稱獲取物件（節點列表（物件陣列））返回的也是一個物件的陣列
2.簡述style、className設定元素樣式的異同
style 只能寫在當前dom上，不能多個dom共用，classname 寫一次，可以在多個dom上共用，style的權重值比較大
3.製作點選不同的數字連結顯示不同的圖片，使用setAttribute()的方式改變圖片的名稱
實現程式碼如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>圖片輪換</title> <link rel="stylesheet" href="css/scroll.css"> <script type="text/javascript"> function Img(img){ var imgs = document.getElementById("photo"); imgs.setAttribute("src","images/"+img) } </script> </head> <body> <div class="scroll"> <div id="num"> <a href="javascript:Img('1.gif')">1</a> <a href="javascript:Img('2.gif')">2</a> <a href="javascript:Img('3.jpg')">3</a> <a href="javascript:Img('4.jpg')">4</a> <a href="javascript:Img('5.gif')">5</a> </div> <img src="images/1.gif" alt="圖片" id="photo"/> </div> </body> </html>
4.製作單擊"再上傳一個圖片"按鈕就增加一行，可以增加許多相同的圖片上傳的行
實現程式碼如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>上傳檔案</title> <style> #main { margin: 0 auto; width: 500px; } dl { clear: both; width: 100%; } dt { float: left; width: 100px; text-align: right; } </style> <script type="text/javascript"> function Upload() { var NewUpload = document.getElementById("upload").cloneNode(true); var OldUpload = document.getElementById("up"); OldUpload.parentNode.insertBefore(NewUpload, OldUpload); } </script> </head> <body> <div id="main"> <dl id="upload"> <dt>檔案路徑：</dt> <dd><input name="fileImages" type="file" /></dd> </dl> <div id="addBtn"><input id="up" type="button" value="再上傳一個檔案" onclick="Upload()" /></div> </div> </body> </html>
5.製作Tab切換效果，當滑鼠指標放在"小說" “非小說” 或 "少兒"上時，標題背景變成另一個圖片，滑鼠指標變成手狀，並且下面的圖書標題變成對應類別下面的標題
實現程式碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TAB切換</title>
<link href="css/tab.css" rel="stylesheet">
</head>
<body>
<div class="div_bg">
<ul>
<li id="bg1">
<a class="white" onmousemove="move(1)">小說</a>
</li>
<li id="bg2">
<a class="white" onmousemove="move(2)">非小說</a>
</li>
<li id="bg3">
<a class="white" onmouseover="move(3);">少兒</a>
</li>
</ul>
<div id="book1" style="display: none;">
<a href="#" target=_blank>1.時間旅行者的妻子</a><br>
<a href="#" target=_blank>2.女心理師（下）</a><br>
<a href="#" target=_blank>3.鬼吹燈之精絕古城</a><br>
<a href="#" target=_blank>4.女心理師（上）</a><br>
<a href="#" target=_blank>5.小時候</a><br>
<a href="#" target=_blank>6.追風箏的人</a><br>
<a href="#" target=_blank>7.盜墓筆記2</a><br>
<a href="#" target=_blank>8.輸贏</a>
</div>
<div id="book2">
<a href="#" target=_blank>1.人生若只如初見</a><br>
<a href="#" target=_blank>2.高效能人士的七個..</a><br>
<a href="#" target=_blank>3.求醫不如求己</a><br>
<a href="#" target=_blank>4.人體使用手冊</a><br>
<a href="#" target=_blank>5.孩子，把你的手給我</a><br>
<a href="#" target=_blank>6.別笑！我是英文單詞書</a><br>
<a href="#" target=_blank>7.人體經絡使用手冊</a><br>
<a href="#" target=_blank>8.股市穩賺</a>
</div>
<div id="book3">
<a href="#" target=_blank>1.斯凱瑞金色童書・..</a><br>
<a href="#" target=_blank>2.哈利・波特與“混..</a><br>
<a href="#" target=_blank>3.不一樣的卡梅拉（..</a><br>
<a href="#" target=_blank>4.它們是怎麼來的</a><br>
<a href="#" target=_blank>5.五・三班的壞小子..</a><br>
<a href="#" target=_blank>6.男生日記</a><br>
<a href="#" target=_blank>7.哈利・波特與魔法石</a><br>
<a href="#" target=_blank>8.噼裡啪啦叢書(全7冊)</a>
</div>
</div>
</body>
<script type="text/javascript">
function move(a) {
var Now;
if(Number(a)) {
Now = a;
} else {
Now = 1;
}
for(var i = 1; i <= 3; i++) {
if(i == Now) {
document.getElementById("book" + Now).style.display = "block"; //當前層
document.getElementById("bg" + Now).className = "bg";
} else {
document.getElementById("book" + i).style.display = "none"; //隱藏其他層
document.getElementById("bg" + i).className = "nobg";
}
}
}
window.onLoad = move();
</script>
</html>