web前端之JavaScript DOM编程艺术之案例研究:JavaScript图片库

最新推荐文章于 2021-08-04 08:46:31 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2021-08-04 08:46:31 发布

阅读量472

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53301642

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

JavaScript DOM编程艺术

10 篇文章 0 订阅

订阅专栏

web前端之JavaScript DOM编程艺术之案例研究:JavaScript图片库

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Images Gallery</title>
    <script type="text/javascript">
    function showPic(whichpic){
        var source=whichpic.getAttribute("href");
        var placeholder=document.getElementById("placeholder");
        placeholder.setAttribute("src",source);


    }
    </script>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="1.jpeg" title="1" onclick="showPic(this);return false;">Fireworks</a>
        </li>
        <li>
            <a href="2.jpeg" title="2" onclick="showPic(this);return false;">Coffee</a>
        </li>
        <li>
            <a href="3.jpeg" title="3" onclick="showPic(this);return false;">Rose</a>
        </li>
        <li>
            <a href="4.jpeg" title="4" onclick="showPic(this);return false;">Big Ben</a>
        </li>


    </ul>
    <img id="placeholder" src="5.jpeg" alt="my images gallery">
</body>
</html>

注：JavaScript代码包含在一对引号之间。我们可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可。如：οnclick=”showPic(this);return false;”
JavaScript代码可以返回一个值，这个值将被传递给那个事件处理函数。当给某链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript代码返回值是true，onclick就认为“这个链接被点击了”；反之，如果返回的是false，onclick就认为“这个链接没有被点击”。默认链接行为没有被触发。

childNodes属性:
在一个节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组。

var body_elements=document.getElementsByTagName(“body”)[0];
body_elements.length;就能获取body拥有多少个子元素。

nodeType属性:
childNodes属性返回的值包含所有的节点,包括空格、换行也会被视为body子元素。
body_elements.nodeType可以获取到其元素节点的nodeType属性值。
元素节点：nodeType的属性是1
属性节点：nodeType的属性是2
文本节点：nodeType的属性是3

这就意味着可以让函数只对特定类型的节点进行处理。例如完全可以编写一个只处理元素节点的函数。

nodeValue属性:
如果想要改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到（和设置）一个节点的值。
node.nodeValue

firstChild属性lastChild属性:
数组元素childNodes[0]有一个更直观易读的同义词。无论何时何地，只需要访问childNodes数组的第一个元素，都可以写成firstChild：node.firstchild等价于node.childNodes[0]。这个不仅简短还更有可读性。同理，lastChild是为最后一个。

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Images Gallery</title>
    <style type="text/css">
    body{
        font-family: "Helvetica","Arial",serif;
        color:#333;
        background: #ccc;
        margin: 1em 10px;
    }
    h1{
        color: #333;
        background: transparent;//背景透明
    }
    a{
        color: #c60;
        background: transparent;
        font-weight: bold;
        text-decoration: none;
    }
    ul{
        padding: 0;
    }
    li{
        float: left;
        padding: 1em;
        list-style: none;
    }
    img{
        display: block;
        clear: both;//清除浮动
    }
    </style>
    <script type="text/javascript">
    function showPic(whichpic){
        var source=whichpic.getAttribute("href");
        var placeholder=document.getElementById("placeholder");     
        placeholder.setAttribute("src",source);
        var text=whichpic.getAttribute("title");
        var description=document.getElementById("description");
        description.firstChild.nodeValue=text;



    }
    </script>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="1.jpeg" title="1" onclick="showPic(this);return false;">Fireworks</a>
        </li>
        <li>
            <a href="2.jpeg" title="2" onclick="showPic(this);return false;">Coffee</a>
        </li>
        <li>
            <a href="3.jpeg" title="3" onclick="showPic(this);return false;">Rose</a>
        </li>
        <li>
            <a href="4.jpeg" title="4" onclick="showPic(this);return false;">Big Ben</a>
        </li>


    </ul>
    <img id="placeholder" src="5.jpeg" alt="my images gallery">
    <p id="description">Choose an images.</p>
</body>
</html>