JavaScript学习系列3 案例研究: JavaScript图片库

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
     <h1>Snapshots</h1>
    <ul>
         <li>
             <a href="images/Chrysanthemum.jpg" return false;" title="A Chrysanthemum display">Chrysanthemum</a>
        </li>
        <li>
             <a href="images/Desert.jpg" return false;" title="A Desert display">Desert</a>
        </li>
        <li>
                  <!-- 点击的时候调用showPic(this)方法,这里this为当前节点、return false: 说明这个链接没有被点击 -->
             <a href="images/Hydrangeas.jpg" return false;" title="A Hydrangeas display">Hydrangeas</a>
        </li>
         <!-- 在下方显示图片 -->
        <img id="placeholder" src=\'#\'" alt="my image gallery" />
        <!-- 通过id更改字体 -->
        <p id="description">Choose an image.</p>
    </ul>
     
     <script src=\'#\'" /script>
</body>
</html>
 
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;
}
 
  • childNodes: 获取子节点的数组
  • nodeType: 节点类型
    • 元素节点: 1
    • 属性节点: 2
    • 文本节点: 3
  • nodeValue: 节点的值
  • firstChild: 第一个子节点
  • lastChild: 最后一个子节点

你可能感兴趣的:(JavaScript,JavaScript,职场,休闲,图片显示)