JavaScript DOM 学习笔记（四）

2019独角兽企业重金招聘Python工程师标准>>>

案例：将整个图片库的浏览连接几种安排在图片库主页里，在用户点击某个图片链接时才把相应的图片传送出来。

图片素材：将图片素材存放入 images文件夹中，并将文件夹与 html 放在同一级目录下。

<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title>
</head>
<body><h1>Snapshots</h1><ul><li><a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a></li><li><a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a></li><li><a href="images/rose.jpg" title="A red, red rose">Rose</a></li><li><a href="images/bigben.jpg" title="The famous clock">Big Ben</a></li></ul>
</body>
</html>

如果图片已经排好顺序，可以用有序清单元素 <ol> 来标记这些图片链接。

这样这个网页就做好了，但是如果想浏览不同的图片，就需要借助浏览器的后退按钮。可以做如下改进：

a. 通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域

b. 点击某个图片的链接时，拦截网页的默认行为（跳转到图片页面），并将图片显示在“占位符”图片

将代码： <img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" /> 插入到 </ul> 后。效果图如下：

下面要编写 JavaScript 代码来实现显示图片了。

建议将 JavaScript 代码写入单独的 .js 文件，在 html 文档中应用。我们新建一个 showPic.js 并放入 html 文档的相同目录下的 scripts 文件夹中。代码如下：

<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title>
</head>
<body><h1>Snapshots</h1><ul><li><a href="images/fireworks.jpg" title="A fireworks display" onClick="showPic(this);return false;">Fireworks</a></li><li><a href="images/coffee.jpg" title="A cup of black coffee" onClick="showPic(this);return false;">Coffee</a></li><li><a href="images/rose.jpg" title="A red, red rose" onClick="showPic(this);return false;">Rose</a></li><li><a href="images/bigben.jpg" title="The famous clock" onClick="showPic(this);return false;">Big Ben</a></li></ul><img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" /><script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

function showPic(whichPic) {var placeholder = document.getElementById("placeholder");var picSrc = whichPic.getAttribute("href");placeholder.setAttribute("src", picSrc);
}

若一个站点用到多个 JavaScript 文件，为了减少对站点的请求次数（提高性能），应该尽量把这些 .js 文件合并到一个文件中。

上面代码中使用到了 onclick 事件处理函数，并且在使用函数 showPic（this）时使用了 this 关键字，this 代表了 <a> 这个元素节点。同时我们应该注意到，在showPic（）函数后面，我们增加了 return=false; 代码，这是为了阻止链接被点击时跳转的默认行为。

事件处理函数的工作机制：在给某个元素添加了事件处理函数后，一旦事情发生，相应的 JavaScript 代码就会被执行。被调用的 JavaScript 代码可以返回一个值，这个值将被传递给那个事件处理函数。所以上面我们使用 return=false; 来阻止跳转到链接窗口。

下面我们给显示的图片加一个文本描述，每次点击图片的时候，将图片的 title 显示出来。在“占位符”图片下面加一个 <p>元素：

<p id="description">Choose a image</p>

使用前一篇中的 childNodes、nodeValue、firstChild 等元素属性来改变 description。在 showPic.js 的 showPic function 中做出修改。

function showPic(whichPic) {//show picturevar placeholder = document.getElementById("placeholder");var picSrc = whichPic.getAttribute("href");placeholder.setAttribute("src", picSrc);//replace description of imagevar text = whichPic.getAttribute("title");var description = document.getElementById("description");description.firstChild.nodeValue = text;
}

如果想让图片库更美观，可以加入以下 css 样式表，并在 <head> 中加入 <link> 标签引入样式。

link rel="stylesheet" type="text/css" href="styles/layout.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;
}

转载于:https://my.oschina.net/u/1757476/blog/543799

JavaScript DOM 学习笔记（四）相关推荐

JavaScript DOM学习笔记
DOM(Document Object Model) dom提供了操作html和xml的机会,他是一个操作html和xml功能的一类对象的集合 DOM的基本操作 document代表整个文档 Node ...
JavaScript DOM 学习笔记
文章目录 Dom 基础 Dom 基本概念节点类型获取元素 getElementByld() getElementsByTagName() getElementsByClassName() quer ...
JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
JavaScript-WebGL2学习笔记四-蒙板
stencil test(蒙板) demo的显示效果这个例子由四个源文件构成 webgl.html <html> <head><!--Title: JavaScript ...
C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
RabbitMQ学习笔记四：RabbitMQ命令（附疑难问题解决）
RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) 参考文章: (1)RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) (2)https://www.cnblogs. ...
JSP学习笔记(四十九)：抛弃POI，使用iText生成Word文档
POI操作excel的确很优秀,操作word的功能却不敢令人恭维.我们可以利用iText生成rtf文档,扩展名使用doc即可. 使用iText生成rtf,除了iText的包外,还需要额外的一个支持rt ...
Ethernet/IP 学习笔记四
Ethernet/IP 学习笔记四 EtherNet/IP Quick Start for Vendors Handbook (PUB213R0): https://www.odva.org/Port ...

JavaScript DOM 学习笔记（四）

JavaScript DOM 学习笔记（四）相关推荐

最新文章

热门文章