JavaScript DOM编程艺术第四章笔记

4 案例研究: JavaScript图片库

4.1 本章内容

编写一个优秀的标记文件
编写一个JavaScript函数以显示用户想要查看的图片
由标记触发函数调用
使用几个新方法扩展这个JavaScript函数.

JavaScript图片库实现: 把整个图片库浏览链接集中安排在图片库的主页，用户点击链接这个主页的某个图片链接时，才把图片传递给他。

4.2 目标

实现一个JavaScript函数，显示用户想要查看的图片，利用DOM操作实现图片切换效果，显示不同文本。如果理解这节代码，可以直接跳过本章

javascript 复制代码

function showPic(whichPic) {
    // 展示图片
    document.getElementById("placeholder").setAttribute("src", whichPic.getAttribute("href"));
    // 显示描述
    var description = document.getElementById("description");
    var text = whichPic.getAttribute("title");
    description.firstChild.nodeValue = text;
}

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="styles/gallery.css">
</head>

<body>
    <h1>图片库</h1>
    <ui>
        <li><a href="image/toWest/monkey.webp" title="悟空" onclick="showPic(this);return false;">悟空</a></li>
        <li><a href="image/toWest/tulv.webp" title="唐僧" onclick="showPic(this);return false;">唐僧</a></li>
        <li><a href="image/toWest/pig.webp" title="八戒" onclick="showPic(this);return false;">八戒</a></li>
        <li><a href="image/toWest/wujing.webp" title="悟净" onclick="showPic(this);return false;">悟净</a></li>
        <li><a href="image/whiteSnake/whiteSnake.webp" title="白娘娘" onclick="showPic(this);return false;">白娘娘</a></li>
        <li><a href="image/whiteSnake/doctor.webp" title="许仙" onclick="showPic(this);return false;">许仙</a></li>
        <li><a href="image/whiteSnake/greenSnake.webp" title="小青" onclick="showPic(this);return false;">小青</a></li>
    </ui>
    <img id="placeholder" src="image/gallery.png" alt="placeholder">
    <p id="description">选择一个图片</p>
    <script type="text/javascript" src="scripts/showPic.js"></script>
</body>

</html>

css 复制代码

body {
    font-family: Arial, Helvetica, sans-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-type: none;
}

img {
    display: block;
    clear: both;
    max-width: 500px;
    max-height: 300px;
    object-fit: contain;
}

最终效果

4.3 标记

实现一个html网页，显示图片库数据，

基础准备代码如下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
</head>
<body>
    <h1>Snapshot</h1>
    <ui>
        <li><a href="image/toWest/monkey.webp" title="Monkey">Monkey</a></li>
        <li><a href="image/toWest/tulv.webp" title="tulv">tulv</a></li>
        <li><a href="image/toWest/pig.webp" title="Pig">Pig</a></li>
        <li><a href="image/toWest/wujing.webp" title="wujing">wujing</a></li>
        <li><a href="image/whiteSnake/whiteSnake.webp" title="White Snake">White Snake</a></li>
        <li><a href="image/whiteSnake/doctor.webp" title="Doctor">Doctor</a></li>
        <li><a href="image/whiteSnake/greenSnake.webp" title="Green Snake">Green Snake</a></li>
    </ui>
</body>
</html>

下面需要改进

点击某个链接时，在界面展示，不跳转其他页面
点击某个链接时，显示对应的图片，以及原有的图片清单

实现步骤：

增加占位符，用于显示图片，
点击链接时，拦截网页跳转
点击链接时，显示对应的图片，并隐藏原有的图片清单

占位符代码

html 复制代码

<img id="placeholder" src="image/gallery.png" alt="placeholder">

4.4. JavaScript函数

对 placeholder 图片的src属性进行赋值，即显示对应的图片。

javascript 复制代码

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

4.5 应用JavaScript函数

将javascript函数命名为showPic.js，并放在与html文件同一目录下的scripts文件夹中。

在html文件中body标签中,引用该js文件。

html 复制代码

<script type="text/javascript" src="scripts/showPic.js"></script>

4.5.1 事件处理函数(event handler)

作用：特定事件发生时，调用特定JavaScript函数。

如鼠标悬停 onmouserover; 鼠标离开 onmouseout; 单击 onclick; 键盘按下 onkeydown; 键盘松开 onkeyup; 页面加载完成 onload; 页面卸载 onunload; 等等。

