1 <!DOCTYPE html>
2 <html>
3 <!--我們希望做到的是
4 1.當點擊某個鏈接，我們3希望能留在這個網頁而不是轉到另外一個窗口
5 2.當點擊某個鏈接，我們希望能在這個網頁上同事看到那張圖片和原有的圖片清單
6 -->
7 <!--
8 1.當我們觸發onclick事件時，不僅showPic函數會被調用，鏈接也會起作用，而跳轉到另外一個窗口
9 所以，這里有個知識點，對于a標簽的onclick函數，如果你讓onclick函數返回false，那么瀏覽器
10 會認為你沒有點擊鏈接，也就不會發生跳轉。
11 2.如果吧a標簽看成對象，你會發現這個很容易理解,我們給a標簽增加了onclick函數具體的做什么事情，
12 也就是說onclick函數是a對象里的一個方法，那么這里的this就是指的就是a標簽這個對象。現在你明白
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;
/*
經驗總結:
1.由于js是動態語言，所以存在一個很嚴重的問題，
那就是你自己取的變量名稱時，盡可能的采用駱駝峰寫法，
并且最后借助好的編輯器，有自動補全功能的編輯器，一面
拼寫錯誤，這種錯誤低級，而且查找起來十分困難。
2.如果站點用到多個js文件，因該把它合并到一個文件中。以減少請求次數，提高性能。
*/
}