HTML结构如下
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Shopping list</title> </head> <script type="text/javascript" src="scripts/showPic.js"></script> <link rel="stylesheet" href="scripts/style.css" media="screen"> <body> <h1>Snapshots</h1> <ul id="imagegallery"> <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> <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" /> <p id="description">Choose an image.</p> </body> </html>
JS代码如下
function showPic(whichpic) /*whichpic代表着一个元素节点，具体指向某个图片的<a>元素*/
{
if(!document.getElementById("placeholder")) return false;/*检查id为placeholder元素*/
var source = whichpic.getAttribute("href"); /*获取a元素上的图片文件路径 将路径存入变量source*/
var placeholder = document.getElementById("placeholder"); /*获取占位符图 存入变量placeholder*/
if(placeholder.nodeName != "IMG") return false;/*检查变量placeholder的图片元素*/
placeholder.setAttribute("src",source); /*对占位符图片路径刷新*/
if(document.getElementById("description")) /*检查id为description元素*/
{
var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):""; /*如果a元素上有title则赋值title元素，如果没有，则赋值空字符串*/
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3)
{
description.firstChild.nodeValue = text; /*把description对象的第一个子节点的nodeValue属性值设置为变量text的值。*/
}
}
return true;
}
function prepareGallery()
{
if(!document.getElementsByTagName)return false;/*检查getElementsByTagName方法*/
if(!document.getElementById)return false;/*检查getElementById方法*/
if(!document.getElementById("imagegallery"))return false;/*检查imagegaller元素是否存在*/
var gallery = document.getElementById("imagegallery"); /*获取imagegallery id赋值给gallery*/
var links = gallery.getElementsByTagName("a");/*获取gallery的a链接元素赋值给links*/
/*for循环遍历links数组*/
for(var i=0; i<links.length; i++)
{
links[i].onclick = function() /*每次点击执行showPic()函数*/
{
return showPic(this)?false:true; /*判断默认行为*/
}
}
}
/*
共享onlond事件，封装成一个函数,@func是页面加载时需要执行的那个函数。
如果window.onload在页面加载时还没有绑定任何函数，就把需要执行的函数添加给它、
如果这个处理函数已经绑定了函数，就把新函数追加到现有指令的末尾
*/
function addLoadEvent(func)
{
var oldonload = window.onload; /*把window.onload事件处理函数存入变量oldonload*/
if(typeof window.onload != ‘function‘)
{
window.onload = func;
}else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
首先是showPic函数
定义source变量获取a元素的路径，再定义placeholder的元素获取id为placeholder的占位符图片。
if(!document.getElementById("placeholder")) return false;这段代码用于检查id为placeholder元素是否存在；
if(placeholder.nodeName != "IMG") return false;则检查变量placeholder的图片元素是否存在；
placeholder.setAttribute("src",source); 则对占位符图片路径刷新；
接下来if(document.getElementById("description")) 判断id为description元素是否存在，如果存在则修改图片文字；
var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):""; 定义变量text判断whichpic的a元素上有title则赋值title值，如果没有，则赋值空字符串；
var description = document.getElementById("description"); 获取id为description并赋值变量description；
if(description.firstChild.nodeType == 3)判断description元素的第一个子元素是否为一个文本节点。（nodeType是用来获得当前节点对象的类型。文本text=3 ）
description.firstChild.nodeValue = text; 把description对象的第一个子节点的nodeValue属性值设置为变量text的值。
然后是prepareGallery函数
if(!document.getElementsByTagName)return false;
if(!document.getElementById)return false;
if(!document.getElementById("imagegallery"))return false;
前两段代码分别检查getElementsByTagName和getElementById方法，第三段代码价差id为imagegallery元素是否存在。
var gallery = document.getElementById("imagegallery"); 获取imagegallery id赋值给gallery
var links = gallery.getElementsByTagName("a");获取gallery的a链接元素赋值给links
for循环遍历
return showPic(this)?false:true;判断浏览器的默认行为，showPic(this)里的this 指的是当前指定元素，也就是links[i]。