Javascript.DOM编程艺术读书笔记(第4章）

最新推荐文章于 2019-04-19 16:11:31 发布

凡大喵

最新推荐文章于 2019-04-19 16:11:31 发布

阅读量362

点赞数

分类专栏：读书笔记文章标签： JavaScript学习图片库demo 读书笔记

本文链接：https://blog.csdn.net/weixin_44202459/article/details/88259842

版权

读书笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

其余章节链接

案例研究：JavaScript图片库

任务目标：

使用JavaScript创建图片库，把整个图片库的链接集中安排在浏览器主页里，只在用户点击了这个主页里的某个图片链接时显示相应的图片和图片描述

知识要点：

再给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值将被传递给那个时间处理函数。例：当点击这个链接时，因为onclick事件处理函数所触发的JavaScript代码返回给它的值是false，所以这个链接的默认行为不会被触发

<a href ="http://www.csdn.net" onclick="return false;">Click me</a>

在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组
childNodes属性只能用于window.onload的时候，页面已加载完后使用会报错
nodeType属性总共有12种可取值，但仅有3种具有实用价值，元素节点属性值为1，属性节点属性值为2，文本节点属性值为3
获取<p>标签内文本的值，实际上获取的是它的第一个子节点的nodeValue属性值

alert(text.nodeValue);//返回的值为null
alert(text.firstchild.nodeValue);//返回的值为文本内容

实现代码:

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>logos</title>
    <link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
    <h1>Auto Logos</h1>
    <ul>
        <li>
            <a href="images/audi.jpg" title="奥迪" onclick="showpic(this);return false;">奥迪</a>
        </li>
        <li>
            <a href="images/bmw.jpg" title="宝马" onclick="showpic(this);return false;">宝马</a>
        </li>
        <li>
            <a href="images/byd.jpg" title="比亚迪" onclick="showpic(this);return false;">比亚迪</a>
        </li>
        <li>
            <a href="images/dazh.jpg" title="大众" onclick="showpic(this);return false;">大众</a>
        </li>
    </ul>
    <img id="default" src="images/0.png" alt="默认图片">
    <p id="info">选择图片</p>    
    <script src="js/showpic.js"></script>
</body>
</html>

style.css

body{
    font-family: Arial, Helvetica, sans-serif;
    color: #edf1f3;
    background-color: #5b717c;
    margin: 1em 10%;
}

h1{
    color: #333;
    background-color: transparent;
}

a{
    color: #fff;
    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;
    width: 270px;
    height: auto;
}

p{
    color: #fff;
    font: bold;
    width: 270px;
    text-align: center;
}

showpic.js

function showpic(whichpic){
    var pic = whichpic.getAttribute("href");
    var defaults = document.getElementById("default");
    defaults.setAttribute("src",pic);
    var text = whichpic.getAttribute("title")
    var info = document.getElementById("info");
    info.firstChild.nodeValue = text;
}
//统计<body>子元素的个数
function countBodyChildren(){
    var body_count = document.getElementsByTagName("body")[0];
    alert(body_count.childNodes.length);
}
// window.onload = countBodyChildren;

凡大喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript.DOM编程艺术读书笔记(第4章）

案例研究：JavaScript图片库任务目标：使用JavaScript创建图片库，把整个图片库的链接集中安排在浏览器主页里，只在用户点击了这个主页里的某个图片链接时显示相应的图片和图片描述知识要点：再给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值将被传递给那个时间处理函数。例：当点击这个...
复制链接

扫一扫