您的位置：首页 > Web前端 > JavaScript

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

2012-07-11 10:21 295 查看

美术馆

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

相关文章推荐

新的分享

章节导航