《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著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
随机推荐
- WebConfig 配置文件详解
<?xml version="1.0"?><!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual St ...
- (原) Jquery 判断设备是PC端,还是移动端
判断设备是PC端,还是移动端 var ua = navigator.userAgent.toLocaleLowerCase(); var pf = navigator.platform.toLocal ...
- C++中socket编程
原文:http://blog.csdn.net/cuiran/article/details/5854794 Server端 #include <WINSOCK2.H> #include ...
- HTML——表格与表单
1.表格 <table></table> background:背景图片. 属性 值 描述 align left center right 不赞成使用.请使用样式代替. 规定表 ...
- C#(VS2008)服务编写-安装和部署
1.创建一个空白解决方案. 2.在解决方案下面添加两个Windows服务:WXSmsGuardNew(保护服务),WXSmsMainNew(主服务). 3.第一个服务作为保护服务,服务上添加两个控件: ...
- html form表单提交数据并后台获取
前台: HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) <h ...
- git 删除本地分支和远程分支、本地代码回滚和远程代码库回滚
[git 删除本地分支] git branch -D br [git 删除远程分支] git push origin :br (origin 后面有空格) git代码库回滚: 指的是将代码库某分支退 ...
- Java log4j的环境搭建
一.Log4j是什么? Log4j是Apache的一个开源代码项目,通过使用Log4j,我们可以控制日志信息输出的目的地.最常见的就是输出到控制台或者日志文件.同时,它强大的一点是可以在C.C++等其 ...
- mysql 批量更新
bs_user 表,我们叫他 bu表, 字段user_id,len_id, think_wellUser 表,我们简称为tw表,中的user_id ,len_id 其中tw表的user_id 是bu表 ...
- cocos2d-x box2d使用调试绘图
cocos2d-x box2d使用调试绘图 复制TestCpp的GLES-Render.h和GLES-Render.cpp过来. 添加一个成员变量: GLESDebugDraw *m_debugDra ...