Javascript Images Gallery
2016-08-09 19:50 yojiaku 阅读(358) 评论(0) 编辑 收藏 举报文件目录：
gallery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Image Gallery</title>
<style type="text/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;
cursor: pointer;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
img{
display: block;
clear: both;
}
</style>
</head>
<body>
<h1> Snapshots </h1>
<ul>
<!-- if we want to use showPic(), we need to add an event handler to <a> ;
to avoid jumping to another page when we click links, we should add return false to onclick event handler.
However, when I write ronclick="showPic(this);return false;", the Chrome does not work, so I change the attribute "href" to "alt" to avoid this problem. <=== this is a wrong solvement
When I tried many times, I find the solvement: I forget to add "return true" at the end of function showPic(). <=== this is a correct solvement
-->
<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.gif" title="A 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.jpg" alt="my image gallery" />
<p id="description"> Choose an image. </p>
<!-- when we choose a picture, the content of <p> will also change. -->
<script src="showPic.js"></script>
</body>
</html>
showPic.js
/* to change placeholder.jpg into what picture we want */
function showPic(whichpic) {
if(!document.getElementById) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
//change the content of <p>
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
/* if we use "description.nodeValue", what we obtain is not the content of <p>,
but null(nodeValue attribute of the element itself is an empty value),
because the content of <p> is another child node, it is the first child node of <p>.
We should use follows to obtain it.*/
console.log(description.childNodes[0].nodeValue);
// this sentence equal to "console.log(description.firstchild.nodeValue);", however, in fact, Chrome can only read childNodes[0], not firstchild
description.childNodes[0].nodeValue = text;
console.log(description.childNodes[0].nodeValue);
/* The value of the nodeValue properties of object description's first child node is set to the value of the variable text. */
return true;
}
/* whichpic stands an element node, specifically, it is a <a> pointed a picture.
We need fracture the path of picture and this can be made by transfer attribute "href" to getAttribute().
Then we should save this path in var source.
Next, we also need to obtain placeholder.jpg, to aviod repeating the same operation, put this element to a viriable "placeholder".
Last, use setAttribute() to finish this function showPic().
*/
// follow function just to show nodeType how to work
function countBodyChild()
{
var body_element = document.getElementsByTagName("body")[0];
console.log(body_element.childNodes.length);
console.log(body_element.nodeType);
}
/* We can find that the number of body's element is far more than we expected.
Because childNodes will return all types nodes, not only element nodes.
However, every node has a nodeType attribute,
this can let us know what type the nodes are.
If it is element node, nodeType returns 1; attibute node returns 2; text node returns 3.
*/
window.onload = countBodyChild;
所有的代码解释都在代码里头了！o(*￣▽￣*)o
下面是效果图：最开始的页面
点击时：
summary：
In this unit, author uses "Images Gallery" as an example to introduce DOM's properties(also attributes) to us:
chileNodes : use it to obtain all the Child Elements of any element. And it returns an array which made up of all Child Elements.
Grammer : element.childNodes
Example : var body_element = document.getElementsByTagName("body")[0];
body_element.childNodes;
And node.childNodes[node.childNodes.lenth-1] means the last child of this node.
Attention : returning all Child Elements means return not only element nodes, also text nodes and other types' nodes.
It has two special childNodes : firstchild & lastchild, but it does not work on chrome.
nodeType : every node has its nodeType, if node is an element node, its nodeType is 1; if node is a property node, its nodeType is 2; if node is a text node, its nodeTypa is 3.
Grammer : node.nodeType
Example : body_element.nodeType
nodeValue : change a node's value.
Grammer : node.nodeValue
Example : p.childNodes[0].nodeValue
Attention : "p.nodeValue" == null, the contents of <p> is the first child note of <p>.
