1 <!DOCTYPE html>
2 <html>
3 <!--我們希望做到的是
4 1.當(dāng)點(diǎn)擊某個(gè)鏈接，我們3希望能留在這個(gè)網(wǎng)頁而不是轉(zhuǎn)到另外一個(gè)窗口
5 2.當(dāng)點(diǎn)擊某個(gè)鏈接，我們希望能在這個(gè)網(wǎng)頁上同事看到那張圖片和原有的圖片清單
6 -->
7 <!--
8 1.當(dāng)我們觸發(fā)onclick事件時(shí)，不僅showPic函數(shù)會(huì)被調(diào)用，鏈接也會(huì)起作用，而跳轉(zhuǎn)到另外一個(gè)窗口
9 所以，這里有個(gè)知識(shí)點(diǎn)，對(duì)于a標(biāo)簽的onclick函數(shù)，如果你讓onclick函數(shù)返回false，那么瀏覽器
10 會(huì)認(rèn)為你沒有點(diǎn)擊鏈接，也就不會(huì)發(fā)生跳轉(zhuǎn)。
11 2.如果吧a標(biāo)簽看成對(duì)象，你會(huì)發(fā)現(xiàn)這個(gè)很容易理解,我們給a標(biāo)簽增加了onclick函數(shù)具體的做什么事情，
12 也就是說onclick函數(shù)是a對(duì)象里的一個(gè)方法，那么這里的this就是指的就是a標(biāo)簽這個(gè)對(duì)象。現(xiàn)在你明白
13 為什么要用this了吧（想想C++、java）
14 -->
15 <head>
16 <meta charset="utf-8" />
17 <title>Image Gallery</title>
18 </head>
19 <body>
20 <h1>Snapshots</h1>
21 <ul>
22 <li><a href="images/fireworks.jpg" title="A fireworks display" onclick="return showPic(this);">Fireworks</a></li>
23 <li><a href="images/coffee.jpg" title="A cup of black coffee" onclick="return showPic(this);">Coffee</a></li>
24 <li><a href="images/rose.jpg" title="A red. red rose" onclick="return showPic(this);">Rose</a></li>
25 <li><a href="images/bigben.jpg" title="The famous clock" onclick="return showPic(this);">Big Ben</a></li>
26 </ul>
27 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
28 <p id="desp">Choose an Image</p>
29 <script type="text/javascript" src="scripts/showPic.js"></script>
30 </body>
31 </html>
showPic.js
function showPic(whichPic) {
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichPic.getAttribute("title");
var txtNode = document.getElementById("desp").firstChild;
txtNode.nodeValue = text;
return false;
/*
經(jīng)驗(yàn)總結(jié):
1.由于js是動(dòng)態(tài)語言，所以存在一個(gè)很嚴(yán)重的問題，
那就是你自己取的變量名稱時(shí)，盡可能的采用駱駝峰寫法，
并且最后借助好的編輯器，有自動(dòng)補(bǔ)全功能的編輯器，一面
拼寫錯(cuò)誤，這種錯(cuò)誤低級(jí)，而且查找起來十分困難。
2.如果站點(diǎn)用到多個(gè)js文件，因該把它合并到一個(gè)文件中。以減少請(qǐng)求次數(shù)，提高性能。
*/
}