《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著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
随机推荐
- 02Android用户界面优化之(一)Android Fragment
一.使用Fragment 1.AndroidManifest.xml文件 <?xml version="1.0" encoding="utf-8"?> ...
- Android设置输入框和软键盘动态悬浮
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...
- 10Cookie
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- char varchar varchar2 的区别 (转)
char varchar varchar2 的区别 http://blog.csdn.net/honglei_zh/article/details/7172538区别:1.CHAR的长度是 ...
- Netty详解
Netty详解 http://blog.csdn.net/suifeng3051/article/category/2161821
- struts2中的方法过滤拦截器
方法过滤拦截器是只过滤指定的方法,如果使用针对action 的普通的过滤器则会过滤该action内部 所有方法.如果在一个action中同时有多个作为业务逻辑控制的方法存在 的话则会过滤所有的业务逻辑 ...
- 在windows下,git webhook使用php拉取代码的学习总结
原来上传代码到测试服务器都是用ftp,我觉得这种方式很低效,而且容易出错,比如忘记传某个修改过文件. 现在项目的代码放在了git@osc上了,想使用他webhook,每当有push的时候,git@os ...
- 用正则表达式抓取网页中的ul 和 li标签中最终的值!
获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...
- android xml解析 sax
1.简要概述 Android 各种文件都是xml格式的,还有标准的webservice返回的是xml文件,虽然现在的json使用在移动设备端越来越广泛,但是xml格式的解析感觉还是相当必要. 2.sa ...
- KDE子项目一览 good
https://www.kde.org/applications/development/ https://www.kde.org/applications/graphics/ https://www ...