JavaScript DOM程式設計藝術（第2版）第四章 JavaScript圖片庫 第五章 最佳實踐 第六章圖片庫的改進版
阿新 • • 發佈：2018-12-21
第四章 JavaScript圖片庫
點選有a連結的圖片，不發生跳轉頁面再顯示圖片而是在本頁展示圖片
- 佔位符
- 最好使用一個有序清單元素（ol）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>javascript</h1>
<ul>
<li><a href="../img/flower1.jpg" 
二.事件處理函式
1.滑鼠懸停觸發事件onmouseover 2.滑鼠離開觸發事件onmouseout 3.點選連結觸發事件onclick 點選事件增加return false；防止使用者被帶到目標連結視窗
三.讓每次點選連結顯示圖片的同時顯示他對應的文字內容
1.childNodes屬性：獲取任何一個元素的所有子元素。他是包含這個元素全部子元素的陣列。 如：找body元素中所有子元素
var body_elemnet = document.getElementsByTagName("body")[0];
console.log(body_elemnet.childNodes);
2.nodeType屬性：節點型別 =1 元素節點 =2 屬性節點 =3 文字節點
3.nodeValue屬性：得到和設定一個節點的值。 4.firstChild和lastChild屬性 childNodes陣列的第一個（下標是0）的元素：firstChild==childNodes[0] 在標記裡增加一段描述 將文字顯示在該位置：
<p id="description">Choose an imag.</p>
- 點選圖片連結的時候，動態改變圖片的title。
- nodeValue屬性重新整理每次文字的內容
alert(description.childNodes[0].nodeValue);//Choose an imag.顯示
完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>javascript</h1>
<ul>
<li><a href="../img/flower1.jpg" title="A Fireworks Display" onclick="showPic(this);return false;">Firework</a></li>
<li><a href="../img/flower2.jpg" title="A cup of coffee" onclick="showPic(this);return false;">Coffee</a></li>
<li><a href="../img/flower4.jpeg" title="A red rose" onclick="showPic(this);return false;">Rose</a></li>
<li><a href="../img/flower5.jpg" title="The Famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
<img src="../img/timeqq.png" alt="my image gallery" id="placeholder" width="500px">
<!--//在點選連結的時候展示圖片和他所對應的title-->
<p id="description">Choose an imag.</p>
</ul>
<script>
function showPic(whichpic) {
event="JavaScript statement(s)";//新增事件處理函式?????
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
//函式結構，獲取whichpic物件的title屬性值
var text=whichpic.getAttribute("title")
//用一個變數存放description的文字p
var description=document.getElementById('description');
// describe.childNodes[0].nodeValue=text;33
//實現文字的切換
// alert(description.childNodes[0].nodeValue);//Choose an imag.顯示
// alert(description.firstChild.nodeValue);//Choose an imag.顯示
//把連結title傳給text變數
description.firstChild.nodeValue=text;
}
function countBodyChildren() {
// 檢視body中子元素總個數
var body_element=document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);//7
alert(body_element.nodeType);//1元素節點
}
window.onload=countBodyChildren;
</script>
</body>
</html>
增加css樣式——修訂版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
color: #333;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
img{
width: 300px;
display: block;
clear: both;
}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="../img/flower1.jpg" title="A Fireworks Display" onclick="showPic(this);return false;">Firework</a></li>
<li><a href="../img/flower2.jpg" title="A cup of coffee" onclick="showPic(this);return false;">Coffee</a></li>
<li><a href="../img/flower4.jpeg" title="A red rose" onclick="showPic(this);return false;">Rose</a></li>
<li><a href="../img/flower5.jpg" title="The Famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
</ul>
<img src="../img/timeqq.png" alt="my image gallery" id="placeholder">
<p id="description">Choose an imag.</p>
<script>
function showPic(whichpic) {
event="JavaScript statement(s)";//新增事件處理函式?????
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
//函式結構，獲取whichpic物件的title屬性值
var text=whichpic.getAttribute("title")
//用一個變數存放description的文字p
var description=document.getElementById('description');
// describe.childNodes[0].nodeValue=text;33
//實現文字的切換
// alert(description.childNodes[0].nodeValue);//Choose an imag.顯示
// alert(description.firstChild.nodeValue);//Choose an imag.顯示
//把連結title傳給text變數
description.firstChild.nodeValue=text;
}
</script>
</body>
</html>
第五章 最佳實踐
1.偽協議：javascript:HTML中這種偽協議的呼叫做法不好 2.css的結構與樣式分離 3.分離JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" class="popup">Example</a>
<script>
window.onload=prepareLinks;
function prepareLinks() {
var links = document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
if (links[i].getAttribute("class")=="popup") {
links[i].onclick = function () {
popUp(this.getAttribute("href"));
return false;
}
}
}
}
function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480")
}
</script>
</body>
</html>
- 儘量少訪問DOM和儘量減少標籤
- 合併和防止指令碼（在一個js檔案裡，並且將註釋刪除來達到壓縮指令碼）
- 壓縮指令碼 壓縮指令碼程式碼的工具 Douglas CrockFord的JSMin 雅虎的YUI Compressor 谷歌的 Closure Compiler