Javascript DOM图片库

最新推荐文章于 2021-06-14 16:58:25 发布

王先森0208

最新推荐文章于 2021-06-14 16:58:25 发布

阅读量245

点赞数

文章标签：最佳实践

本文链接：https://blog.csdn.net/fff07/article/details/78428377

版权

读了JavaScript的红宝书，感觉后边的有点难，不行，有点难以理解，于是换书JavaScript DOM，感觉还不错，讲解的很不错，而且还有一些实例，算是把之前看红宝书的知识点练习了一下，嗯，等我看完JavaScript DOM，继续看红宝书。
写了JavaScript DOM里的一个图片库，感觉也学到了一些标准方法，继续！大家有什么好的学习web的方法可以告知我，谢谢啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo Gallery</title>
    <style>
        body{
            background: pink;
            /*text-align: center;*/
        }
        #main{
            /*width: 500px;*/
            /*height: 400px;*/
            /*text-align: center;*/
            /*margin: 0 auto;*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #ul1{
            padding: 0;
        }
        #ul1 li{
            list-style:none;
            display: inline;
            margin: 30px;
        }

        #div1{
            width: 400px;
            height: 300px;
            padding: 0;
            /*margin: 0 auto;*/
            border:1px solid black;
            background: gray;
            text-align: center;
            line-height:300px;
            /*display: flex;*/

        }
    </style>
</head>
<body>
<div id="main">
    <h1>Photo Gallery</h1>
    <ul id="ul1">
        <li><a href="img/img1.jpg" title="img1"><img src="img/img11.jpg"></a></li>
        <li><a href="img/img2.jpg" title="img2"><img src="img/img22.jpg"></a></li>
        <li><a href="img/img3.jpg" title="img3"><img src="img/img33.jpg"></a></li>
        <li><a href="img/img4.jpg" title="img4"><img src="img/img44.jpg"></a></li>
    </ul>
    <div id="div1"><img id="imgsrc" src=""></div>
    <strong id="strong1">Choose an image~</strong>

</div>

</body>

<script>
    function showPic(whichPic) {
        var source=whichPic.getAttribute("href");
        var imgSrc=document.getElementById("imgsrc");
        var oStrong=document.getElementById("strong1");
        imgSrc.setAttribute("src",source);
        oStrong.firstChild.nodeValue=whichPic.getAttribute("title");

        return true;
    }
    function prepareGallery() {
        var oUl=document.getElementById("ul1");
        var links=oUl.getElementsByTagName("a");
        for(var i=0;i<links.length;i++){
            links[i].onclick=function () {
                return showPic(this)?false:true;
            }
        }

    }
    window.onload=function () {
        prepareGallery();

    }
</script>
</html>

看书写代码有感：学习到了写一个网页要考虑到的问题。
平稳退化：确保网页在没有JavaScript的情况下也能正常工作（亲自实验了一下，关掉了chrome的JavaScript功能）；
分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开。（就是HTML，CSS，JavaScript分开写）；
向后兼容性：确保老版本不会因为你的JavaScript脚本死掉。（需要加一些判断条件，最简单的例子：if(!document.getElementById) return false;这种写法比if(document.getElementById){…}好一些，当判断很多的时候，不用嵌套多层。但是，也要根据具体情况来讲。
性能考虑：确定脚本执行的性能最优（例如，尽量少访问DOM和尽量减少标记，合并放置脚本，压缩脚本）