《javascript dom编程艺术》笔记(二)——美术馆示例
这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧。
现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做。
这个版本不是书中的最后版本,好像是第二版吧。后面还有动态创建结点的一版本,我已经在别的地方实践过了,就不再做了。
只贴出两个函数。
//显示图片方法
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编程艺术》笔记(二)——美术馆示例的更多相关文章
- JavaScript DOM编程艺术 笔记(二)语句操作
操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...
- JavaScript DOM编程艺术 笔记(一)
探测浏览器品牌版本代码-----浏览器嗅探 代码 JavaScript==ECMAScript java几乎可以部署在任何环境,js只应用于web浏览器 API是一组得到各方面共同认同的基本约定(元素 ...
- javascript dom编程艺术笔记之图片库的改进
dom的操作要遵守的原则 1.平稳退化 2.分离javascript 3.向后兼容 4.性能考虑 改进后的显示图片方法 function showpic(whichpic){ if(!document ...
- javascript dom编程艺术笔记第三章:DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
- JavaScript DOM编程艺术 笔记(四)
DOM document object model(map) 家谱树---节点树 父 子 兄弟 元素节点 <div> 文本节点 内容 属性节点 value src getE ...
- JavaScript DOM编程艺术 笔记(三)函数
函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...
- javascript dom 编程艺术笔记 第四章:图片库
首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- Javascript DOM 编程艺术(第二版)读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
随机推荐
- CSS权威指南学习笔记 —— 初步认识CSS
层叠样式表(Cascading Style Sheets,CSS)可以影响文档的表现.CSS是依附于文档的,如果不存在某种文档,CSS基本上是没有用的. 为什么会有CSS 在web早期(1990-19 ...
- asp.net linq查询环境搭建
本文是以sqlserver2008为数据库,vs2013为开发工具来介绍的. 要搭建这样一个数据库的操作环境,首先建立一个类库项目 然后在这个类库项目中添加几个类:DBDataContext数据库上下 ...
- JQuery(三)——操作HTML和CSS内容
前边我们学习过JS通过DOM来操作HTML(详看DOM(一)——HTML DOM ),这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢?顺便两者之间相互比较一下,看其差别 ...
- 修复CefSharp浏览器组件中文输入Bug
概述 最近在win10上开发wpf应用,需要将CefSharp中wpf版本的浏览器组件(版本号v51.0.0)嵌入到应用中,但是发现不支持中文输入,GitHub上有这个问题的描述,参照其提到的方法可以 ...
- [Linked List]Remove Linked List Elements
Total Accepted: 43183 Total Submissions: 160460 Difficulty: Easy Remove all elements from a linked l ...
- hdu3525
题目大意:某个大学有个2个校区,此大学有n(1<=n<=10000)个运动员,这n个运动员在每个校区都挑选了m(1<=m<=10)个拉拉队.现在每个校区(A/B)中,这m*n个 ...
- MySql按指定天数进行分组数据统计分析 1
这几天,在做数据统计,在对数据库数据进行统计过程中,有个需求就是要按照指定天数进行分组, 之前一直没有找到好的方法,就先取出数据,在程序中进行分组. 后发现,可以在SQL语句中实现按天数分组. 例: ...
- linux 下 安装nexus
1. 获得root权限 [ferrari@localhost ~]$ su - 2. 下载nexus集成版 [root@localhost ~]# cd /usr/local [root@l ...
- 数组转DataTable
using System; using System.Data; namespace ArrayToDataTable { class ArrayToDataTable { /// <summa ...
- linux---finger命令
问题:CentOS7默认是没有安装finger这个程序的,所以finger命令执行不了. 解决方案: 1.安装finger yum -y install finger