在showPic函数中，我们需要在每个图片链接上添加onclick事件，并设置为showPic的参数，一个带href属性的图片对象。这里使用this关键字，表示当前的图片对象。

html 复制代码

    <li><a href="image/toWest/monkey.webp" title="Monkey" onclick="showPic(this)">Monkey</a></li>

4.5.2 阻止默认行为

当用户点击某个链接时，默认行为是跳转到另一个页面。我们需要阻止这个默认行为，只显示图片。

事件处理函数工作机制：当事件发生时，事件处理函数被调用，并返回一个布尔值。如果返回true，则继续执行默认行为；如果返回false，则阻止默认行为。

为了阻止点击图片时默认行为，我们需要返回false。

html 复制代码

    <li><a href="image/toWest/monkey.webp" title="Monkey" onclick="showPic(this); return false;">Monkey</a></li>

4.6 对这个函数进行扩展

效果：利用JavaScript和DOM，实现图片切换效果，显示不同文本

实现思路：从图片库取到图片title属性，并在网页显示

javascript 复制代码

    var text = this.getAttribute("title");

4.6.1 childNodes属性

childNodes属性返回一个包含当前元素所有子节点的NodeList对象。

查看body元素的全体子元素的个数

javascript 复制代码

function countBodyChildren() {
    var body = document.getElementsByTagName("body")[0];
    var count = body.childNodes.length;
    alert("body元素的子元素个数：" + count);
}

当界面加载时，调用countBodyChildren函数，显示body元素的子元素个数。

javascript 复制代码

window.onload = countBodyChildren();

childNodes属性返回一个包含当前元素所有子节点, 包括文本节点。所以显示的子元素个数会比标签个数多。

4.7 nodeType属性

nodeType属性返回一个整数，表示节点的类型。

nodeType常见的取值有：

1：元素节点
2：属性节点
3：文本节点

这意味着，可以让函数只对特定类型的节点进行操作。

4.8 在文本中增加描述

通过一个文本节点，维护图片库函数，将titlet属性的值显示在图片下方。,为了实现，在gallery.html文件中，增加描述

html 复制代码

    <p id="description">选择一个图片</p>

获取description

javascript 复制代码

    var description = document.getElementById("description");

4.9.1 nodeValue属性

nodeValue属性返回或设置当前节点的文本内容

但是，nodeValue属性获取description节点的文本内容时，会返回null。

因为标签p没有文本内容，所以返回null。

而标签p的第一个子节点的nodeValue值才是其文本内容。

javascript 复制代码

    var description = document.getElementById("description");
    var text = description.childNodes[0].nodeValue;
    alert(text);

4.8.2 firstChild属性和lastChild属性

firstChild属性返回或设置当前元素的第一个子节点。

lastChild属性返回或设置当前元素的最后一个子节点。

那么，设置description节点的文本内容，可以用firstChild属性。

最终可以得到showPic函数如下：

javascript 复制代码

function showPic(whichPic) {
    // 展示图片
    document.getElementById("placeholder").setAttribute("src", whichPic.getAttribute("href"));
    // 显示描述
    var description = document.getElementById("description");
    var text = whichPic.getAttribute("title");
    description.firstChild.nodeValue = text;

4.9 总结

本章介绍了JavaScript图片库的实现，包括标记、JavaScript函数、事件处理函数、阻止默认行为、扩展功能等。

通过本章的学习，可以更好地理解JavaScript的DOM操作，以及事件处理函数的使用。

DOM属性

childNodes：返回一个包含当前元素所有子节点的NodeList对象。
firstChild：返回或设置当前元素的第一个子节点。
lastChild：返回或设置当前元素的最后一个子节点。
nodeType：返回一个整数，表示节点的类型。
nodeValue：返回或设置当前节点的文本内容。

4.10 扩展阅读

4.11 参考

JavaScript 图片库
JavaScprpt DOM 编程艺术（第2版）第四章

JavaScript DOM编程艺术 第四章笔记

4 案例研究: JavaScript图片库

4.1 本章内容

4.2 目标

4.3 标记

4.4. JavaScript函数

4.5 应用JavaScript函数

4.5.1 事件处理函数(event handler)

4.5.2 阻止默认行为

4.6 对这个函数进行扩展

4.6.1 childNodes属性

4.7 nodeType属性

4.8 在文本中增加描述

4.9.1 nodeValue属性

4.8.2 firstChild属性和lastChild属性

4.9 总结

4.10 扩展阅读

4.11 参考

JavaScript DOM编程艺术第四章笔记