<html>
<head>
<title>第六章 案例研究 图片库改进版</title>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li><a href="img/1.jpg" title="a" >a</a></li>
<li><a href="img/2.jpg" title="b" >b</a></li>
<li><a href="img/3.jpg" title="c" >c</a></li>
<li><a href="img/4.jpg" title="d" >d</a></li>
<li><a href="img/5.jpg" title="e" >e</a></li>
<li><a href="img/6.jpg" title="f" >f</a></li>
<li><a href="img/7.jpg" title="g" >g</a></li>
<li><a href="img/8.jpg" title="h" >h</a></li>
</ul>
<p id="description">这是图片描述</p>
<img id="placeholder" src="img/1.jpg" alt="my" >
</body>
<script type="text/javascript">
function prepareGallery(){
// 三个if都是测试 是否存在
if (!document.getElementById)return false;
if (!document.getElementsByTagName)return false;
if (!document.getElementById("imagegallery"))return false;
//获取ul列表
var gallery=document.getElementById("imagegallery");
//获取ul列表里面的a元素
var links=gallery.getElementsByTagName("a");
//遍历所有的a元素,并添加点击事件
for (var i = 0; i < links.length; i++) {
links[i].onclick=function(){
//测试,有showpic()则阻止a元素默认行为,无则不阻止
return showPic(this)?false:true;
}
}
}
prepareGallery();
function showPic(whichpic){
//测试是否存在
if (!document.getElementById("placeholder")) return false;
//获取 href 属性的链接
var source=whichpic.getAttribute("href");
//获取占位符
var placeholder=document.getElementById("placeholder");
//测试是否存在
if(placeholder.nodeName!="IMG")return false;
//把获取 href 属性的链接给到占位符的 src
placeholder.setAttribute("src",source);
//测试是否存在
if (document.getElementById("description")){
//三元操作符,判断,有选择前者,无选择后者,获取的值给到text
var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
//获取 p 元素
var description=document.getElementById("description");
//判断节点是否等于3(文本节点)
if(description.firstChild.nodeType==3){
//把获取的 litile 属性的值给到 p 元素的文本节点
description.firstChild.nodeValue=text;
}
}return true;
}
/*
在本章里,做了许多优化。
1.尽量使javascript代码不再依赖那些没有保证的假设,为此引入了许多测试,这些测试和检查使得javascript代码能够平稳退化,但使得函数里的代码变得更多了。
在实际工作中,你要自己决定是否需要这些检查。
2.把事件处理函数从标记文档分离了,使得javascript代码不再依赖HTML文档的内容和结构。结果与行为分离的程度越大越好。
*/
</script>
</html>
</script>
</html>
第六章 案例研究 图片库改进版
最新推荐文章于 2024-09-21 09:29:16 发布