JavaScriptDOM编程学习笔记（二）图片库案例
《JavascriptDOM编程艺术》提供一个图片库的demo，主要讲解如何更好的使用JavaScript在网页中，跟随作者的思路来分析一下这个案例
首先需求是将图片发布到网上，但是如果发布的图片比较多，那么页面就会变得过于庞大，那么当用户在访问网页的时候需要下载的数据量就非常可观了，而现实是，很少有用户会等待很长很长的时间去下载一个网页
因此，基于上述原因，为每张图片分别创建一个网页的方案就值得考虑，这样就能将图片库拆分到许多尺寸合理，便于下载和浏览的的页面，不过这样的一个解决方案面对的问题就是分别创建一个网页需要花费的时间和精力，以及需要为每个网页上增加某种导航链接来给出当前图片在整个图片库的位置，方便浏览用户跳转到其他网页
为了两全其美，我们使用JavaScript创建图片库就是一个很棒的选择：将整个图片库的浏览链接集中安排在图片库的主页，当用户点击了这个主页的图片链接时将响应的图片传递给用户
来看第一版的图片库的显示效果
下面的图片库的标记清单
<!DOCTYPE>
<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>
</li>
<li>
<a href="images/coffee.jpg" title="一杯卡布奇诺">咖啡</a>
</li>
<li>
<a href="images/rose.jpg" title="一束玫瑰">玫瑰</a>
</li>
<li>
<a href="images/bigben.jpg" title="著名的大本钟">大本钟</a>
</li>
</ul>
</body>
</html>
网页显示的效果是一个列表，比较遗憾的是有几个地方需要改进
- 当点击了链接之后，希望能留在页面而不是跳转到新的页面，这样不需要借助浏览器退回按钮返回
- 当点击图片链接时，在当前页面看到那张图片以及原有的图片清单
为了实现这些要改进的目标，我们可以这么操作一波
- 通过增加一个占位符图片来为图片的预览保留一个浏览区域
- 在点击链接时，拦截这个网页的默认行为
- 在点击链接时候，将占位符图片替换为对应的图片
完成后的页面效果如下
当点击对应的图片时，会自动展示对应的图片效果，标记清单如下
<!DOCTYPE>
<html lang="en">
<head>
<meta charset=utf-8" />
<title>图片库</title>
<!-- 将占位符区域的图片替换 -->
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
<h1>图片库</h1>
<ul>
<li>
<!-- 单击触发showPic函数，this:关键字表示当前元素，即这个对象 -->
<a href="images/fireworks.jpg" title="一朵绚烂的烟花" onclick="showPic(this); return false;">烟花</a>
</li>
<li>
<a href="images/coffee.jpg" title="一杯卡布奇诺" onclick="showPic(this); return false;">咖啡</a>
</li>
<li>
<a href="images/rose.jpg" title="一束玫瑰" onclick="showPic(this); return false;">玫瑰</a>
</li>
<li>
<a href="images/bigben.jpg" title="著名的大本钟" onclick="showPic(this); return false;">大本钟</a>
</li>
</ul>
<!-- 占位符 -->
<img id="placeholder" src="data:images/placeholder.gif" alt="我的图片库" />
</body>
</html>
showPic函数的代码
//替换占位符placeholder元素的src元素为whichpic元素的href属性
function showPic(whichpic) {
//whichpic:对应的<a>元素
var source = whichpic.getAttribute("href");//获取whichpic的href属性值
var placeholder = document.getElementById("placeholder");//获取占位符图片
placeholder.setAttribute("src",source);//刷新元素的src属性
}
在这里需要了解一下浏览器事件处理函数的工作机制：
在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会被执行，被调用的Javascript代码可以返回一个值，这个值将被传递给那个事件处理函数。以上文为例，我们给链接加上了onclick事件处理函数，并让这个处理函数触发的JavaScript代码返回布尔值。当该链接被点击，假设那段JavaScript代码返回值是true，onclick事件处理函数就认为“该链接被点击了”，反之，如果返回值为false,onclick事件处理函数就认为“这个链接没有被点击”
可以写个测试验证下
<a href="http://www.cnblogs.com/luqinghua/" onclick="return false;">点击</a>
当点击该链接时，因为onclick触发事件函数返回值为false，所以这个链接的默认行为没有被触发
除了能在一个页面上切换图片，我们还希望能看到将图片的属性title也展示在页面上
<!DOCTYPE>
<html lang="en">
<head>
<meta charset=utf-8" />
<title>图片库</title>
<!-- 将占位符区域的图片替换 -->
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
<h1>图片库</h1>
<ul>
<li>
<!-- 单击触发showPic函数，this:关键字表示当前元素，即这个对象 -->
<a href="images/fireworks.jpg" title="一朵绚烂的烟花" onclick="showPic(this); return false;">烟花</a>
</li>
<li>
<a href="images/coffee.jpg" title="一杯卡布奇诺" onclick="showPic(this); return false;">咖啡</a>
</li>
<li>
<a href="images/rose.jpg" title="一束玫瑰" onclick="showPic(this); return false;">玫瑰</a>
</li>
<li>
<a href="images/bigben.jpg" title="著名的大本钟" onclick="showPic(this); return false;">大本钟</a>
</li>
</ul>
<!-- 占位符 -->
<img id="placeholder" src="data:images/placeholder.gif" alt="我的图片库" />
<!-- 显示文本 -->
<p id="description">请选择一张图片</p>
</body>
</html>
我们在标记清单上新增了一个描述节点，在显示图片时，把这个文本节点的值替换成目标图片的title的值
//替换占位符placeholder元素的src元素为whichpic元素的href属性
function showPic(whichpic) {
//whichpic:对应的<a>元素
var source = whichpic.getAttribute("href");//获取whichpic的href属性值
var placeholder = document.getElementById("placeholder");//获取占位符图片
placeholder.setAttribute("src",source);//刷新元素的src属性
var text = whichpic.getAttribute("title");//获取whichpic的title属性值
var description = document.getElementById("description");//获取用于描述的文本节点的值
description.firstChild.nodeValue = text;//刷新元素的文本内容
}
这里要扩展下JavaScript的childNodes属性，用于获取任何元素的所有子元素，然后根据每个节点都有的nodeType属性，判断节点类型
- 元素节点的nodeType属性值是1
- 属性节点的nodeType属性值是2
- 文本节点的nodeType属性值是3
nodeType的属性有12种值，但仅有上述三种有实用价值，这也意味着，可以编写只对特定类型节点进行处理的函数
需要注意到，在showPic代码中，我们使用的是
description.firstChild.nodeValue = text;//刷新元素的文本内容
因为直接使用nodeValue获取的节点值并不是对应的文本值，而是null，可以使用alert(description.nodeValue)进行验证。我们真正需要的是<p>元素包含的文本的 值，包含在<p>元素中的文本是另一种节点，也就是<p>元素的第一个子节点，所以使用description.childNodes[0].nodeValue就可以找到需要的文本，而我们使用的则是firstChild，即等同于childNodes[0]，同理，还有一个与之相对的lastChild等同于node.childNodes[node.childNodes.length - 1]，即最后一个子节点
完成了上述内容后，页面展示效果如下
到这里一个很不错的图片库就已经完成了，可以换上自己喜欢的图片在浏览器中看看是否满意，最后，我们还可以给这个页面披上一件漂亮的外衣---CSS样式
<style type="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;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none; /* 去掉左侧的点 */
}
img {
display: block;
clear: both;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
然后就可以看到页面的巨大变化了
以上就是《JavaScriptDOM编程艺术》一书中展示的图片库demo，如有错漏，欢迎指正，有疑问欢迎留言
JavaScriptDOM编程学习笔记（二）图片库案例的更多相关文章
- JavaScriptDOM编程学习笔记（一）DOM概述
首先介绍下DOM,一套对文档的内容进行抽象和概念化的方法.即Document Object Model,当创建了一个网页并加载到Web浏览器中时,DOM就把编写的网页转换为一个文档对象,而通过浏览器提 ...
- linux shell编程学习笔记(二) --- grep命令
Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...
- FFmpeg编程学习笔记二：音频重採样
ffmpeg实现音频重採样的核心函数swr_convert功能很强大,但是ffmpeg文档对它的凝视太过简单.在应用中往往会出这样那样的问题,事实上在读取数据->重採样->编码数据的循环中 ...
- 【Linux_Shell 脚本编程学习笔记二、打印菜单】
综合实例: 打印选择菜单,一键安装Web服务 [root@zuoyan script]# sh menu.sh 1.[install lamp] 2. [install lnmp] 3. [ex ...
- 多线程编程学习笔记——async和await（二）
接上文 多线程编程学习笔记——async和await(一) 三. 对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...
- 学习笔记(二)--->《Java 8编程官方参考教程（第9版）.pdf》:第七章到九章学习笔记
注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...
- 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理
(1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...
- 多线程编程学习笔记——async和await（一）
接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...
- 多线程编程学习笔记——async和await（三）
接上文 多线程编程学习笔记——async和await(一) 接上文 多线程编程学习笔记——async和await(二) 五. 处理异步操作中的异常 本示例学习如何在异步函数中处理异常,学习如何对多 ...
随机推荐
- 谈谈 Callable 任务是怎么运行的？它的执行结果又是怎么获取的?
谈谈 Callable 任务是怎么运行的?它的执行结果又是怎么获取的? 向线程池提交Callable任务,会创建一个新线程(执行任务的线程)去执行这个Callable任务,但是通过Future#get ...
- 我自己整理的 Linux 常用命令
1.查看文件安装路径: 由于软件安装的地方不止一个地方,所有先说查看文件安装的所有路径(地址). 这里以 xsp 为例.比如说我安装了xsp,但是不知道文件都安装在哪些地方.放在哪些文件夹里,可以用下 ...
- Notes:Unit Testing
UnitTesting shanzm 右键-->在新标签页中打开图片,即可查看原图,图片超乎你想像的大!
- Fluentvalidation的基本使用
前言: fluentvalidation用于构建强类型验证规则的流行.NET库.方便好用快捷省心!!! 本文按照官方文档进行试验,如果深(不)入(看)的(我)研(写)究(的)请去官网:https:// ...
- Vuex实现状态管理
Vuex使用总结 1 Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,Vuex抽取了各个组件的共享部分,以全局单例模式进行状态的管理.在原生vue中各个组件之间传值使用的 ...
- Python文件属性模块Os.path
Python文件属性模块Os.path介绍 os.path模块主要用于文件属性获取和判断,在编程中会经常用到,需要熟练掌握.以下是该模块的几种常用方法. os.path官方文档:http://docs ...
- Qt keyevent学习笔记
在按下一个键不放后,会发生: 1.触发keypressevent(),此时isautorepeat()返回false: 2.set isautorepeat(),使其返回值为true; 3.触发key ...
- JavaScript 究竟是怎样执行的？
摘要: 理解 JS 引擎运行原理. 作者:前端小智 原文:搞懂 JavaScript 引擎运行原理 Fundebug经授权转载,版权归原作者所有. 一些名词 JS 引擎 - 一个读取代码并运行的引擎, ...
- 如何disabled禁用所有表单input输入框元素
转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...
- Es6学习指南-1-函数变量
本篇章我们简述的是 es6初级知识点,认识es6,以及es6变量和es5的变量和函数. ECMAScript 6简介 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代 ...