第六章案例研究图片库改进版

最新推荐文章于 2024-07-23 11:32:13 发布

Agrass啊草

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量587

点赞数 1

文章标签： javascript dom

本文链接：https://blog.csdn.net/unaMattin/article/details/53380037

版权

<html>
<head>
    <title>第六章 案例研究 图片库改进版</title>
</head>
<body>
    <h1>Snapshots</h1>
    <ul id="imagegallery">
        <li><a href="img/1.jpg" title="a" >a</a></li>
        <li><a href="img/2.jpg" title="b" >b</a></li>
        <li><a href="img/3.jpg" title="c" >c</a></li>
        <li><a href="img/4.jpg" title="d" >d</a></li>
        <li><a href="img/5.jpg" title="e" >e</a></li>
        <li><a href="img/6.jpg" title="f" >f</a></li>
        <li><a href="img/7.jpg" title="g" >g</a></li>
        <li><a href="img/8.jpg" title="h" >h</a></li>
    </ul>
    <p id="description">这是图片描述</p>
    <img id="placeholder" src="img/1.jpg" alt="my" >
</body>

<script type="text/javascript">

    function prepareGallery(){
        // 三个if都是测试 是否存在
        if (!document.getElementById)return false; 
        if (!document.getElementsByTagName)return false; 
        if (!document.getElementById("imagegallery"))return false; 
        //获取ul列表
        var gallery=document.getElementById("imagegallery");
        //获取ul列表里面的a元素
        var links=gallery.getElementsByTagName("a");
        //遍历所有的a元素，并添加点击事件
        for (var i = 0; i < links.length; i++) {
            links[i].onclick=function(){
                //测试，有showpic()则阻止a元素默认行为，无则不阻止
                return showPic(this)?false:true;
            }   
        }
    }
    prepareGallery();

    function showPic(whichpic){
        //测试是否存在
        if (!document.getElementById("placeholder")) return false;
        //获取 href 属性的链接
        var source=whichpic.getAttribute("href");
        //获取占位符
        var placeholder=document.getElementById("placeholder");
        //测试是否存在    
        if(placeholder.nodeName!="IMG")return false;
        //把获取 href 属性的链接给到占位符的 src 
        placeholder.setAttribute("src",source);

        //测试是否存在
        if (document.getElementById("description")){
            //三元操作符，判断，有选择前者，无选择后者，获取的值给到text
            var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
            //获取 p 元素
            var description=document.getElementById("description");
            //判断节点是否等于3（文本节点）
            if(description.firstChild.nodeType==3){
                //把获取的 litile 属性的值给到 p 元素的文本节点
                description.firstChild.nodeValue=text;
            }       
        }return true;       
    }

    /*
        在本章里，做了许多优化。
        1.尽量使javascript代码不再依赖那些没有保证的假设，为此引入了许多测试，这些测试和检查使得javascript代码能够平稳退化，但使得函数里的代码变得更多了。
        在实际工作中，你要自己决定是否需要这些检查。 

        2.把事件处理函数从标记文档分离了，使得javascript代码不再依赖HTML文档的内容和结构。结果与行为分离的程度越大越好。

    */
</script>
</html>
</script>
</html>