《JavaScript DOM编程艺术》学习回顾4

今天写到了这本书的第四章，这书的第四章主要是对一个例子进行研究，这个例子是JavaScript图片库，就是上边看到的这个网页图片库效果。把整个图片库的浏览链接集中安排图片库的网页里，只要用户点击了这个网页中的某个图片链接时才把相应的图片显示在我们的眼前，在这章中我自己感觉最大的收获就是知道了默认行为的问题，有些链接（或者别的东西）点击时既跳到了href指定的网页中，又执行了onclick事件所指定的函数。我们本来想执行onclick所指定的函数，但是被点击链接的默认行为也会被调用，从而出现了意外的效果，有些时候这是我们不想看到的，为了阻止默认的行为，我们需要加上一些东西。书上有几句话我感觉说的比较明白：“事件处理函数的机制。在给某个元素添加了事件处理函数之后，一旦事件发生，相应的JavaScript的代码就会得到执行，被调用的JavaScript代码可以返回一个值，这个值将被传递给那个事件处理函数。例如，我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript代码返回的值是true，onclick事件处理函数就认为“这个链接被点击了”；反之，如果返回的知识false，onclick事件处理函数就认为这个“这个链接没有被点击”。比如说<a href='http://www.baidu.com"onclick="return false">Click me</a>，对于这个链接当被点击时不会跳转到指定的页面。”这段说的十分的明白，通过写一个简单的图片库也能学到一些细节性的知识。以下是这个图片库的代码，有些内容我更改了一下。

html代码

<!DOCTYPE html><!--使用HTML5的声明方式-->
<html>
	<head>
		<title>我的图片库</title>
		<link rel="stylesheet" href="Layout.css" media="screen"/><!--引入外部的CSS文件-->
	</head>
	<body>
		<h1>这是我的图片库</h1>
		<ul>
			<li>
				<a href="images/1.jpg" title="欢迎看我，我是图片一" 
				onclick="showPic(this);return false;">图片一<!--通过返回假来阻止链接的默认行为-->
				</a>
			</li>
			<li>
				<a href="images/2.jpg" title="欢迎看我，我是图片二" 
				onclick="showPic(this);return false;">图片二
				</a>
			</li>
			<li>
				<a href="images/3.jpg" title="欢迎看我，我是图片三" 
				onclick="showPic(this);return false;">图片三
				</a>
			</li>
			<li>
				<a href="images/4.jpg" title="欢迎看我，我是图片四" 
				onclick="showPic(this);return false;">图片四
				</a>
			</li>
			<li>
				<a href="images/5.jpg" title="欢迎看我，我是图片五" 
				onclick="showPic(this);return false;">图片五
				</a>
			</li>
		</ul>
		<img id="placeholder" src="images/placeholder.gif" alt="我的图片"/><!--这起到了一个占位符的作用所有的图片都显示在此处-->
		<p id="description">请选择图片</p><!--这是对图片的描述-->
		<script type="text/javascript" src="showPic.js"></script><!--调用外部的JavaScript文件-->
	</body>
</html>

CSS代码：

body{
	font-family:"Helvetica","Arial",serif;
	color:#333;
	background-color:#ccc;
	margin:1em 10%;
}
h1{
	color:#333;
	background-color:transparent;
}
a{
	color:#c60;
	background-color:transparent;
	font-weight:bold;
	text-decoration:none;
}
ul{
	padding:0;
}
li{
	float:left;
	padding:1em;
	list-style:none;
}
img{
	display:block;
	clear:both;
	width:400px;
	height:300px;
}

JavaScript代码

<span style="font-size:12px;">function showPic(whichpic)
{
	var source = whichpic.getAttribute("href");//得到点击的链接
	var placeholder = document.getElementById("placeholder");//得到图片占位符的那个img对象
	placeholder.setAttribute("src",source);//将占位符的那个图片的链接设置为点击的链接图片，这样就显示成图片库了
	var text = whichpic.getAttribute("title");//得到链接的title属性
	var description = document.getElementById("description");//得到显示title的那个p对象标签
	description.firstChild.nodeValue = text;//将title的值给p中的内容.
}</span>

点击图片一之后的效果如下；

对于上边的这个图片库还有挺多要改的地方，这都是后边的哪些章节的事了，以后我还会接着写。如果有不足的之处希望大家谅解。

哦，对了上边的这个图片是我家乡的图片，位于大兴安岭图强镇的“龙江第一湾”。是不是很漂亮！

posted on 2012-05-29 18:56 springside5 阅读(198) 评论(0) 编辑收藏举报