JavaScript DOM编程艺术（第2版）第四章 JavaScript图片库第五章最佳实践第六章图片库的改进版-CSDN博客

本文链接：https://blog.csdn.net/weixin_41056807/article/details/83999227

第四章 JavaScript图片库

点击有a链接的图片，不发生跳转页面再显示图片而是在本页展示图片

占位符
最好使用一个有序清单元素（ol）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>javascript</h1>

<ul>
    <li><a href="../img/flower1.jpg" title="A Fireworks Display" onclick="showPic(this);return false;">Firework</a></li>
    <li><a href="../img/flower2.jpg" title="A cup of coffee" onclick="showPic(this);return false;">Coffee</a></li>
    <li><a href="../img/flower3.jpg" title="A red rose" onclick="showPic(this);return false;">Rose</a></li>
    <li><a href="../img/flower5.jpg" title="The Famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
    <img src="../img/timeqq.png" alt="my image gallery" id="placeholder" width="500px">
</ul>
<script>
    function showPic(whichpic) {
         event="JavaScript statement(s)";//添加事件处理函数?????
        var source=whichpic.getAttribute("href");
        // document.getElementById("placeholder");
        var placeholder=document.getElementById("placeholder");
        placeholder.setAttribute("src",source);
        // var text=whichpic.getAttribute("title");
        // var describe=document.getElementById('describe');
        // describe.childNodes[0].nodeValue=text;
    }
</script>
</body>
</html>

在这里插入图片描述

二.事件处理函数

1.鼠标悬停触发事件onmouseover
2.鼠标离开触发事件onmouseout
3.点击链接触发事件onclick
点击事件增加return false；防止用户被带到目标链接窗口

三.让每次点击链接显示图片的同时显示他对应的文本内容

1.childNodes属性：获取任何一个元素的所有子元素。他是包含这个元素全部子元素的数组。
如：找body元素中所有子元素

var body_elemnet = document.getElementsByTagName("body")[0];
console.log(body_elemnet.childNodes);

2.nodeType属性：节点类型
=1 元素节点
=2 属性节点
=3 文本节点

3.nodeValue属性：得到和设置一个节点的值。
4.firstChild和lastChild属性
childNodes数组的第一个（下标是0）的元素：firstChild==childNodes[0]
在标记里增加一段描述
将文本显示在该位置：

  <p id="description">Choose an imag.</p>

在这里插入图片描述

点击图片链接的时候，动态改变图片的title。
nodeValue属性刷新每次文本的内容

 alert(description.childNodes[0].nodeValue);//Choose an imag.显示

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>javascript</h1>
<ul>
    <li><a href="../img/flower1.jpg" title="A Fireworks Display" onclick="showPic(this);return false;">Firework</a></li>
    <li><a href="../img/flower2.jpg" title="A cup of coffee" onclick="showPic(this);return false;">Coffee</a></li>
    <li><a href="../img/flower4.jpeg" title="A red rose" onclick="showPic(this);return false;">Rose</a></li>
    <li><a href="../img/flower5.jpg" title="The Famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
    <img src="../img/timeqq.png" alt="my image gallery" id="placeholder" width="500px">
    <!--//在点击链接的时候展示图片和他所对应的title-->
    <p id="description">Choose an imag.</p>
</ul>
<script>
    function showPic(whichpic) {
        event="JavaScript statement(s)";//添加事件处理函数?????

        var source=whichpic.getAttribute("href");
        var placeholder=document.getElementById("placeholder");
        placeholder.setAttribute("src",source);
        //函数结构，获取whichpic对象的title属性值
        var text=whichpic.getAttribute("title")
        //用一个变量存放description的文本p
        var description=document.getElementById('description');
        // describe.childNodes[0].nodeValue=text;33
        //实现文本的切换
        // alert(description.childNodes[0].nodeValue);//Choose an imag.显示
        // alert(description.firstChild.nodeValue);//Choose an imag.显示
        //把链接title传给text变量
        description.firstChild.nodeValue=text;

    }
    function countBodyChildren() {
        // 查看body中子元素总个数
        var body_element=document.getElementsByTagName("body")[0];
        alert(body_element.childNodes.length);//7
        alert(body_element.nodeType);//1元素节点
    }
    window.onload=countBodyChildren;
