JavaScript學習系列3 案例研究: JavaScript圖片庫 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
     <h1>Snapshots</h1>
    <ul>
         <li>
             <a href="images/Chrysanthemum.jpg" onclick="showPic(this); return false;" title="A Chrysanthemum display">Chrysanthemum</a>
        </li>
        <li>
             <a href="images/Desert.jpg" onclick="showPic(this); return false;" title="A Desert display">Desert</a>
        </li>
        <li>
                 <!– 點擊的時候調用showPic(this)方法,這裡this為當前節點、return false: 說明這個鏈接沒有被點擊–>
             <a href="images/Hydrangeas.jpg" onclick="showPic(this); return false;" title="A Hydrangeas display">Hydrangeas</a>
        </li>
        <!– 在下方顯示圖片–>
        <img id="placeholder" src="" alt="my image gallery" />
        <!– 通過id更改字體–>
        <p id="description">Choose an image.</p>
    </ul>
    
     <script src="file.js"></script>
</body>
</html>
 
JavaScript
function showPic(whichpic) {
     var source = whichpic.getAttribute("href");
     var placeholder = document.getElementById("placeholder");
     placeholder.setAttribute("src", source);
     var text = whichpic.getAttribute("title");
     var description = document.getElementById("description");
     description.firstChild.nodeValue = text;
}
 
childNodes: 獲取子節點的數組
nodeType: 節點類型
元素節點: 1
屬性節點: 2
文本節點: 3
nodeValue: 節點的值
firstChild: 第一個子節點
lastChild: 最後一個子節點
摘自 xtcpcgx的專欄

發佈留言