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

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

html代码

<!DOCTYPE html> <html> <head> <title>我的图片库</title> <link rel="stylesheet" href="Layout.css" media="screen"/> </head> <body> <h1>这是我的图片库</h1> <ul> <li> <a href="images/1.jpg" title="欢迎看我，我是图片一" οnclick="showPic(this);return false;">图片一 </a> </li> <li> <a href="images/2.jpg" title="欢迎看我，我是图片二" οnclick="showPic(this);return false;">图片二 </a> </li> <li> <a href="images/3.jpg" title="欢迎看我，我是图片三" οnclick="showPic(this);return false;">图片三 </a> </li> <li> <a href="images/4.jpg" title="欢迎看我，我是图片四" οnclick="showPic(this);return false;">图片四 </a> </li> <li> <a href="images/5.jpg" title="欢迎看我，我是图片五" οnclick="showPic(this);return false;">图片五 </a> </li> </ul> <img id="placeholder" src="data:images/placeholder.gif" alt="我的图片"/> <p id="description">请选择图片</p> <script type="text/javascript" src="showPic.js"></script> </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代码

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中的内容. }

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

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

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

转载于:https://www.cnblogs.com/springside6/archive/2012/05/29/2525474.html

《JavaScript DOM编程艺术》学习回顾4相关推荐

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

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

《JavaScript DOM编程艺术》学习回顾4相关推荐

最新文章

热门文章