</script>
</body>
</html>

在这里插入图片描述

增加css样式——修订版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
            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{
            width: 300px;
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li><a href="../img/flower1.jpg" title="A Fireworks Display" onclick="showPic(this);return false;">Firework</a></li>
        <li><a href="../img/flower2.jpg" title="A cup of coffee" onclick="showPic(this);return false;">Coffee</a></li>
        <li><a href="../img/flower4.jpeg" title="A red rose" onclick="showPic(this);return false;">Rose</a></li>
        <li><a href="../img/flower5.jpg" title="The Famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
    </ul>
    <img src="../img/timeqq.png" alt="my image gallery" id="placeholder">
    <p id="description">Choose an imag.</p>
    <script>
        function showPic(whichpic) {
            event="JavaScript statement(s)";//添加事件处理函数?????

            var source=whichpic.getAttribute("href");
            var placeholder=document.getElementById("placeholder");
            placeholder.setAttribute("src",source);
            //函数结构，获取whichpic对象的title属性值
            var text=whichpic.getAttribute("title")
            //用一个变量存放description的文本p
            var description=document.getElementById('description');
            // describe.childNodes[0].nodeValue=text;33
            //实现文本的切换
            // alert(description.childNodes[0].nodeValue);//Choose an imag.显示
            // alert(description.firstChild.nodeValue);//Choose an imag.显示
            //把链接title传给text变量
            description.firstChild.nodeValue=text;

        }


    </script>
</body>
</html>

在这里插入图片描述

第五章最佳实践

1.伪协议：javascript:HTML中这种伪协议的调用做法不好
2.css的结构与样式分离
3.分离JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" class="popup">Example</a>
<script>
    window.onload=prepareLinks;
    function prepareLinks() {
        var links = document.getElementsByTagName("a");
        for (var i=0;i<links.length;i++){
            if (links[i].getAttribute("class")=="popup") {
                links[i].onclick = function () {
                    popUp(this.getAttribute("href"));
                    return false;
                }
            }
        }
    }
    function popUp(winURL) {
        window.open(winURL,"popup","width=320,height=480")
    }
</script>
</body>
</html>

在这里插入图片描述
4.向后兼容（对象检测，浏览器嗅探技术）
5.性能考虑

尽量少访问DOM和尽量减少标签
合并和防止脚本（在一个js文件里，并且将注释删除来达到压缩脚本）
压缩脚本
压缩脚本代码的工具
Douglas CrockFord的JSMin
雅虎的YUI Compressor
谷歌的 Closure Compiler

第六章图片库的改进版

支持平稳退化（即使js功能被禁用，用户也可以浏览图片，网页里所有链接也可以正常工作）
之前演示的图片库代码，没有让JavaScript和HTML标记分离。
如：onclick混合在a标签内。可以实现分离例如：给每个a标签一个class

<li><a href="../img/flower5.jpg" class="gallerypic" title="The Famous clock" onclick="showPic(this);return false;" >Big Ben</a></li>

但是每个a标签都添加一个class太过麻烦。我们的li都在ul里所有给ul一个id即可

<ul id="imagegallery">
    <li><a href="../img/flower1.jpg" title="A Fireworks Display" onclick="showPic(this);return false;">Firework</a></li>
    <li><a href="../img/flower2.jpg" title="A cup of coffee" onclick="showPic(this);return false;">Coffee</a></li>
    <li><a href="../img/flower4.jpeg" title="A red rose" onclick="showPic(this);return false;">Rose</a></li>
    <li><a href="../img/flower5.jpg" title="The Famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
</ul>

添加事件处理函数
编写一个函数把有关操作关联到onclick事件上（命名prepareGallery）
功能：检查当前浏览器是否理解getElementsByTagName，getElementById，还有是否有id为imagegallery的ul，遍历imagegallery元素中的所有链接。设置onclick事件

function prepareGallery() {
        if (!document.getElementsByTagName) return false;
        if (!document.getElementById) return false;
        if (!document.getElementById("imagegallery")) return false;
        var gallery = document.getElementById("imagegallery");
        var links = gallery.getElementsByTagName("a");
        for (var i=0;i<links.length;i++){
            links[i].onclick = function () {
                showPic(this);
                return false;
            }
        }
    }

共享onload事件

  function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload !='function'){
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }

