《JavaScript DOM编程艺术》书中的图片库的总结(1)

前言:在《DOM编程艺术》一书中,作者给出了一个实例:创建一个图片库,其实功能很简单,就是点击某个列表项时,下方出现相应的图片以及图片说明(图片说明事先以title的形式写在HTML中),虽然是一个简单的例子,当时作者在书中循序渐进,不断的改善图片库中间引入各种知识点,真的是一本好书,在此对这个实例进行一些总结。

JavaScript DOM编程艺术

1.HTML部分


<h1>电影天堂</h1>
    <ul>
        <li>
            <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
        </li>
        <li>
            <a href="images/02千与千寻.jpg" title="千与千寻" onclick="showPic(this);return false;">千与千寻</a>
        </li>
        <li>
            <a href="images/03哆啦A梦.jpg" title="哆啦A梦" onclick="showPic(this);return false;">哆啦A梦</a>
        </li>
        <li>
            <a href="images/04当幸福来敲门.jpg" title="当幸福来敲门" onclick="showPic(this);return false;">当幸福来敲门</a>
        </li>
    </ul>
    <!--占位符图片-->
    <img id="placeholder" src="images/placeholder.jpg" alt="hehehe">
    <!--一段描述-->
    <p id="description">选择一张图片</p>

2.CSS样式


h1{
    color: #333;
}
a{
    color: gray;
    font-weight: bold;
    text-decoration: none;
}
ul{
    padding: 0;
}
li{
    float: left;
    padding: 1em;
    list-style-type: none;
}
img{
    display: block;
    clear: both;
}

3.js代码


//首先封装一个函数, 参数whicpic代表一个元素的节点,即指向某个图片的a元素
        function showPic(whichpic){
            //获取某个图片的href属性
            var source = whichpic.getAttribute("href");
            //获取占位符图片的节点
            var placeholder = document.getElementById("placeholder");
            //使用setAttribute对placeholder元素的src属性进行刷新
            placeholder.setAttribute("src" , source);

            //one more thing:在前换图片的时候,将占位符图片下面的文字内容切换为对应图片的title
            //首先获取图片对应的title属性
            var text = whichpic.getAttribute("title");
            //获取图片描述的节点
            var description = document.getElementById("description");

            //实现文本的切换
            //首先要获取到description中的文本,需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它
            description.firstChild.nodeValue = text;  
            //也可以用firstchild:description.firstChild.nodeValue
        }

4.总结
1.首先获取图片的href属性:whichpic.getAttribute("href")

2.接着获取占位符图片的节点:document.getElementById("placeholder")

3.然后设置占位符图片的src属性:placeholder.setAttribute("src" , source)

4.接着对占位符图片下方的文字进行操作,把图片的title值赋值给

标签的nodeValue

  1. var text = whichpic.getAttribute("title")
  2. var description = document.getElementById("description")
  3. description.firstChild.nodeValue = text

其中可以通过childNode获取节点的所有子节点,并且用nodeType属性进行判断:1代表元素节点、2代表属性节点、3代表文本节点,因为本例

标签只有一个子节点,所以可以用fistChild,或者childNode[0]来获取,获取节点后再用nodeValue获取节点的属性值。

5.添加onclick处理事件
这只是初级的一个例子,所以函数处理事件嵌套在HTML代码中,并且为了阻止点击链接的默认行为(跳转到一个新的页面),后面还要返回给它一个false。


<li>
      <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
</li>

6.不足
点击事件绑定在HTML代码中,很笨重,下一篇中将做升级。

7.老规矩,贴出完整源码


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>example</title>
    <style>
        h1{
            color: #333;
        }
        a{
            color: gray;
            font-weight: bold;
            text-decoration: none;
        }
        ul{
            padding: 0;
        }
        li{
            float: left;
            padding: 1em;
            list-style-type: none;
        }
        img{
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <h1>电影天堂</h1>
    <ul>
        <li>
            <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
        </li>
        <li>
            <a href="images/02千与千寻.jpg" title="千与千寻" onclick="showPic(this);return false;">千与千寻</a>
        </li>
        <li>
            <a href="images/03哆啦A梦.jpg" title="哆啦A梦" onclick="showPic(this);return false;">哆啦A梦</a>
        </li>
        <li>
            <a href="images/04当幸福来敲门.jpg" title="当幸福来敲门" onclick="showPic(this);return false;">当幸福来敲门</a>
        </li>
    </ul>
    <!--占位符图片-->
    <img id="placeholder" src="images/placeholder.jpg" alt="hehehe">
    <!--一段描述-->
    <p id="description">选择一张图片</p>

    <!--以下是js代码-->
    <script>
        //首先封装一个函数, 参数whicpic代表一个元素的节点,即指向某个图片的a元素
        function showPic(whichpic){
            //获取某个图片的href属性
            var source = whichpic.getAttribute("href");
            //获取占位符图片的节点
            var placeholder = document.getElementById("placeholder");
            //使用setAttribute对placeholder元素的src属性进行刷新
            placeholder.setAttribute("src" , source);

            //one more thing:在前换图片的时候,将占位符图片下面的文字内容切换为对应图片的title
            //首先获取图片对应的title属性
            var text = whichpic.getAttribute("title");
            //获取图片描述的节点
            var description = document.getElementById("description");

            //实现文本的切换
            //首先要获取到description中的文本,需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它
            description.firstChild.nodeValue = text;  
            //也可以用firstchild:description.firstChild.nodeValue
        }
    </script>
</body>

</html>

作者:yangdepp
https://segmentfault.com/a/1190000005726200

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/485.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部