读《JavaScript DOM编程艺术(第二版)》实践

最新推荐文章于 2023-05-27 15:34:11 发布

小白的程序空间

最新推荐文章于 2023-05-27 15:34:11 发布

阅读量192

点赞数

分类专栏： Web前端技术汇总文章标签： html5 javascript css

本文链接：https://blog.csdn.net/crazy_cz/article/details/109089509

版权

Web前端技术汇总专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何实现在点击页面链接时保持页面不跳转，同时加载并显示指定图片及其原图列表，还演示了如何添加图片名称显示和CSS样式。通过JavaScript的事件处理函数和DOM操作，创建了一个交互式的图片库。

摘要由CSDN通过智能技术生成

实践1：

目标效果：

当点击某个链接时，希望能留在这个页面而不是转到另一个窗口
当点击某个链接时，希望在这个页面上同时看到那张图片及原有的图片清单
实现代码如下所示：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="showPic.js"></script>
    <title>Image Gallery</title>
</head>

<body>
    <h1>Snapshots</h1>
    <ul>
        <!-- 在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值将被传递给那个事件处理函数。 -->

        <!-- 例如：我们给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样，当这个链接被点击时，如果这段Javascript代码返回的值是false，onclick事件处理函数就认为"这个链接被点击了"；反之，如果返回的值是false，onclick事件处理函数就认为"这个链接没有被点击" -->
        <!-- showPic()函数需要一个带有herf属性的元素节点参数。 -->
        <li><a href="images/v2-1668b0bd0f594d21e62dab4cbc6d42a1_720w.jpg" onclick="showPic(this); return false;"
                title="coolgirl one">cool girl one</a></li>
        <!-- 接下来，我们要在图片列表的每个链接上添加事件处理函数，这当然有些麻烦，但眼下我们只能这么做。在第六章，将介绍一个避免这个麻烦的办法。 -->
        <li><a href="images/v2-1c41689c7d3d2047a9f569147afba6d5_720w.jpg" onclick="showPic(this); return false;"
                title="coolgirl two">cool girl two</a></li>
        <li><a href="images/v2-2699506aa735d0ce4052c02eb671e84f_720w.jpg" onclick="showPic(this); return false;"
                title="coolgirl three">cool girl three</a>
        </li>
        <li><a href="images/v2-658283ed1d66a56f043ad58052f254a2_720w.jpg" onclick="showPic(this); return false;"
                title="coolgirl four">cool girl four</a></li>
        <li><a href="images/v2-855ceb5a7ad856b609bda935be6e7eef_720w.jpg" onclick="showPic(this); return false;"
                title="coolgirlfive">cool girl five</a></li>
        <li><a href="images/v2-d4b138841cef36d1b57db45aa2801cb0_720w.jpg" onclick="showPic(this); return false;"
                title="coolgirl six">cool girl six</a></li>
        <li><a href="images/v2-edf2a27783a14d8cfa9014cbec835e81_720w.jpg" onclick="showPic(this); return false;"
                title="coolgirlseven">cool girl seven</a></li>
    </ul>
    <img id="placerholder" src="images/plane.jpg" alt="my images Gallery">


/*为了把“占位符”图片替换成想要查看的图片，需要改变它的src属性。setAttribute是完成这项工作的最佳选择。利用这个方法写一个函数，这个函数只有一个参数，即一个图片链接。它通过改变“占位符”图片的src属性的办法将其替换为参考图片。*/
//whichpic代表一个元素节点

function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    // 获取"占位符"图片
    var placerholder = document.getElementById("placerholder");
    //setAttribute(“属性名”，属性值)仅能改变元素中的属性，对 对象没有效果。
    placerholder.setAttribute("src", source);
}

/*接下来，我们需要给图片列表的链接添加行为，也就是事件处理函数（event handler），才能达到目标。*/

