利用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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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/10/31 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
destoon常用的安全设置概述
2014/06/21 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
Python实现截屏的函数
2015/07/26 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Python3 合并二叉树的实现
2019/09/30 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python csv文件记录流程代码解析
2020/07/16 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
创立科技Java面试题
2015/11/29 面试题
学生实习自我鉴定
2013/10/11 职场文书
护士的岗位职责
2013/12/04 职场文书
我为自己代言广告词
2014/03/18 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
学校开学标语
2014/10/06 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js