Javascript学习第二部（实战2）
Demo1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>Image Gallery</title>
<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;
}
</script>
</head>
<body>
<h1>javascript 图片馆</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="test1" onclick="showPic(this); return false;">test1</a>
</li>
<li>
<a href="images/coffee.jpg" title="test2" onclick="showPic(this); return false;">test2</a>
</li>
<li>
<a href="images/rose.jpg" title="test3" onclick="showPic(this); return false;">test3</a>
</li>
<li>
<a href="images/bigben.jpg" title="test4" onclick="showPic(this); return false;">test4</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
首先从html 入手;
在a标签上加事件我们要注意，避免要他跳转。
解决方法：函数返回false；事件认为链接没有被点击。
showPic(this) : this 代表当前对象。
然后看js代码：
var source = whichpic.getAttribute("href"); //获取当前点击的元素的属性href的值
var placeholder = document.getElementById("placeholder"); //获取目标对象
placeholder.setAttribute("src",source);
/*
设置目标的属性src。从而达到改变图片。
setAttribute完成了2部操作：即先创建属性，然后赋值。如果属性存在，则覆盖属性的值。
当然我们可以用 placeholder.src = source;
不过，还是建议大家使用setAttribute(),它是1级dom，
他可以对文档中的任何一个元素的任何一个属性做出修改。
另外他的移植性更好。
*/
var text = whichpic.getAttribute("title"); //获取当前点击的元素的属性title的值
var description = document.getElementById("description"); //获取目标对象
description.firstChild.nodeValue = text;
/*
如果忘记nodeValue的使用，可以参考Javascript学习第一季（8）….
nodeValue一般只用来设置文本节点的值。
你也许会想descritption.firstChild一定是文本节点吗/?
如果你这么想，说明你对nodeValue已经很了解了。
下面我们应该这么处理：
if (description.firstChild.nodeType == 3) { //nodeType=3 说明节点是否是文本节点。
description.firstChild.nodeValue = text;
}
当然也可以改成：
description.childNodes[0].nodeValue = text
*/
如果你想用jquery写一个，可以这么写：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>Image Gallery</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
function showPic(whichpic) {
var source = $(whichpic).attr("href");
var placeholder = $('#placeholder');
$(placeholder).attr('src', source);
var text = $(whichpic).attr("title");
var description = $('#description');
$(description).text(text);
}
</script>
</head>
<body>
<h1>javascript 图片馆</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="test1" onclick="showPic(this); return false;">test1</a>
</li>
<li>
<a href="images/coffee.jpg" title="test2" onclick="showPic(this); return false;">test2</a>
</li>
<li>
<a href="images/rose.jpg" title="test3" onclick="showPic(this); return false;">test3</a>
</li>
<li>
<a href="images/bigben.jpg" title="test4" onclick="showPic(this); return false;">test4</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
你也许看出今天的例子的问题来了，第一：没做必要的判断，（也就是做了太多的假设）
比如：
document.getElementById(“placeholder”); 我们难道可以肯定id为placeholder一定存在？
第二：犯了一个大忌。
就是html和js没分开，而是参杂在一起写。这是非常不符合标准的。
W3c最基本的规定 ,
使用(x)html 去搭建文档结构。（结构层）
使用css去设置文档的显示效果。（表现层，展示层）
使用dom脚本去实现文档的行为。（行为层）
3者应该分离开来。
具体优化代码明天我们在讨论。。。
点击下载Javascript学习第二部-实战2-例子