本书的第4章使用第3章学到的操作DOM的方法和属性写了一个展示图片的网页，并在第5，6章对代码进行了优化。

第一版，搭建网页的静态结构，包括一级标题<h1>，无序列表清单<ul>，每个列表<li>中又包括了链接<a>，当点击列表文字时会显示链接所指向的图片，这属于浏览器的默认行为。代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charest="utf-8"/>
  5.   <title>照片库</title>
  6. </head>
  7. <body>
  8.    <h1>My Photoes Gallery</h1>
  9.    <ul>
  10.      <li><a href="pictures/ASH1.png" title="空气弹簧">ASH</a></li>
  11.      <li><a href="pictures/LS1.png" title="片弹簧">LS</a></li>
  12.      <li><a href="pictures/MN1.png" title="磁负刚度">MN</a></li>
  13.      <li><a href="pictures/PAN.png" title="倒立摆">PAN</a></li>
  14.    </ul>
  15. </body>
  16. </html>

问题：显示图片后只能通过后退回到列表清单界面，希望实现图片与列表在同一界面，点击列表文字后直接将图片及说明显示在下方。

第二版，点击链接时直接将图片及说明显示在下方

操作步骤分为3步：

1，结构上添加图片占位符和文本占位符

2，js中写一个函数，用链接中的href属性替换图片占位符中的src属性，用链接中的title属性替换文本占位符的值

3，在html中相应节点上添加事件处理函数，应用js中所写的函数，注意需要阻止点击的默认行为

html代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charest="utf-8"/>
  5.   <title>照片库</title>
  6. </head>
  7. <body>
  8.    <h1>My Photoes Gallery</h1>
  9.    <ul>
  10.      <li><a href="pictures/ASH1.png" title="空气弹簧" 
         onclick="showPics(this);return false;">ASH</a></li>
  11.      <li><a href="pictures/LS1.png" title="片弹簧" 
         onclick="showPics(this);return false;">LS</a></li>
  12.      <li><a href="pictures/MN1.png" title="磁负刚度" 
         onclick="showPics(this);return false;">MN</a></li>
  13.      <li><a href="pictures/PAN.png" title="倒立摆" 
         onclick="showPics(this);return false;">PAN</a></li>
  14.    </ul>
  15.    <img id="placeholder" src="" alt="该图片已损坏或无法显示"/>
  16.    <p id="description">description of picture</p>
  17.  
  18.    <script src="ShowPics.js"></script>
  19. </body>
  20. </html>

js代码如下：

  1. function showPics(whichPic){
  2.     //获取链接节点，获取图片节点，将链接节点中的href属性赋给图片节点中的src属性
  3.     var source=whichPic.getAttribute("href");
  4.     var myimage=document.getElementById("placeholder");
  5.     myimage.setAttribute("src",source);
  6.     //用链接节点中的title属性替换文本节点的值
  7.     var mytext=document.getElementById("description");
  8.     var context=whichPic.getAttribute("title");
  9.     mytext.firstChild.nodeValue=context;
  10. }

注意：

1，在onclick事件中添加 return false;表示默认行为没有被触发即阻止了默认行为。

2，给图片占位符赋值时除了用setAttribute还可以用一种非DOM的方法，直接给元素的属性赋值 myimage.src=source，但这种方法并不适用于所有的属性，一般还是使用setAttribute，适用于所有属性。

3，给文本节点赋值时，需要注意修改的是p节点的第一个子节点，这个节点才是显示在界面上的文字。

4，src和href的区别

src（source）用引入的内容替换当前元素，常用于script，img，frame，

浏览器解析到该元素时会停止渲染知道文件加载完毕，所以将js文件放在body的最后；

href是一种引用，在当前文档与引用资源之间建立起一种联系，常用于a，link，

浏览器解析不会停止，所以用href引用css文件。

问题：

为提高代码的兼容性、可访问性，需要检查js功能被禁用时是否支持平稳退化；js与html是否完全分离；对DOM方法或使用到的元素是否存在进行检测

1，js代码没有与html完全分开，事件处理函数仍在html中

2，缺少必要的测试环节，如html中某些元素不存在

第三版：将事件处理函数从html中独立出来，该函数需要实现的功能：当点击某一链接时，将该链接传递给showPic（）函数，去掉点击的默认行为

html代码只需要将onload函数去掉，在ul标签上加id属性

