利用JavaScript来创建图片库将是最佳的选择：把整个图片库的浏览链接集中安排在图片库主页里，只在用户点击了这个主页里的某个链接时才把相应的图片传送给他。
标记
- 创建链接清单
使用无序清单元素(ul)或者有序清单元素(ol)来列出那些链接。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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>
改进
- 点击链接上在原本的网页下方打开图片。
步骤 - 增加占位符在主页上为图片预留一个浏览区域。
- 点击某个链接时，拦截这个网页的默认行为
- 把“占位符”图片替换为与那个链接相对应的图片
function showPic(whichpic) {
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
PS：当然也有非DOM的解决方案，通过element.value="the new value"修改，这条语句与element.setAttribute("value","the new value");等价。不过DOM的好处就是可移植性非常强。
- 应用JS文件
...
</head>
<script type="text/javascript" src="scripts/showpicture.js"></script>
<body>
...
- 添加事件处理函数
添加事件的语法： event＝"JavaScript statement(s)",请注意JavaScript代码包含在一对引号之间。我们可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号分开即可。
事件处理的工作机制。在给某个元素添加了事件处理函数后，一旦事件发生，相应的JS代码就会得到执行。被调用的JS代码可以返回一个值，这个值将被传递给事件处理函数。例如我们给某个链接添加一个onclick事件处理函数，并让这个处理函数所出发的JS代码返回的值是true或false。当链接呗点击时，如果JS代码返回的是true,onclick事件处理函数就认为这个链接呗点击了。反之，如果返回的值是false，onclick事件处理函数就认为这个链接没有被点击。
在onclick事件处理函数所触发的JS代码中添加一条return false，这个链接的默认行为就不会被处罚，就可以防止用户被带到目标链接窗口。
拓展
childNodes属性
在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是包含一个元素全部子元素的数组：
element.childNodes
假设需要把某个文档的body元素的全体子元素检索出来。
var body_element=document.getElementsByTagName("body")[0];
body_element.childNodes;//获取到body下所有的元素
body_element.childNodes.length//body中获取多少个元素
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
</head>
<script type="text/javascript" src="scripts/showpicture.js"></script>
<script type="text/javascript">
window.onload=countBodyChildren;
</script>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this);">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>
</body>
</html>
PS：上面弹出的节点数是7个，除了h1、ul、img，还有哪些元素呢？
文档树的节点类型并非只有元素节点一种。文档中几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释为节点，而他们也全部包含在childNodes属性所返回的数组中。
通过node.nodeType获取节点的nodeType属性。
nodeType属性总共有12种可取值，其中有3中具有实用价值。
- 元素节点的nodeType属性值是1
- 属性节点的nodeType属性值是2
- 文本节点的nodeType属性值是3
实例拓展，在图片下面添加一个文本，文本内容随链接内容的改变，现实对应的title。
...
</ul>
<p id="description">Choose an image</p>
</body>
...
添加p如上所示。
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
PS：那description.nodeValue返回什么呢？返回一个null，因为p元素的nodeValue属性是一个空值，实际上我们需要获取元素中包含的文本的值。
description.childNodes[0].nodeValue;
childNodes[0]的等价写法是node.firstChild。与之相对应的还有node.lastChild，其等价写法是node.childNodes[node.childNodes.length-1]。
nodeValue属性不仅可以用来检索节点的值，还可以用来设置节点的值
对应的JS代码如下:
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;
}
加上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;
}
u1{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
img{
display: block;
clear: both;
}
屏幕快照 2017-01-15 下午11.48.14.png
网友评论