JavaScript DOM学习笔记一

创建JavaScript图片库

经过一段时间的学习，发现JavaScript语法与c++语法非常相似，很快便能够使用JavaScript，所以不在此做JavaScript语法介绍，可通过JavaScript学习心得了解。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi1.css" rel="stylesheet">
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="xty.jpg" title="tuanpian11" onclick="showPic(this);return false;">tupian1</a>
        </li>
        <li>
            <a href="abc.jpg" title="tupian22" onclick="showPic(this);return false;">tupian2</a>
        </li>
        <li>
            <a href="xty.jpg" title="tupian33" onclick="showPic(this);return false;">tupian3</a>
        </li>
        <li>
            <a href="abc.jpg" title="tupian44" onclick="showPic(this);return false;">tupian4</a>
        </li>
    </ul>
    <img src="abc.jpg" alt="my" id="placeholder">
    <p id="description">Choose an image</p>
    <script src="lianxi1.js">
    </script>
</body>
</html>

css代码：

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;
}
ul{
    padding: 0;
}
li{
    float: left;
    padding: 1em;
    list-style: none;
}
img{
    display: block;
    clear: both;
}

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;
    return false;
}

JavaScript和HTML合并的形式代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi1.css" rel="stylesheet">
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="xty.jpg" title="tuanpian11" onclick="showPic(this);return false;">tupian1</a>
        </li>
        <li>
            <a href="abc.jpg" title="tupian22" onclick="showPic(this);return false;">tupian2</a>
        </li>
        <li>
            <a href="xty.jpg" title="tupian33" onclick="showPic(this);return false;">tupian3</a>
        </li>
        <li>
            <a href="abc.jpg" title="tupian44" onclick="showPic(this);return false;">tupian4</a>
        </li>
    </ul>
    <img src="abc.jpg" alt="my" id="placeholder">
    <p id="description">Choose an image</p>
    <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;
    return false;
}
    </script>
</body>
</html>

应用到的知识：

事件处理函数
onclick = "show(this);return false",作用为：在特定事件发生时调用特定的JavaScript代码。其中return false防止了转到目标链接窗口。
DOM获取元素的三种方法
document.getElementById("id") 返回一个与那个有着给定id属性值得元素节点对应的对象。
document.getElementByTagName("tag") 返回一个具有相同标签的数组。
document.getElementByClassName("class") 返回一个具有相同类名的元素数组。
DOM属性
node.firstChild 代表childNodes数组的第一个元素。
nodeValue 代表节点的值。

JavaScript DOM学习笔记一

创建JavaScript图片库

猜你喜欢