javaScript学习笔记 No.2 -- 案例研究-美术馆


美术馆



HTML代码如下:

<!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" xml:lang="en">
    <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Image Gallery</title>
    </head>
    <body>
	<h1>Snapshots</h1>
	<ul>
            <li>
	    	<a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
	    </li>
	    <li>
		<a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a>
	    </li>
	    <li>
		<a href="images/rose.jpg" title="A red, red rose">Rose</a>
	    </li>
	    <li>
		<a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
	    </li>
	</ul>
    </body>
</html>

如果只是这样的话,点图片链接时,浏览器会转到一个只含一个图片的页面。

运用javaScript可以做到不跳转页面,在本页内查看图片。

1. 使用getAttribute()  setAttribute()想要在本页中显示图片,则需要事先准备一个<img>元素来摆放图片。在<body>的最后加入

<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
将<img>标签的src属性的值修改成<a>标签中的href的值,就可以在此显示超链接中的图片了
编写一个javaScript函数来实现这一操作:
function showPic(element){  //此处传入的element为你点击的<a>元素节点,是一个对象
	var source = element.getAttribute('href');
	var placeholder = document.getElementById('placeholder');
	placeholder.setAttribute('src', source);
}

2. javaScript结合到HTML中
1> 将javaScript文档与HTML文档结合
为了代码的复用,尽量不要将javaScript的代码写在HTML的<head>内
在外部新建一个scripts文件夹,然后将javascript文件都放在里面
新建showPic.js文件,保存javaScript代码,然后在<head>中加入如下代码
<script type="text/javascript" src="scripts/showPic.js"></script>
此时javaScript文档已经与HTML文档结合,接下来是调用javaScript函数
2> javaScript函数的调用
目的是用户点击图片链接时,使用函数操作网页文档,所以这里使用事件处理函数
事件处理函数的模型:
event = "javaScript code"
当event事件发生时,执行引号中的javaScript代码,event是网页事件,包括点击,鼠标悬浮,鼠标离开,网页加载完成等
此例中为每个图片链接中加入 
onclick="showPic(this);"     <!-- ".."中是javaScript的代码,所以函数调用语句最后要加‘;’-->
onclick是鼠标点击事件
this :既是表示这个所在的元素节点,放在<a>中,它表示的就是这个<a>元素节点,放在<anything>中表示anything这个元素节点
此时,还是不能达到目的,点击链接后,showPic()函数执行了,同时链接本身也执行了,浏览器还是转向了新的页面
3> javaScript code可以有返回值,ture或false
在此例中,若返回ture则表示本链接被点击了,请执行,返回false,则表示本链接没用被点击,请忽略。可以通过以下实例来实验:
<a href="www.baidu.com" onclick="return false;">猛击我</a>
所以完整的函数调用语句如下:

onclick="showPic(this); return false;"


你可能感兴趣的:(JavaScript,html,浏览器,XHTML,function,文档)