js代码如下：

  1. function showPics(whichPic){
  2.     //增加测试
  3.     if(!document.getElementById("placeholder"))return false;
  4.     //获取链接节点，获取图片节点，将链接节点中的href属性赋给图片节点中的src属性
  5.     var source=whichPic.getAttribute("href");
  6.     var myimage=document.getElementById("placeholder");
  7.     myimage.setAttribute("src",source);
  8.     //用链接节点中的title属性替换文本节点的值，能否用nodeValue?可以，但是是p节点的第一个子节点的属性值
  9.     if(!document.getElementById("description"))return false;
  10.     var mytext=document.getElementById("description");
  11.     var context=whichPic.getAttribute("title");
  12.     mytext.firstChild.nodeValue=context;
  13. }
  14. function seperateclick(){
  15.     //1,测试当前浏览器是否理解DOM方法
  16.     if(!document.getElementById)return false;
  17.     if(!document.getElementsByTagName)return false;
  18.     var gallery=document.getElementById("picturegallery");
  19.     if(!gallery)return false;//疑问？能否先赋值再测试
  20.     //2,遍历列表中的所有链接，当某一链接被点击时，把这一链接传递给showPics函数，取消默认行为
  21.     //先将所有的链接存放在一个数组中
  22.     var links=gallery.getElementsByTagName("a");
  23.     //循环遍历
  24.     for(var i=0;i<links.length;i++){
  25.         links[i].onclick=function() {
  26.             showPics(this);
  27.             return false;
  28.         }
  29.     }
  30. }
  31. window.onload=seperateclick;

JavaScript DOM编程艺术（第2版）学习笔记2（4~6章应用实例）的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  3. 《JavaScript DOM编程艺术（第二版）》读书总结

    这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...

  4. 【读书笔记】读《JavaScript DOM 编程艺术-第2版》

    1.DHTML DHTML曾被认为是HTML/XHTML.CSS和JavaScript相结合的产物,就像今天的HTML5那样,但把这些东西真正凝聚在一起的是DOM.如果真的需要来描述这一过程的话,“D ...

  5. JavaScript -- JavaScript DOM 编程艺术(第2版)

    /* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="styleshe ...

  6. Javascript DOM 编程艺术（第二版）读书笔记——DOM基础

    1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父)   child(子)   sibling(兄弟)   ...

  7. 《JavaScript DOM 编程艺术 第 2 版》

    第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案 ...

  8. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  9. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  10. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

随机推荐

  1. java中4种修饰符访问权限的区别及详解全过程

    java中4种修饰符访问权限的区别及详解全过程 http://jingyan.baidu.com/article/fedf0737700b3335ac8977ca.html java中4中修饰符分别为 ...

  2. 页面footer在底部

    页脚动态贴在底部需要满足以下两个条件: 当主体的内容高度不超过可视区域高度的时候,页脚贴在页面底部. 当主体的内容高度超过可视区域高度的时候,页脚将按正常布局. 方法一:footer高度固定+绝对定位 ...

  3. CDR快速制作苹果手机照片小图标

    本篇教程用CorelDRAW快速制作苹果手机照片小图标,在实现的过程中主要使用了旋转复制的方法,加之一些常用工具的用法处理,最后加上透明效果下的合并模式就好了,现在跟小编一起来看看详细的操作吧! 1. ...

  4. 使用jquery获取css的top和left属性

    使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var t ...

  5. sublime Text3的使用

    sublime text百度百科: Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python ...

  6. 训练1-R

    给出一个长度为N的数组,进行Q次查询,查询从第i个元素开始长度为l的子段所有元素之和. 例如,1 3 7 9 -1,查询第2个元素开始长度为3的子段和,1 {3 7 9} -1.3 + 7 + 9 = ...

  7. windows系统中软件开发常用的软件

    1.windwos快速打开控制面板:热键+r打开运行框,输入control就打开windows的控制面板了 2.windows自带的远程桌面控制系统:mstsc -Microsoft terminal ...

  8. [Linux]第三部分-学习Shell和Shell脚本

    vim 高级的 vii o a 进入编辑模式 esc进入一般模式:wq离开alias vi='vim' 使用vim打开viv块选择 y复制反白,d删除反白在vi中打开一个文件后,可以使用 sp fil ...

  9. Python Study （05）装饰器

    装饰器(decorator)是一种高级Python语法.装饰器可以对一个函数.方法或者类进行加工.在Python中,我们有多种方法对函数和类进行加工,比如在Python闭包中,我们见到函数对象作为某一 ...

  10. Linux线程资源限制