/* 事件处理函数：
   在特定事件发生时调用特定的JavaScript代码。在我的图片库里，我想在用户点击某个链接时触发一个动作，所以需要使用onclick事件处理函数。
   需要注意的是showPic()函数需要一个参数：一个带有href属性的元素节点参数。当我把onclick事件处理函数嵌入到一个链接中时，需要把这个链接本身作为showPic函数的参数。
   非常简单有效的方法：使用this关键字。这个关键字在这儿的含义是“这个对象”。
*/

效果：

当点击“cool girl one”时，如下效果：

实践1进阶：

效果：点击列表链接后，下方显示图片的同时，也会显示图片名称。且添加了CSS样式。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="layout.css" media="screen">
</head>

<body>
    <h1>Cool girls</h1>
    <ul9>
        <li><a href="images/coolgirl1.jpg" title="coolgirl1" onclick="showPic(this);return false">coolgirl1</a></li>
        <li><a href="images/coolgirl3.jpg" title="coolgirl2" onclick="showPic(this);return false">coolgirl2</a></li>
        <li><a href="images/coolgirl2.jpg" title="coolgirl3" onclick="showPic(this);return false">coolgirl3</a></li>
        <li><a href="images/coolgirl4.jpg" title="coolgirl4" onclick="showPic(this);return false">coolgirl4</a></li>
        <li><a href="images/coolgirl5.jpg" title="coolgirl5" onclick="showPic(this);return false">coolgirl5</a></li>
        <li><a href="images/coolgirl6.jpg" title="coolgirl6" onclick="showPic(this);return false">coolgirl6</a></li>
        <li><a href="images/coolgirl7.jpg" title="coolgirl7" onclick="showPic(this);return false">coolgirl7</a></li>
        <li><a href="images/coolgirl8.jpg" title="coolgirl8" onclick="showPic(this);return false">coolgirl8</a></li>
        <li><a href="images/coolgirl9.jpg" title="coolgirl9" onclick="showPic(this);return false">coolgirl9</a></li>
    </ul9>
    <!-- 占位符 -->
    <img id="placeholder" src="images/plane.jpg" alt="plane">
    <!-- 想要的效果：在某个图片链接被点击时，不仅要把“占位符”图片替换为那个链接的href属性所指向的图片，还要把这段文本同时替换为那个图片链接的titl属性 -->
    <p id="description">Choose an image.</p>
    <script src="showPic.js"></script>

</body>

</html>

body{
    font-family: "Helvetica","Arial",serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
    text-align: center;
}
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;
} */

//第一步：建立showPic()函数获取<a>元素，参数是元素，再调用元素中的属性
function showPic(whichpic) {
    //第二步：获取HTML中a中的href,使用getAttribute
    var source = whichpic.getAttribute("href");
    //第三步：获取HTML中img的src,首先需使用getElementById，找到img
    var placeholder = document.getElementById("placeholder");
    //第四步：使用setAttribute("属性"，元素)改变img中src的内容，替换成a中的href
    placeholder.setAttribute("src", source);
    //第五步，获取whichpic对象的title属性值
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    /*node.nodeValue，用来得到（和设置）一个节点的值。
但在用nodeValue属性获取description对象的值时，得到的并不包含在这个段落里的文本*/
    //node.firstChild == node.childNodes[0]
    alert(description.firstChild.nodeValue);
    description.firstChild.nodeValue = text;
}

function countBodyChildren() {
    //每份文档中只有一个body元素。此时，body_element已经指向了HTML文档的body元素。
    var body_element = document.getElementsByTagName("body")[0];
    //childNodes属性可以用来获取任何一个元素的所有子元素
    alert(body_element.childNodes.length);
    //nodeType是数值，一共有12种可取值，但其中仅有3种具有实用价值。
    /*元素节点的nodeType属性值是1
      属性节点的nodeType属性值是2
      文本节点的nodeType属性值是3
    */
    alert(body_element.nodeType);
}

showPic(this);
// window.onload = countBodyChildren();

小白的程序空间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
读《JavaScript DOM编程艺术(第二版)》实践

实践1：目标效果：当点击某个链接时，希望能留在这个页面而不是转到另一个窗口当点击某个链接时，希望在这个页面上同时看到那张图片及原有的图片清单实现代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫

专栏目录