jsDOM编程艺术

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf8" />
<title></title>
<style>

ul li{float:left;
    width:240px;
     list-style-type:none;} 
img{clear;left;
    width:400px;
 height:240px;} 
p{clear:left;}
</style>
</head>
<body>

<h2>pictures</h2>

  <ul>
    <li><a href="images/1.jpg" title="A fireworks display" onclick="showPic(this);return false">fireworks</a></li>
 <li><a href="images/2.jpg" title="A coffee display" onclick="showPic(this);return false">A fireworks display</a></li>
 <li><a href="images/3.jpg" title="A rose display" onclick="showPic(this);return false">A fireworks display</a></li>
 <li><a href="images/4.jpg" title="A fire display" onclick="showPic(this);return false">A fireworks display</a></li>
  </ul>
<img id="placeholder" source="images/placeholder.jpg" alt="my images gallery">
<p id="discription">choose an image</p>
<script >
function showPic(whichpic){
  var  source=whichpic.getAttribute("href");
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
 //placeholder.src=source;
  
  var text=whichpic.getAttribute("title");
  
  var discription=document.getElementById("discription");
  discription.firstChild.nodeValue=text;
}

</script>
</body>
</html>
1 <li><a href="images/1.jpg" title="A fireworks display" onclick="showPic(this);return false">fireworks</a></li> 中的return false是为了点击超链接是再加载出的一个页面,如果点击之后js的返回值是ture则成功点击了超链接,就会加载一个新的页面,把js的返回值设置成false就不会重新加载页面,只是执行showPic()函数;
如果没有return false,图片会在 新加载的一个页面上显示
2 placeholder.setAttribute("src",source); 
一个<img>中,也就相当于添加一个src属性,不应该替换src 属性;
修改:<img id="placeholder" source="images/placeholder.jpg" alt="my images gallery">
中的source是因为粗心写错了 还是替换不是相当于添加src属性 
<img id="placeholder" src="images/1.jpg" alt="my images gallery">
 3 function showPic(whichpic) 
如果把这个whichPic拿掉var  source=whichpic.getAttribute("href");应该怎么改呢;
4  discription.firstChild.nodeValue=text; 中只有一个childNodes所以用firstChild和lastChild都可以;
5 //placeholder.src=source;  
 placeholder.setAttribute("src",source);为一级DOM方案移植性好,可以用在除web浏览器以外的其他应用环境里,还可以避免兼容性有关的任何问题,目前来看我还理解不到

你可能感兴趣的:(jsDOM编程艺术)