码迷,mamicode.com
首页 > Web开发 > 详细

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

时间:2015-07-09 00:16:53      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

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>

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

标签:

原文地址:http://www.cnblogs.com/zhangxg/p/4631754.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!