Javascript入门学习第五篇 js函数
更新时间：2008年07月06日 10:00:53 作者：
上篇文章讲了js中对象和数组的一些方法。
这章我们先说说函数，然后来点实战。
6,实战：
编写一个javascript图片馆:
<!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"); //获取当前点击的元素的属性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;
/*
或者使用
description.childNodes[0].nodeValue = text;
*/
}
</script>
</head>
<body>
<h1>javascript 图片馆</h1>
<!--
在a标签上加事件我们要注意，避免要他跳转。
解决方法：函数返回false； 事件认为链接没有被点击。
当然这种情况是在href的值有用的情况下。
如果href的值是javascript:void(0);也可以不跳转。
-->
<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="test3" onclick="showPic(this); return false;">test4</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">选择图片.</p>
</body>
</html>
看了这个例子，也许你会纳闷，我怎么就看不懂呢？
如果是这样，那么你的纳闷是对的。呵呵。
看不懂就看不懂吧。 先把看不懂的 拿笔记住， 后面几章我们讲 学习 DOM编程。
到时候 一切不懂 都会被化解。。。。。。
总节:
这章没说什么重大的东西，浪费了大家时间了。请原谅我。。。
不过下几章，相信大家都比较感兴趣。。。保密。^_^。
如果还有不懂，可以google 搜索资料.
相关文章
Javascript学习笔记之 对象篇（一） : 对象的使用和属性
Javascript 中的一切都可以视为对象，除了两个特例：null 和 undefined。2014-06-06
在javaScript中关于submit和button的区别介绍
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上2013-10-10
本文通过介绍WiFi无线技术来达成一种网络延申目的，具体知识点请看下文2021-08-08
这篇文章主要介绍了element $notify 悬浮通知使用详解，主要讲解如何使用this.$notify做一个悬浮通知，本文通过示例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧2020-06-06
javascript小数四舍五入在工作中经常会使用到，今天本文整理了一些常用的小窍门，需要了解的朋友可以参考下2012-12-12
叠加计算出错的解决方法...2007-01-01
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
我们知道 Boolean(value) 是把值转换成Boolean类型，Nnumber(value) 是把值转换成数字（整型或浮点数），而 String(value) 是把值转换成字符串,需要的朋友可以了解下2012-12-12
JavaScript中的prototype和constructor简明总结
一直没弄清楚JavaScript中的prototype和constructor属性，今天看了看书，总算有点眉目了2014-04-04
本文将用实例讲解一下JavaScript对象创建及继承原理:JavaScript中的继承是使用原型链的机制,对象创建使用Function构造器，感兴趣的朋友可以详细了解下本文，或许可以帮助到你2013-02-02
JavaScript中|单竖杠通常被用来对浮点型数字进行取证,这里同时也介绍了单竖杠的运算规则,下面我们就来详解JavaScript中|单竖杠的使用方法2016-05-05
最新评论