《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中关于transform、transition、animate的区别
写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画 ...
- js的事件属性方法一览表
event对象常用属性和方法 event 对象用来表示当前事件,事件有很多状态,例如,鼠标单击时的位置,按下键盘时的按键,发生事件的HTML元素,是否执行默认动作,是否冒泡等,这些都是作为event对 ...
- CSS学习笔记(1):选择器
一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...
- class如何命名更规范
相信写css的人都会遇到下面的问题: 糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点... 而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地 ...
- zepto 获取checked selected元素
原文阅读:WISER CODER 1. Zepto.js and the :selected and :checked selectors 如果你已经看上了jQuery那残弱的表兄弟, Zepto.j ...
- mysql数据库sql优化
此文章为转载 一. 前提 这里的原则 只是针对mysql数据库,其他的数据库 某些是殊途同归,某些还是存在差异.我总结的也是mysql普遍的规则,对于某些特殊情况得特殊对待.在构造sql语句的时候养成 ...
- ajax 实现异步请求
ajax实现异步请求: function onclicks() { $.ajax( { url:'../hhh/columnSearch.do',// 跳转到 action // data: {tab ...
- 关于 <video> 的兼容性测试
测试浏览器 Firefox: 33.0.1 Chrome: 38.0.2125.111 m Safari: 5.1.7 IE: 9 和 10(6,7,8不考虑) 经测试:FF.Chrome.Safar ...
- css3波浪形loading动画
css3做个第一个动画,主要点在box-shadow和background的变化,虽然不难,但是还是有一定的技巧性的!备注下 html <div class="loading" ...
- MySQL----information-schema数据库相关权限的说明。
MySQL中的information_schema数据库比较特别有如下几个要注意的地方. 1.就算是一个新创建的用户,也就是说这个用户只有一个usage权限.它都可以查看informatoin_sch ...