JavaScript & DOM 學習筆記（四）

時間 2019-12-20

原文原文鏈接

案例：將整個圖片庫的瀏覽鏈接幾種安排在圖片庫主頁裏，在用戶點擊某個圖片連接時才把相應的圖片傳送出來。
javascript

圖片素材：將圖片素材存放入 images文件夾中，並將文件夾與 html 放在同一級目錄下。css

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
</head>
<body>
  <h1>Snapshots</h1>
  <ul>
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
    </li>
  </ul>
</body>
</html>

若是圖片已經排好順序，能夠用有序清單元素 <ol> 來標記這些圖片連接。html

這樣這個網頁就作好了，可是若是想瀏覽不一樣的圖片，就須要藉助瀏覽器的後退按鈕。能夠作以下改進：
java

a. 經過增長一個「佔位符」圖片的辦法在這個主頁上爲圖片預留一個瀏覽區域
node

b. 點擊某個圖片的連接時，攔截網頁的默認行爲（跳轉到圖片頁面），並將圖片顯示在「佔位符」圖片瀏覽器

將代碼： <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 插入到 </ul> 後。效果圖以下：函數

下面要編寫 JavaScript 代碼來實現顯示圖片了。
性能

建議將 JavaScript 代碼寫入單獨的 .js 文件，在 html 文檔中應用。咱們新建一個 showPic.js 並放入 html 文檔的相同目錄下的 scripts 文件夾中。代碼以下：ui

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
</head>
<body>
  <h1>Snapshots</h1>
  <ul>
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display" onClick="showPic(this);return false;">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" onClick="showPic(this);return false;">Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose" onClick="showPic(this);return false;">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock" onClick="showPic(this);return false;">Big Ben</a>
    </li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
  
  <script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

function showPic(whichPic) {
	var placeholder = document.getElementById("placeholder");
	var picSrc = whichPic.getAttribute("href");
	placeholder.setAttribute("src", picSrc);
}

若一個站點用到多個 JavaScript 文件，爲了減小對站點的請求次數（提升性能），應該儘可能把這些 .js 文件合併到一個文件中。this

上面代碼中使用到了 onclick 事件處理函數，而且在使用函數 showPic（this）時使用了 this 關鍵字，this 表明了 <a> 這個元素節點。同時咱們應該注意到，在showPic（）函數後面，咱們增長了 return=false; 代碼，這是爲了阻止連接被點擊時跳轉的默認行爲。

事件處理函數的工做機制：在給某個元素添加了事件處理函數後，一旦事情發生，相應的 JavaScript 代碼就會被執行。被調用的 JavaScript 代碼能夠返回一個值，這個值將被傳遞給那個事件處理函數。因此上面咱們使用 return=false; 來阻止跳轉到連接窗口。

下面咱們給顯示的圖片加一個文本描述，每次點擊圖片的時候，將圖片的 title 顯示出來。在「佔位符」圖片下面加一個 <p>元素：

<p id="description">Choose a image</p>

使用前一篇中的 childNodes、nodeValue、firstChild 等元素屬性來改變 description。在 showPic.js 的 showPic function 中作出修改。

function showPic(whichPic) {
	//show picture
	var placeholder = document.getElementById("placeholder");
	var picSrc = whichPic.getAttribute("href");
	placeholder.setAttribute("src", picSrc);
	
	//replace description of image
	var text = whichPic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue = text;
}

若是想讓圖片庫更美觀，能夠加入如下 css 樣式表，並在 <head> 中加入 <link> 標籤引入樣式。

link rel="stylesheet" type="text/css" href="styles/layout.css"/>

body {
  font-family: "Helvetica","Arial",serif;
  color: #333;
  background-color: #ccc;
  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 {
  display:block;
  clear: both;
}