JavaScript DOM编程艺术第四章案例研究笔记

名字填充中

已于 2024-03-31 22:42:43 修改

阅读量1k

点赞数 7

分类专栏： JavaScript DOM 编程艺术笔记前端 JavaScript 文章标签： javascript 笔记开发语言前端

于 2024-03-24 20:24:10 首次发布

本文链接：https://blog.csdn.net/qq_42388742/article/details/136994224

版权

JavaScript DOM 编程艺术笔记同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

4 案例研究: JavaScript图片库

4.1 本章内容

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

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

4.2 目标

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

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;
}

<!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>

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网页，显示图片库数据，
基础准备代码如下

<!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>

下面需要改进

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

实现步骤：

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

占位符代码

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

4.4. JavaScript函数

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

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

4.5 应用JavaScript函数

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

<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关键字，表示当前的图片对象。

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

4.5.2 阻止默认行为

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

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

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

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

4.6 对这个函数进行扩展

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

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

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

4.6.1 childNodes属性

childNodes属性返回一个包含当前元素所有子节点的NodeList对象。
查看body元素的全体子元素的个数

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

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

window.onload = countBodyChildren();

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

4.7 nodeType属性

nodeType属性返回一个整数，表示节点的类型。
nodeType常见的取值有：

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

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

4.8 在文本中增加描述

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

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

获取description

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

4.9.1 nodeValue属性

nodeValue属性返回或设置当前节点的文本内容
但是，nodeValue属性获取description节点的文本内容时，会返回null。
因为标签p没有文本内容，所以返回null。

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

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

4.8.2 firstChild属性和lastChild属性

firstChild属性返回或设置当前元素的第一个子节点。
lastChild属性返回或设置当前元素的最后一个子节点。
那么，设置description节点的文本内容，可以用firstChild属性。

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

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版）第四章

名字填充中

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术第四章案例研究笔记

本章介绍了JavaScript图片库的实现，包括标记、JavaScript函数、事件处理函数、阻止默认行为、扩展功能等。通过本章的学习，可以更好地理解JavaScript的DOM操作，以及事件处理函数的使用。DOM属性childNodes：返回一个包含当前元素所有子节点的NodeList对象。firstChild：返回或设置当前元素的第一个子节点。lastChild：返回或设置当前元素的最后一个子节点。nodeType：返回一个整数，表示节点的类型。
复制链接

扫一扫