JavaScript_图片库-优快云博客

本文链接：https://blog.youkuaiyun.com/twilight_karl/article/details/54862407

事件处理函数:

1.onmouseover鼠标进入
2.onmouseout鼠标移出
3.onclick鼠标点击
用法：

<a href=”src” οnmοuseοver=”showPic(this); return false;” title=”0001” >0001</a>

表示当鼠标进入时执行showPic函数，参数是本身这个对象。执行完所有函数后返回false，因为一般情况下，点击一个链接会打开一个新的页面。而当onmouseover返回false时，就会认为没有被点击，所以不会打开新的页面。

childNodes 属性

获取一个元素的所有子元素，他是一个包含所有子元素的数组。
elements.childNodes

nodeType属性

获取body节点的属性类型：*body[0].nodeType*

节点类型	属性值
元素节点	1
属性节点	2
文本节点	3

nodeValue获取属性的内容

获取p节点的内容：

    var p = document.getElementsByTagName("p");
    alert(p[0].firstChild.nodeValue);

内容是一个文本节点，他是p节点的一个子节点，所以直接用p.nodeValue并不可以获取文本内容，而是用p.firstChild获取他的子节点的内容。

firstChild/lastChild 第一个子节点/最后一个子节点

运用以上知识完成的一个小项目：
效果图如下：

源码如下：

<!--HTML部分-->

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="CSS/photos.css"/>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="http://i1.piimg.com/584041/a46e945e0fa0f2b4.jpg" onmouseover="showPic(this); return false;" title="0001" >0001</a>
        </li>
        <li>
            <a href="http://i1.piimg.com/584041/2b6a7e646d94a6a2.jpg" onmouseover="showPic(this); return false;" title="0002">0002</a>
        </li>
        <li>
            <a href="http://i1.piimg.com/584041/60be391e7c6a7f4f.jpg" onmouseover="showPic(this); return false;" title="0003">0003</a>
        </li>
        <li>
            <a href="http://i1.piimg.com/584041/9130f7450dab0a15.jpg" onmouseover="showPic(this); return false;" title="0004">0004</a>
        </li>
    </ul>
    <img id="placeholder" src="http://i1.piimg.com/584041/2b6a7e646d94a6a2.jpg" title="placeholder" wodth="400" height = 300/>
    <p id="description">Choose a image </p>

    <script type="text/javascript" src="JS/photos.js" ></script>
</body>
</html>

//JavaScript部分

function showPic(whichpic){
    var sourse = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",sourse);
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = "This is image :"+text;
}

/*css部分*/

*{
    padding:0;
    margin:0;
}

body{
    font-family: "helvetica","Arial",serif;
    color:#333;
    background-color:#ccc;
    margin:1em 10%;
}

h1{
    color:#333;
    background-color:transparent;
}

a{
    color:#c60;
    background-color:transparent;
    font-weight:bold;
    text-decoration:none;
}

li{
    list-style:none;
    display:inline-block;
    margin:1em;
    margin-top:2em;
}

img{
    display:block;
    clear:both;
}
p{
    margin-top:1em;
    font-size:18px;
    font--weight:bold;
}