利用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 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
详解Vue中的watch和computed
Nov 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递归实现层级树状展开
2016/04/01 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
造价工程师个人求职信
2013/09/21 职场文书
自荐信模版
2013/10/24 职场文书
狼和鹿教学反思
2014/02/05 职场文书
个人投资计划书
2014/05/01 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
2014年绿化工作总结
2014/12/09 职场文书
个人委托函范文
2015/01/29 职场文书
python实现进度条的多种实现
2021/04/29 Python