《javascript dom编程艺术》笔记(二)——美术馆示例

时间:2022-12-04 15:42:34

这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧。

现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做。

这个版本不是书中的最后版本,好像是第二版吧。后面还有动态创建结点的一版本,我已经在别的地方实践过了,就不再做了。

只贴出两个函数。

//显示图片方法
function showPicture (whichpic) {
//综合绑定的事件考虑,条件执行失败,希望浏览器可以让用户打开图片,因此在onclick处return true,执行跳转事件
if(!document.getElementById("placeholder")) return true;
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",whichpic.getAttribute("href"));
//照片已显示出来,不必要再跳转页面,因此可直接返回false
if(!document.getElementById("description")) return false;
var description = document.getElementById("description");
var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";//这里还需要检查是否存在title这个属性
description.innerText = text;
return false;//不要忘记执行完成,返回false
}
//初始化美术馆事件
function perpareGallery () {
//检查是否支持getElementsByTagName , getElementById
if(!document.getElementById||!document.getElementsByTagName) return false;
//检查是否存在结点
if(!document.getElementById("imageGallery")) return false;
//创建必要的变量
var gallery = document.getElementById("imageGallery");
var links = document.getElementsByTagName("a");
//循环绑定点击事件
for (var i = 0; i <links.length; i++) {
links[i].onclick=function () {
return showPicture(this);
//return false;//可以执行完成,则阻止打开新的页面
}
}; }

好吧,我承认我在应付了事……

主要是我已经迫不及待地要开始看下一本书了~

《javascript dom编程艺术》笔记(二)——美术馆示例的更多相关文章

  1. JavaScript DOM编程艺术 笔记(二)语句操作

    操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...

  2. JavaScript DOM编程艺术 笔记(一)

    探测浏览器品牌版本代码-----浏览器嗅探 代码 JavaScript==ECMAScript java几乎可以部署在任何环境,js只应用于web浏览器 API是一组得到各方面共同认同的基本约定(元素 ...

  3. javascript dom编程艺术笔记之图片库的改进

    dom的操作要遵守的原则 1.平稳退化 2.分离javascript 3.向后兼容 4.性能考虑 改进后的显示图片方法 function showpic(whichpic){ if(!document ...

  4. javascript dom编程艺术笔记第三章:DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  5. JavaScript DOM编程艺术 笔记(四)

    DOM document   object model(map) 家谱树---节点树 父 子  兄弟 元素节点  <div> 文本节点  内容 属性节点   value  src getE ...

  6. JavaScript DOM编程艺术 笔记(三)函数

    函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...

  7. javascript dom 编程艺术笔记 第四章:图片库

    首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  9. 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  10. Javascript DOM 编程艺术(第二版)读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

随机推荐

  1. EF快速开发定义数据接口类(转)

    using System; using System.Linq; using System.Linq.Expressions; using System.Data.Objects; namespace ...

  2. javase基础复习攻略《五》

    总结完JAVA的基础语法和面向对象思想后,今天为大家补充一下JAVA中的数组,数组是什么呢?大家是不是想到了集合,数组和集合有相似之处,集合中的数据无序,不可以重复.数组中则存放着具有相同特征的一组数 ...

  3. MVC过滤器之 OnActionExcuted

    Controller里 [SendMessage] public Action SendSmsMessage() { var resultExtendInfo=new ResultExtendInfo ...

  4. 安装sql server managerment studio报错&quot&semi;The instance id is required but it is missing&quot&semi;

    问题描述: 今天在安装sql server managerment studio的时候提示报错"The instance id is required but it is missing&q ...

  5. iOS 各种系统文件目录 临时,缓存,document&comma;lib&comma;归档,序列化

    /** 1:Documents:应用中用户数据可以放在这里,iTunes备份和恢复的时候会包括此目录 2:tmp:存放临时文件,iTunes不会备份和恢复此目录,此目录下文件可能会在应用退出后删除 3 ...

  6. ios代理设计模式

    代理设计模式的作用:     1.A对象监听B对象的一些行为,A成为B的代理     2.B对象想告诉A对象一些事情,A成为B的代理   代理设计模式的总结:     如果你想监听别人的一些行为,那么 ...

  7. MINA、Netty、Twisted一起学(十一):SSL&sol;TLS

    什么是SSL/TLS 不使用SSL/TLS的网络通信,一般都是明文传输,网络传输内容在传输过程中很容易被窃听甚至篡改,非常不安全.SSL/TLS协议就是为了解决这些安全问题而设计的.SSL/TLS协议 ...

  8. isupper&lpar;&rpar;函数

    isupper()函数可以用来判断字符c是否为大写英文字母! 原型:extern int isupper(int c); 头文件:ctype.h 功能:判断字符c是否为大写英文字母 说明:当参数c为大 ...

  9. Java设计模式之抽象工厂

    概述 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计模式的目的:为了代码可重用性.让代码更容易被他人理解.保证代码可靠性. 设计模式 ...

  10. 如何使用Android MediaStore裁剪大图片

    译者按:在外企工作的半年多中花了不少时间在国外的网站上搜寻资料,其中有一些相当有含金量的文章,我会陆陆续续翻译成中文,与大家共享之.初次翻译,“信达雅”三境界恐怕只到信的层次,望大家见谅! 这篇文章相 ...