JavaScript DOM编程艺术小记（五）---第四章-JavaScript图片库(实例)

^编写一个优秀的标记文件

^编写一个JavaScript函数以显示用户想要查看的图片

^由标记触发函数调用

^使用几个新方法扩展这个JavaScript函数

以下代码结合三四章内容

HTML文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Web</title>
</head><body><h1>Reborn</h1><ul>
①       <li><a href="想吃的3.jpg" οnclick="showPic(this);return false;" title="My cute">BlueSnow</a></li><li><a href="想吃的4.jpg" οnclick="showPic(this);return false;" title="Kawai yome">AOYuKi</a></li><li><a href="野良神.jpg" οnclick="showPic(this);return false;" title="naragami">ナラガミ</a></li></ul>
②   <img id="placeholder" src="2.27.jpg" alt="description">
③   <p id="description">Select an image</p>
④   <script src="showPic.js"></script><!--<a href="http://www.baidu.com" οnclick="return false;">Click</a>-->
</body>
</html>

注：

① onclick,事件处理函数给链接添加行为，①中调用了showPic()函数，this指向当前所在元素节点，return false 可以使这个链接的默认行为没有被触发

② 图片占位符，用来替换想要展示的图片

③ 文字占位符，用来替换想要展示的描述

④ 调用JS

JS文件

// JavaScript Document
function showPic(passNode){
①       var image = passNode.getAttribute("href");
②       var placeholder = document.getElementById("placeholder");
③       placeholder.setAttribute("src",image);
④       var showTitle = passNode.getAttribute("title");
⑤       var description = document.getElementById("description");
⑥       description.firstChild.nodeValue = showTitle;}

① getAttribute()获取想展示的图片

② getElementById()获取占位符节点元素对象

③ 通过setAttribute替换占位符图片

④ getAttribute()获取想展示的描述

⑤ getElementById()获取占位符节点元素对象

⑥ 通过占位符节点.firstChid获取第一个子元素 nodeValue属性刷新这段描述

这是我看完之后自己对着图敲出来的，敲的过程中有一个地方出错，onclick加上之后点击链接依然跳转新窗口展现图片，我第一反应是不是return false 出现了问题，但是在HTML最后我加上测试，确定return false是正确的，那就是写的showPic()函数出现问题了，然后发现getElementById前忘了document，虽然是很初级的新手问题，但是还是写出来为了以后可能会出现这类问题的朋友们吧~

为了让图片库更美观可以自行使用样式表。

JavaScript DOM编程艺术小记（五）---第四章-JavaScript图片库(实例)相关推荐

JavaScript DOM编程艺术（第二版）
JavaScript DOM编程艺术简要介绍第二章: JavaScript语法语法语句注释变量数据类型数组对象操作条件语句比较操作符逻辑操作符循环语句 while循环 for ...
JavaScript DOM 编程艺术（第二版）学习之3-4章
JavaScript DOM 编程艺术 (第二版)学习之3-4章第三章 DOM 3.1 文档:DOM中的"D" 3.2 对象:DOM中的"O" 3.3 模型: ...
JavaScript DOM编程艺术第一章：JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
重读《JavaScript DOM编程艺术》（第一版）
今天来了雅兴去图书馆看书.把<JavaScript DOM编程艺术>温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了. 伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序 ...
JavaScript DOM 编程艺术（第二版）学习之5-6章
JavaScript DOM 编程艺术 (第二版)学习之5-6章第五章最佳实践 5.1 过去的错误 5.2 平稳退化 5.2.1 "javascript:"伪协议 5.2.2 ...
JavaScript Dom编程艺术
当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...
初读JavaScript DOM编程艺术（一）
JavaScript DOM编程艺术--前三章概念总结一. 概述 1.什么是JavaScript 2.什么是DOM 二. JavaScript 语法 1. 语句和注释 2. 变量和数组三. DOM ...
JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
《JavaScript DOM 编程艺术》读书笔记
<JavaScript DOM 编程艺术>读书笔记--其一第二章 1.Javascript代码编写方式: (1)将JavaScript代码放在文档<head>标签中的< ...

JavaScript DOM编程艺术小记（五）---第四章-JavaScript图片库(实例)

JavaScript DOM编程艺术小记（五）---第四章-JavaScript图片库(实例)相关推荐

最新文章

热门文章