首页 > 代码库 > js学习笔记（五）图片库实例
js学习笔记（五）图片库实例
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 = http://www.mamicode.com/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]。
js学习笔记（五）图片库实例