第六章 案例研究 图片库改进版
来源:互联网 发布:mac传照片到安卓手机 编辑:程序博客网 时间:2024/05/21 22:38
<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>
1 0
- 第六章 案例研究 图片库改进版
- 案例研究:图片库改进版
- 案例研究:图片库改进版(js dom编程艺术第六章笔记)
- Javascript DOM(第二版) 案例研究:图片库改进版
- JavaScript Dom编程艺术-C6 案例研究:图片库改进版
- 【JavaScript DOM编程艺术】- 案例研究:图片库改进版
- Js Dom 第六章 图片库的改进
- web前端之JavaScript DOM编程艺术之案例研究:图片库改进版
- 第四章 案例研究 javascript图片库
- 案例研究:JavaScript图片库
- js图片库——改进版
- JavaScript Dom编程艺术-C4 案例研究:JavaScript图片库
- 【JavaScript DOM编程艺术】- 案例研究:JS图片库
- JS DOM 编程艺术(第2版)读书笔记 第6章 图片库改进版
- #6图片库改进
- javascript dom编程艺术读书笔记之图片库改进版
- javascript_dom编程艺术第六章图片库实例笔记。
- web前端之JavaScript DOM编程艺术之案例研究:JavaScript图片库
- Core Graphics简介
- SpringBoot——入门
- Android获取屏幕宽度的4种方法
- 415. Add Strings
- JVM调优案例分析与实战
- 第六章 案例研究 图片库改进版
- xss基础
- 蓝桥杯 历届试题 矩阵翻硬币
- iOS证书申请与分发
- 安卓系统5.1格式化sd卡的方法
- 青岛游记
- 玩转redis —— 第4篇 哈希对象类型
- UML—Sequence Diagram and Collaboration Diagram
- fedora 24 configure