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(二) 五. 处理异步操作中的异常 本示例学习如何在异步函数中处理异常,学习如何对多 ...
随机推荐
- vue组件、自定义指令、路由
1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- flutter-初识（基础语法）
前言:笔者学过 java,刚刚接触 flutter,记录下基本的一些语法. 一.认识Flutter Flutter 是 google 推出的,使用的 Dart 语言,它可以跨平台实现 Android ...
- 目标检测算法之Fast R-CNN和Faster R-CNN原理
一.Fast R-CNN原理 在SPPNet中,实际上特征提取和区域分类两个步骤还是分离的.只是使用ROI池化层提取了每个区域的特征,在对这些区域分类时,还是使用传统的SVM作为分类器.Fast R- ...
- golang 学习笔记 -- struct interface的使用
一个 interface 类型定义了一个方法集做接口. 区分goalng的方法和函数 func go() { fmt.Println('go to home') } 这是函数 type car str ...
- 【leetcode-200 深度优先+广度优先】 岛屿数量
给定一个由 '1'(陆地)和 '0'(水)组成的的二维网格,计算岛屿的数量.一个岛被水包围,并且它是通过水平方向或垂直方向上相邻的陆地连接而成的.你可以假设网格的四个边均被水包围. 示例 1: 输入: ...
- .net 将base64转为图片
1.base64的格式为: data:image/jpeg;base64,sandkansncquiueui3jk 2.ajax传输会把+转为空格 3.后台处理的代码: string imgPath ...
- python接收字符并回显
# -*- coding: utf-8 -* import serial import time # 打开串口 ser = serial.Serial("/dev/ttyAMA0" ...
- Laravel API跨域访问的实现步骤
本篇文章给大家带来的内容是关于Laravel API跨域访问的实现步骤,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 服务器A请求服务器B的接口,那么一般会出现跨域问题. 1 XML ...
- 【开发笔记】- AbstractRoutingDataSource动态数据源切换，AOP实现动态数据源切换
AbstractRoutingDataSource动态数据源切换 上周末,室友通宵达旦的敲代码处理他的多数据源的问题,搞的非常的紧张,也和我聊了聊天,大概的了解了他的业务的需求.一般的情况下我们都是使 ...
- oracle OCCI编程
1. 创建OCCI环境变量 Environment *env = Environment::createEnvironment(); Environment对象的建立必须放在第一位,而且也必须是最后一 ...