利用js来实现缩略语列表、文献来源链接和快捷键列表


Posted in Javascript onDecember 16, 2016

1 缩略语列表问题出发点:一段包含大量缩略语的文本,例如:

<p>
 The <abbr title="World Wide Web Consortium">W3C</abbr> defines
 the <abbr title="Document Object Model">DOM</abbr> as:
 </p>
 <blockquote cite="http://www.w3.org/DOM/">
 <p>
 A platform- and language-neutral interface that will allow programs
 and scripts to dynamically access and update the
 content, structure and style of documents.
 </p>
 </blockquote>
 <p>
 It is an <abbr title="Application Programming Interface">API</abbr>
 that can be used to navigate <abbr title="HyperText Markup Language">HTML</abbr>
 and <abbr title="eXtensible Markup Language">XML</abbr> documents.
 </p>

缩略语标签的title属性在浏览器里是隐藏的,不同浏览器对缩略语的默认呈现样式是不同的,那么这多少都会影响用户的体验。一个比较好的解决方法是,将这些缩列语通过列表的方式展示出来。如:

<dl>
 <dt>缩略语标题/abbr.lastChild.nodeValue</dt>
 <dd>缩略语定义描述/abbr.getAttribute</dd>
 ......
</dl>

用DOM来创建这个列表(即用js来动态创建html标记,常见的方法见 详解js的事件处理函数和动态创建html标记方法),大致过程如下:

(1)遍历abbr
   (2)保存abbr的title属性和文本
   (3)创建定义列表元素dl
   (4)创建定义标题元素dt
   (5)将abbr的文本插入到这个dt元素
   (6)创建定义描述元素dd
   (7)将abbr的title属性插入到这个dd元素
   (9)追加以上创建的各元素

代码如下:

function displayAbbreviations() {
 //注释1:注意这里没有对DOM方法做兼容性检查
 var abbreviations = document.getElementsByTagName("abbr");
 var defs = new Array();//注释2:用数组的键值对来保存abbr的title属性和文本
 //loop through the abbr list
 for (var i=0; i<abbreviations.length; i++) {
 var current_abbr = abbrevaitons[i];
 //注释3:if (current_abbr.childNodes.length < 1) continue;
 var defination = current_abbr.getAttributes("title");
 var key = current_abbr.lastChild.nodeValue;
 defs[key] = defination;
 }
 var dlist = document.createElement("dl");
 //loop through the defs
 for (key in defs) {
 var defination = 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(defination);
 ddesc.appendChild(ddesc_text);
 dlist.appendChild(dtitle);
 dlist.appendChild(ddesc);
 }
 //注释4:if (dlist.childNodes.length < 1) return false;
 var header = document.createElement("h2");
 var header_text = document.createElement("Abbreviations");
 header.appendChild(header_text);
 //注释5:下面两行用到了HTML-DOM属性:document.body,也可以用DOM core的 document.getElementsByTagName("body")[0]方法;
 document.body.appendChild(header);
 document.body.appendChild(dlist);
}

displayAbbreviations有很多改进的余地,比如注释1提到的DOM方法兼容性检查问题。还有就是IE6不支持<abbr>的问题,这个问题可以通过增加注释3和注释5中的语句来解决。注释3解决了IE6及之前的版本的IE在统计abbr元素节点时总是返回0的问题,注释5则解决了浏览器不支持abbr元素而出现js报错的问题。

2  动态创建文献来源链接的实现方法和缩列语列表的方法大致相同

<blockquote> 标签定义块引用,它有一个可选的cite属性,这个属性规定了引用的来源。该属性的值是一个包含在引号中并指向某个网页的 URL地址。这个属性很有用,它可以将文献资料和相关网页链接起来。但主流浏览器均不支持 cite 属性,一般都会将它忽略,用户也看不到。

将1中的html代码中 <blockquote> 的cite属性以链接的形式显示出来,代码如下:

function displayCitations() {

//兼容性检查
 if (!document.getElementsByTagName || !document.createElement
 || !document.createTextNode) return false;
 //获取所有的blockquote元素
 var quotes = document.getElementsByTagName("blockquote");
 //1 遍历blockquote元素
 for (var i=0; i<quotes.length; i++) {
 // 检查是否存在cite属性
 if (!quotes[i].getAttribute("cite")) continue;
 // 2 提取cite属性的值
 var url = quotes[i].getAttribute("cite");
 // 获取blockquote包含的所有元素节点,注意是元素节点,这样就把文本节点排除掉了
 var quoteChildren = quotes[i].getElementsByTagName("*");
 // 判断元素是否为空
 if (quoteChildren.length < 1) continue;
 var elem = quoteChildren[quoteChildren.length - 1];//获取最后一个元素节点
 var link = document.createElement("a");//3 创建链接节点
 var link_text = document.createTextNode("source");
 link.appendChild(link_text);
 link.setAttribute("href", url);//4 给链接节点的href属性赋值
 var superscript = document.createElement("sup");
 superscript.appendChild(link);
 elem.appendChild(superscript);//5 追加节点到<blockquote>包含节点的末尾
 }
}

3  accesskey 属性可以将<a>链接与键盘的特定按键关联在一起,如:<a href="index.html" accesskey="1">Home</a>,不过好像不是所有的浏览器都支持这个属性,比如Opera。

   将下面html代码中的accesskey属性像上面缩列语以列表的形式展示出来。

<ul id="navigation">
 <li><a href="index.html" accesskey="1">Home</a></li>
 <li><a href="search.html" accesskey="4">Search</a></li>
 <li><a href="contact.html" accesskey="0">Contact</a></li>
 </ul>

代码如下:

function displayAccesskeys() {
 if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the links in the document
 var links = document.getElementsByTagName("a");
// create an array to store the accesskeys
 var akeys = new Array();
// loop through the links
 for (var i=0; i<links.length; i++) {
 var current_link = links[i];
// if there is no accesskey attribute, continue the loop
 if (current_link.getAttribute("accesskey") == null) continue;
// get the value of the accesskey
 var key = current_link.getAttribute("accesskey");
// get the value of the link text
 var text = current_link.lastChild.nodeValue;
// add them to the array
 akeys[key] = text;
 }
// create the list
 var list = document.createElement("ul");
// loop through the accesskeys
 for (key in akeys) {
 var text = akeys[key];
// create the string to put in the list item
 var str = key + " : "+text;
// create the list item
 var item = document.createElement("li");
 var item_text = document.createTextNode(str);
 item.appendChild(item_text);
// add the list item to the list
 list.appendChild(item);
 }
// create a headline
 var header = document.createElement("h3");
 var header_text = document.createTextNode("Accesskeys");
 header.appendChild(header_text);
// add the headline to the body
 document.body.appendChild(header);
// add the list to the body
 document.body.appendChild(list);
}
addLoadEvent(displayAccesskeys);

最后实现的网页效果如下:

利用js来实现缩略语列表、文献来源链接和快捷键列表

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
javascript 模拟点击广告
Jan 02 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
JS限制条件补全问题实例分析
Dec 16 #Javascript
Node.js用readline模块实现输入输出
Dec 16 #Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 #Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 #Javascript
概述jQuery中的ajax方法
Dec 16 #Javascript
JS数组排序方法实例分析
Dec 16 #Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
js document.write()使用介绍
2014/02/21 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
layui动态表头的实现代码
2019/08/22 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python如何调用字典的key
2020/05/25 Python
如何查看python关键字
2021/01/17 Python
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
给国外客户的邀请函
2014/01/30 职场文书
师德建设实施方案
2014/03/21 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android