《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编程学习笔记（二）图片库案例的更多相关文章

  1. JavaScriptDOM编程学习笔记（一）DOM概述

    首先介绍下DOM,一套对文档的内容进行抽象和概念化的方法.即Document Object Model,当创建了一个网页并加载到Web浏览器中时,DOM就把编写的网页转换为一个文档对象,而通过浏览器提 ...

  2. linux shell编程学习笔记(二) --- grep命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  3. FFmpeg编程学习笔记二：音频重採样

    ffmpeg实现音频重採样的核心函数swr_convert功能很强大,但是ffmpeg文档对它的凝视太过简单.在应用中往往会出这样那样的问题,事实上在读取数据->重採样->编码数据的循环中 ...

  4. 【Linux_Shell 脚本编程学习笔记二、打印菜单】

    综合实例: 打印选择菜单,一键安装Web服务 [root@zuoyan   script]# sh menu.sh 1.[install  lamp] 2. [install lnmp] 3. [ex ...

  5. 多线程编程学习笔记——async和await（二）

    接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...

  6. 学习笔记(二)--->《Java 8编程官方参考教程（第9版）.pdf》:第七章到九章学习笔记

    注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...

  7. 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理

    (1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...

  8. 多线程编程学习笔记——async和await（一）

    接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...

  9. 多线程编程学习笔记——async和await（三）

    接上文 多线程编程学习笔记——async和await(一) 接上文 多线程编程学习笔记——async和await(二) 五.   处理异步操作中的异常 本示例学习如何在异步函数中处理异常,学习如何对多 ...

随机推荐

  1. API管理之YApi实现前后端高度分离

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11972789.html,多谢,=.=~ 背景描述   前后端分离已成为互联网项目开发的业界标准使 ...

  2. 【01】Jenkins：安装配置

    写在前面的话 从我的工作经历来看,刚出来的时候的第一家公司我们上线采用的是脚本上线.就是那种开发合并完代码以后,在一个固定的时间点,我们上服务器执行更新脚本打包更新.这种方法有一个很大的问题,就是对于 ...

  3. Canon MF113W激光打印机双面打印方法

    系统:macOS 10.14.3 打印机:Canon MF113W 黑白激光打印机(不支持自动双面打印) 方法: 1)文件->打印->纸张处理->仅奇数页->倒序->打印 ...

  4. 第13章 C#中的多线程

    章多线程 13.1 线程概述 计算机的操作系统多采用多任务和分时设计.多任务是指在一个操作系统中开以同时运行多个程序.例如,可以在使用QQ聊天的同时听音乐,即有多个独立的任务,每个任务对应一个进程,每 ...

  5. Java内功心法，创建型设计模式包括哪些

    1. 单例(Singleton) Intent 确保一个类只有一个实例,并提供该实例的全局访问点. Class Diagram 使用一个私有构造函数.一个私有静态变量以及一个公有静态函数来实现. 私有 ...

  6. linux命令之——grep详解

    grep命令用于查找文件里符合条件的字符串:也可以用于查找内容包含指定的范本样式的文件.它能使用正则表达式搜索,用于在文件中搜索指定的字符串模式,列出含有匹配模式子符串的文件名,并输出含有该字符串的文 ...

  7. 实验吧——忘记密码了（vim备份文件，临时文件（交换文件））

    题目地址:http://ctf5.shiyanbar.com/10/upload/step1.php 前些天突然发现个游戏,于是浪费了好多时间,终于还是忍住了,现在专心学习,从今天开始正式写些学习笔记 ...

  8. H5新增form控件和表单属性

    第一个知识点:表单的属性及总结 第二个知识点:H5新增的表单控件和属性以及总结 第一个知识点: 我们常见的表单验证有哪些呢 text 文本框标签 password 密码框 checkbox 多选框 r ...

  9. Golang循环中调用go func参数异常分析

    项目中,需要循环调用API服务器列表,在循环中使用go func创建协程时遇到了参数失灵的现象. 具体代码如下所示: for _, apiServerAddr := range apiServerAd ...

  10. Excel分列，Excel 列拆分，Excel根据分隔符号拆分某列

    解决方案: https://zhidao.baidu.com/question/572807483.html 步骤:数据--分列--下一步--其它---下一步-- 注意的此操作会覆盖当前列和后n列(根 ...