优化

 //return !showPic(this);//如果showPic返回true我们返回false浏览器不会打开那个链接。若showPic返回false，则图片没用更新。以便阻止默认行为
  //上面的三目化简为
return showPic(this) ? false : true;

键盘访问
JavaScript和css结合
DOM Core 和HTML-DOM

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
            margin: 1em 10%;
            background-color: #ccc;
        }
        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{
            width: 300px;
            display: block;
            clear: both;
        }
        #imagegallery{
            list-style: none;
        }
        #imagegallery li{
            /*用css将列表项纵向变横向*/
            display: inline;
        }
        #imagegallery li a img{
            border: 0;
        }
    </style>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
    <!--<li><a href="../img/flower1.jpg" title="A Fireworks Display" >Firework</a></li>-->
    <!--<li><a href="../img/flower2.jpg" title="A cup of coffee">Coffee</a></li>-->
    <!--<li><a href="../img/flower4.jpeg" title="A red rose">Rose</a></li>-->
    <!--<li><a href="../img/flower5.jpg" title="The Famous clock">Big Ben</a></li>-->
    <!--//文字换成图片显示-->
    <li>
        <a href="../img/flower1.jpg" title="A Fireworks Display" >
            <img src="../img/flower1.jpg" alt="" style="width: 80px">
        </a>
    </li>
    <li>
        <a href="../img/flower2.jpg" title="A cup of coffee">
            <img src="../img/flower2.jpg" alt="" style="width: 80px">
        </a>
    </li>
    <li>
        <a href="../img/flower4.jpeg" title="A red rose">
            <img src="../img/flower4.jpeg" alt="" style="width: 80px">
        </a>
    </li>
    <li>
        <a href="../img/flower5.jpg" title="The Famous clock">
            <img src="../img/flower5.jpg" alt="" style="width: 80px">
        </a>
    </li>
</ul>
<img src="../img/timeqq.png" alt="my image gallery" id="placeholder">
<p id="description">Choose an imag.</p>


<script>
    function showPic(whichpic) {
        //检查
        if (!document.getElementById("placeholder"))  return false;
        var source=whichpic.getAttribute("href");
        var placeholder=document.getElementById("placeholder");

        if (placeholder.nodeName !="IMG")  return false;//假设那个一张图片验证是否有placeholder
        placeholder.setAttribute("src",source);
        if (document.getElementById("description")) {

            //函数结构，获取whichpic对象的title属性值
            var text=whichpic.getAttribute("title") ?  whichpic.getAttribute("tittle") : "";//三目运算符tittle如果存在，变量text被赋值为whichpic.getAttribute("title") 否则为空字符串
            //用一个变量存放description的文本p
            var description=document.getElementById('description');
            if (description.firstChild.nodeType==3){//nodeType属性检查返回一个大写字母的值
                //把链接title传给text变量
                description.firstChild.nodeValue=text;
            }
        }
        return true;
    }

    function prepareGallery() {
        if (!document.getElementsByTagName) return false;
        if (!document.getElementById) return false;
        if (!document.getElementById("imagegallery")) return false;
        var gallery = document.getElementById("imagegallery");
        var links = gallery.getElementsByTagName("a");
        for (var i=0;i<links.length;i++){
            links[i].onclick = function () {
                // showPic(this);
                // return false;
                //return !showPic(this);//如果showPic返回true我们返回false浏览器不会打开那个链接。若showPic返回false，则图片没用更新。以便阻止默认行为
                //上面的三目化简为
                return showPic(this) ? false : true;
            }
        }
    }

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload !='function'){
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }
    addLoadEvent(prepareGallery);
</script>
</body>
</html>