zoukankan      html  css  js  c++  java
  • JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

    DOM是一种适用于多种环境和多种程序设计语言的通用型API。 

    如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题;

    tips:setAttribute是第1级DOM;

    图片切换初级js:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>gallery</title>
    
    <style>
    </style>
    <script type="text/javascript" src="scripts/showPic.js"></script>
    </head>
    
    <body>
    <h1>Snapshots</h1>
    <ul>
        <li><a href="img/s1.jpg" onclick="showPic(this); return false" title = "A fireworks display">Fireworks</a></li>
        <li><a href="img/s2.jpg" onclick="showPic(this); return false"title = "A cup of black coffee">Coffee</a></li>
        <li><a href="img/s3.jpg" onclick="showPic(this); return false"title = "A red, red rose">Rose</a></li>
        <li><a href="img/s4.jpg" onclick="showPic(this); return false"title = "The famous clock">Big Ben</a></li>
    </ul>
    <img id="placeholder" src="img/s1.jpg" alt="my image gallery">
    
    <!-- 这里是为了展示showPic里面的代码,才放进来的
      <script type="text/javascript">
    //     function showPic(whichpic){
            
    //     var source = whichpic.getAttribute("href");
    //     var placeholder = document.getElementById("placeholder");
    //     placeholder.setAttribute('src', source);
    
    //     }
    // </script>-->
    </body>
    </html>

    应用到文档里面的JS, 通过<script>标签的src属性来引入,同时引入的JS文件里面不需要包含<script>标签;

    <script src="scripts/showPic.js"></script>

  • 相关阅读:
    WinForm 自定义控件 学习笔记三
    FtpWebRequest相关
    delegate学习笔记1
    C#操作XML
    WinForm 非客户区相关
    WinForm 自定义控件 学习笔记二
    POJ1061 青蛙的约会(扩展欧几里得)
    aaaaaaa……aaa(n个)%p的值 (矩阵快速幂)
    POJ3735 Training little cats(矩阵快速幂)
    数据库日志文件太大的解决方法及原理
  • 原文地址:https://www.cnblogs.com/zhangxg/p/4631754.html
Copyright © 2011-2022 走看看