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(二) 五. 处理异步操作中的异常 本示例学习如何在异步函数中处理异常,学习如何对多 ...
随机推荐
- centos6.5 安装openresty
[1]centos6.5 安装openresty步骤 (1)基础依赖库安装 1.1 yum install pcre-devel openssl-devel gcc curl (2)openResty ...
- 小程序开发笔记【五】---基于LBS附近动态查询
实现思路 : 获取用户当前位置经纬度坐标 查询动态时将经纬度坐标传给后台 后端通过sql语句计算经纬度坐标之间的距离 // 附近20公里发的动态 按时间排序 let sql = `SELECT * , ...
- 2019年12月的第一个bug
现在是2019年12月1日0点27分,我的心情依旧难以平静.这个月是2019年的最后一个月,是21世纪10年代的最后一个月,也是第一批90后30岁以前的最后一个月.就是在这个月的第一天的0点0分,我写 ...
- Prometheus 监控目标运行状态并邮件通知
Prometheus 监控目标运行状态并邮件通知 邮件服务安装:https://www.cnblogs.com/xiangsikai/p/9809654.html 告警规则示例:https://pro ...
- RabbitMQ系列（二）环境搭建
参考: https://www.cnblogs.com/ericli-ericli/p/5902270.html https://blog.csdn.net/weixin_30619101/artic ...
- 【翻译】Tusdotnet中文文档（2）事件
tusdotnet-----一个tus文件上传协议的实现之事件 本章接上篇来继续翻译Tusdotnet的文档,按照如下结构来翻译: 事件 OnAuthorize OnFileComplete OnBe ...
- Python中的函数（高级使用）
一.将函数作为变量去使用 在Python中函数也是一种对象,是一种名为function的对象,所以可以将函数赋值给变量,类似整数.浮点数.列表.元组.字典赋值给变量. 我们编写如下程序: #codin ...
- VS Code如何在浏览器中打开Html文件？
1.首先打开扩展 “ 文件 → 首选项 → 按键映射扩展” 快捷键:[ Ctrl+K Ctrl+M ] 2.在出现的窗口输入“open in browser”,安装 3.打开Html文件 Alt+B: ...
- vue中路由拦截无限循环的情况
router.beforeEach(async (to, from, next) => { if (token) { if (whiteList.indexOf(to.path) != -1) ...
- zookeeper中的QuorumPeerMain解析
https://www.cnblogs.com/7758521gorden/p/8006983.html zookeeper中的QuorumPeerMain解析 在一个初级的hadoop与zook ...