【第四章】JavaScript图片库的简单操作

最新推荐文章于 2024-10-14 23:40:45 发布

weixin_34268753

最新推荐文章于 2024-10-14 23:40:45 发布

阅读量109

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3640519/blog/1552140

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.JavaScript图片库的操作，先来看以下代码：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<head>
</head>
<body>
    <ul>
        <li>
            <a href="source/1.jpg" title="first picture">first picture</a>
        </li>
        <li>
            <a href="source/2.png" title="second picture">second picture</a>
        </li>
    </ul>
    <p id="desc">Choose an image.</p>
    <img id="placeHolder" src="">
</body>
</html>

现在，我想要点击链接的时候，停留在当前页面并把图片显示出来，那么有两种方法可以实现，DOM的setAttribute和非DOM方式。如下：

<script type="text/javascript">
    function showPicture(whichPicture){
        var source = whichPicture.getAttribute("href");
        var placeHolder = document.getElementById("placeHolder");
        placeHolder.setAttribute("src", source); //第一种方法
        //placeHolder.src = source; //第二种方法，这是非DOM方式
    }
</script>

setAttribute方法是“第1级DOM”的组成部分，它可以设置任意节点的任意属性。而第二种非DOM方式则需要记忆哪些元素可以用哪些方法来设置。setAttribute则可以任意修改一个元素的任何属性，另一个优势是可移植性更好。

等等，上面的代码貌似还缺少什么？对，那就是元素点击响应事件。在两个a标签中，添加οnclick="showPicture(this)"，这是必不可少的。但是当你这样设置完，点击链接的时候，仍然会跳转到其它页面。这里就需要在onclick事件后面加一个return false；这样onclick函数就认为“这个链接没有被点击”，从而不会跳转到另外的页面了。

所以，最终代码如下：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<head>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript"></script>
</head>
<body>
    <ul>
        <li>
            <a href="source/1.jpg" title="first picture" onclick="showPicture(this);return false;">first picture</a>
        </li>
        <li>
            <a href="source/2.png" title="second picture" onclick="showPicture(this);return false;">second picture</a>
        </li>
    </ul>
    <p id="desc">Choose an image.</p>
    <img id="placeHolder" src="">
    <script type="text/javascript">   
        function showPicture(whichPicture){
            var source = whichPicture.getAttribute("href");
            var placeHolder = document.getElementById("placeHolder");
            placeHolder.setAttribute("src", source)
            //placeHolder.src = source
        }
    </script>
</body>
</html>

参考：JavaScript DOM编程艺术(中文第2版)

转载于:https://my.oschina.net/u/3640519/blog/1552140