Javascript DOM编程艺术（第2版） -- 读书笔记（一）-CSDN博客

本文链接：https://blog.csdn.net/CherishLyf/article/details/47628605

Javascript DOM编程艺术（第2版） – 图片库制作

结构层

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
  <script type="text/javascript" src="scripts/showPic.js"></script>
  <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">
        <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
      </a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >
        <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
      </a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">
        <img src="images/thumbnail_rose.jpg" alt="Rose" />
      </a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">
        <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
      </a>
    </li>
  </ul>
</body>
</html>

表示层

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;
}
#imagegallery {
  list-style: none;
}

#imagegallery li {
  display: inline;
}

#imagegallery li a img {
  border: 0;
}

行为层

function showPic(whichpic) {
  //确认浏览器支持 dom
  if (!document.getElementById("placeholder")) return true;
  //获取 href属性
  var source = whichpic.getAttribute("href");
  //获取 id为 placeholder占位符
  var placeholder = document.getElementById("placeholder");
  // 给占位符添加属性src 并赋值为source
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  //获取元素的 title属性 如果不存在赋值为空字符串
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  //判断 description是否为文本节点，是的话赋值text
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}

function prepareGallery() {
  //检验浏览器
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  //获取图片列表
  var gallery = document.getElementById("imagegallery");
  //获取图片的超链接
  var links = gallery.getElementsByTagName("a");
  //遍历每个超链接
  for ( var i=0; i < links.length; i++) {
    //给链接添加点击函数
    links[i].onclick = function() {
      return showPic(this);
    }
    links[i].onkeypress = links[i].onclick;
  }
}
//添加Onload
function addLoadEvent(func) {
  //把已经存在的 onload 赋值于 oldonload
  var oldonload = window.onload;
  // 判断window.onload 是否已经赋值
  if (typeof window.onload != 'function') {
    //没有赋值的话 设置当前函数为window.onload
    window.onload = func;
  } else {
    //如果window.onload已经存在，赋值一个函数添加以前的onload和新的func
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function preparePlaceholder() {
  if (!document.createElement) return false;
  if (!document.createTextNode) return false;
  // 创建一个新的img元素
  var placeholder = document.createElement("img");
  //img添加 id
  placeholder.setAttribute("id","placeholder");
  //添加图片地址
  placeholder.setAttribute("src","images/placeholder.gif");
  //添加alt 
  placeholder.setAttribute("alt","my image gallery");
  // 创建P元素
  var description = document.createElement("p");
  // p 添加 ID
  description.setAttribute("id","description");
  // p元素中添加文本
  var desctext = document.createTextNode("Choose an image");
  description.appendChild(desctext);
  var gallery = document.getElementById("imagegallery");
  gallery.parentNode.insertBefore(placeholder,gallery);
  gallery.parentNode.insertBefore(description,gallery);
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);