JavaScript DOM 编程艺术(第2版)读书笔记 (8)
<!--这章的内容略奇怪啊!可能是因为我之前没有接触过这些知识点,等以后用到的时候再回来翻阅吧,现在先简要介绍一下
js权限已通过,博客园好快的效率啊,谢谢O(∩_∩)O
-->
缩略语
这段文本包含大量的缩略语,上面都已经用<abbr>标签把它们标识出来了。
有些浏览器会把文档中的缩略语(<abbr>标签)显示为带有下划线或下划点的文本,另一些浏览器则会把缩略语显示为斜体字。
缩略语(<abbr>标签)的title属性在浏览器里是隐藏的。有些浏览器会在你把鼠标指针悬停在缩略语上时,将它的title属性显示为一个弹出式的提示消息。就像浏览器所使用的默认样式那样,浏览器对缩略语的默认呈现行为也是各有各的做法。
我们可以使用DOM去改变浏览器的默认行为。
用一个定义列表元素来集中显示这些<abbr>标签包含的文本和title属性最合适不过了。代码如下:
<dl>
<dt>W3C</dt>
<dd>World Wide Web Consortium</dd>
<dt>DOM</dt>
<dd>Document Object Model</dd>
<dt>API</dt>
<dd>Application Programming Interface</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Language</dd>
</dl>
你可以使用DOM来创建这个定义列表:
一个浏览器“地雷”
displayAbbreviations函数确实工作的不错,但是如果你使用的浏览器是IE6或更早的Windows版本,极有可能会看到一条JavaScript出错消息。
事情还要从本书第1章里提到的浏览器大战说起。在那场大战中,网景公司和微软公司曾把<abbr>和<acronym>标签当作它们的武器之一。在竞争最激烈时,微软决定不在自己的浏览器里实现abbr元素。
那场浏览器大战早已烟消云散,最终结果是微软打败了网景,但微软的IE浏览器直到IE7才支持abbr元素。displayAbbreviations函数在早期版本中失败,是因为它试图从一些abbr元素节点那里提取属性节点和文本节点,而IE浏览器却拒绝承认那些abbr节点的“元素”地位。
可供选择的解决方案有三种:
1,把abbr元素统一替换为acronym元素。我对这种解决方案不感兴趣,因为我不想为了迁就一种顽固不化的浏览器而“牺牲”一大批语义正确的标记。
2,在元素中使用html命名空间(<html:abbr>abbr</html:abbr>),这样IE就可以认出这些元素。这个方案涉及修改标记,如果要在其它文档中使用displayAbbreviations函数,问题仍得不到解决。
3,保证displayAbbreviations函数在IE中能够平稳退化。这个方案实现起来最简单,也最容易被人接受。只要多写几行代码,IE(或其他不能识别abbr元素的浏览器)就可以提前退出。
所以,我们选用第三种。
首先,在负责从abbr元素提取title属性值和文本值得for循环里添加一条语句:
for(var i=0; i<abbreviations.length;i++){
var current_abbr = abbreviations[i];
if(current_abbr .childNodes.length<1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
这条新语句是的含义是:“如果当前元素没有子节点,就立刻开始下一次循环”。因为IE浏览器在统计abbr元素的子节点个数时总是会返回一个错误的值——零,所以这条新语句会让IE浏览器不再继续执行这个循环中的后续代码。
其次,在负责创建“缩略语列表“的那个for循环后面添加这样一条语句:
//遍历定义
for(key in defs){
var definition = defs[key];
//创建定义列表
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
//创建定义描述
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
//把它们添加到定义列表
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if(dlist.childNodes.length<1) return false;
当IE浏览器执行到这个for循环时,因为defs数组是空的,所以它将不会创建出任何dt和dd元素。我们在for循环后面添加的这条新语句会让程序立刻退出displayAbbreviations函数。虽然新添加的这条if语句又一次违背了结构化程序设计原则(一个函数应该只有一个入口和一个出口)——它等于是在函数的中间增加了一个出口点。但这应该是既可以解决IE浏览器的问题,又不需要对现有的函数代码大动干戈的最简单的办法了。
文献来源链接表
blockquote元素包含一个cite属性,这是一个可选属性,你可以给它一个URL地址,告诉人们blockquote元素的内容引自哪里。从理论上讲,这是一个把文献资料与相关网页链接起来的好办法;但在实践中,浏览器完全忽视cite属性的存在。虽然信息就在那里,但用户却无法看到它们。利用JavaScript和DOM,我们完全可以把那些信息收集起来,并利用sup元素把它插入文档。
快捷键清单
accesskey属性可以把一个元素(如链接)与键盘上的某个特定按键关联在一起。这对那些不能或不喜欢使用鼠标来浏览网页的人们很有用。
一般来说,在适用于Windows系统的浏览器里,快捷键的用法是在键盘上同时按下Alt键和特定按键;在适用于Mac系统的浏览器里,快捷键的用法是同时按下Ctrl键和特定按键。
下面是accesskey属性的一个例子:
<a href="index.html" accesskey="1">Home</a>
一些基本的快捷键都有约定俗成的设置办法,对此感兴趣的读者可以浏览http://www.clagnut.com/blog/193/。
accesskey="1"对应着一个“返回到本网站主页”的链接;
accesskey="2"对应着一个“后退到前一页面”的链接;
accesskey="4"对应着一个“打开本网站的搜索表单/页面”的链接;
accesskey="9"对应着一个“本网站联系办法”的链接;
accesskey="0"对应着一个“查看本网站的快捷键清单”的链接;
有许多网站都会在一个快捷键清单页面上列明该网站都支持哪些快捷键。
<!--
作者:纤锐
出处:http://www.cnblogs.com/beginner2014/p/4176730.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。
-->
JavaScript DOM 编程艺术(第2版)读书笔记 (8)的更多相关文章
- Javascript DOM 编程艺术(第二版)读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《JavaScript DOM编程艺术(第二版)》读书总结
这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...
- 【读书笔记】读《JavaScript DOM 编程艺术-第2版》
1.DHTML DHTML曾被认为是HTML/XHTML.CSS和JavaScript相结合的产物,就像今天的HTML5那样,但把这些东西真正凝聚在一起的是DOM.如果真的需要来描述这一过程的话,“D ...
- Javascript DOM 编程艺术(第二版)读书笔记——DOM基础
1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父) child(子) sibling(兄弟) ...
- JavaScript -- JavaScript DOM 编程艺术(第2版)
/* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="styleshe ...
- 《JavaScript DOM 编程艺术 第 2 版》
第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案 ...
- JavaScript DOM编程艺术读后感(1)—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
- JavaScript DOM编程艺术(第2版)的简单总结
介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
随机推荐
- 使用已有PDB克隆PDB
使用已有PDB克隆PDB $ sqlplus '/as sysdba' SQL*Plus: Release Production on Tue Jun :: Copyright (c) , , Ora ...
- 异常积累:org.hibernate.StaleStateException
ERROR - Exception executing batch: org.hibernate.StaleStateException: Batch update returned unexpec ...
- JAX-WS(一)之使用wsgen从Java创建简单的WebService
概念 JAX-WS2.0的全称Java API for XML-Based Web Service 2.0.JAX-WS2.0是对JAX-RPC1.0规范的扩展,是JAX-RPC1.1的后续版本,JA ...
- leetcode-5 最长回文子串(动态规划)
题目要求: * 给定字符串,求解最长回文子串 * 字符串最长为1000 * 存在独一无二的最长回文字符串 求解思路: * 回文字符串的子串也是回文,比如P[i,j](表示以i开始以j结束的子串)是回文 ...
- C++Builder 解决绘图闪动问题
使用双缓冲 Form->DoubleBuffered = true; Panel->DoubleBuffered = true;
- Python学习总结19:类(二)
参考:http://python.jobbole.com/82308/ 继承和__slots__属性 1. 继承 在Python中,同时支持单继承与多继承,一般语法如下: class SubCl ...
- HDU 2993 MAX Average Problem(斜率优化)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2993 Problem Description Consider a simple sequence w ...
- PHP中9大缓存技术总结(转载 http://www.php100.com/html/php/lei/2015/0919/8969.html)
PHP中9大缓存技术总结 来源: 时间:2015-09-19 02:40:33 阅读数:57767 分享到: 12 [导读] 1.全页面静态化缓存也就是将页面全部生成html静态页面,用户访问 ...
- mtool安装
先安装python pip.一种python包管理工具. 下面这篇文章讲的很详细.亲测可行. https://ruter.github.io/2015/12/03/Update-python/ git ...
- 夺命雷公狗---Thinkphp----14之前台的首页完善
我们先来完成我们的首页部分,我们首页要先来完成到焊条部分和右侧的导航部分: 我们先来写控制器: 然后在右侧遍历头部遍历出我们所需要的数据: 因为我们的右侧是引入进来的,所以我们需要到右侧视图下进行遍历 ...