利用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函数
Sep 08 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
php验证session无效的解决方法
2014/11/04 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
python3抓取中文网页的方法
2015/07/28 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
python实现图片转字符画的完整代码
2021/02/21 Python
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
留学自荐信写作方法
2014/01/27 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
react 路由Link配置详解
2021/11/11 Javascript
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