利用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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
PHP取进制余数函数代码
2012/01/19 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
javascript调试说明
2010/06/07 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
Vue的Options用法说明
2020/08/14 Javascript
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Python算法中的时间复杂度问题
2019/11/19 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python类继承和多态原理解析
2020/02/05 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
用python发送微信消息
2020/12/21 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
python实现图片转字符画的完整代码
2021/02/21 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
员工工作心得体会
2019/05/07 职场文书