JavaScript之充实文档的内容
2016-08-05 15:42
375 查看
1、我们在平时的开发中会碰到一些缩略语如:XML,HTML,API等专业术语;为了能使用户,更好的了解术语的意思,我们通常会给<abbr></abbr>标签加一个title属性来放术语的全称,但是有些浏览器可能不会显示title属性,所以我们通过JS来动态的加载并显示缩略语和他的全称。代码如下:
js代码:
html:
效果如图:
我们在写博客和文章的经常引用别人的文章,这个时候我们会说明这段文档的出处,我们在开发时亦是如此:这个时候我们可以给我们引用的段落用一个<blockquote></blockquote>包围,然后在里面加一个cite属性(文章出处的链接地址)标明出处,然后通过JS将地址动态的加载到引用段落的最后位置。代码如下:
js代码:
html代码如下:
效果如下:
from w3c 表明了出处,超链接也指向了来源的地方.
在html元素的属性里有一个accseekey属性,这个属性可以把一个元素与键盘上的某个特定按键关联在一起,这对那些不能或不喜欢使用鼠标来浏览网页的人们很有用。对于有视力障碍的人士,键盘快捷方式肯定会带来方便。
注意:设置太多的快捷键往往会适得其反,他们或许可能会与浏览器内建的键盘快捷方式发生冲突。
js代码:
输出如下:
js代码:
window.onload=displayAbbreviations; //处理文档中的缩略语,用JS生成一个列表用来显示对应的缩略语的具体含义 //produce a list of Abbreviation by js to deal with the Abbreviation in the document function displayAbbreviations() { if (!checkCompatibility()) return; //检查兼容性 var abbreviations = document.getElementsByTagName("abbr"); //提取所有的缩略词标签 if (abbreviations.length < 1) return false; var defs = new Array(); for (var i = 0; i < abbreviations.length; i++) { var key = abbreviations[i].firstChild.nodeValue;//标签的文本值当key var definition = abbreviations[i].getAttribute("title"); //标签的title属性值当value; defs[key] = definition; } //创建缩略词展示列表 var dllist = document.createElement("dl"); for (key in defs) { //创建缩略词标题 var dt=document.createElement("dt"); var tit = document.createTextNode(key); dt.appendChild(tit); //创建描述 var dd = document.createElement("dd"); var descri = document.createTextNode(defs[key]); dd.appendChild(descri); dllist.appendChild(dt); dllist.appendChild(dd); } document.getElementsByTagName("body")[0].appendChild(dllist); } /* 检查浏览器的兼容性,是否支持查用的DOM方法 check the compatibility of the broswer */ function checkCompatibility() { if (!document.getElementById) return false; if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementsByTagName) return false; if (!document.getElementsByName) return false; return true; }
html:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/index.js" type="text/javascript"></script> </head> <body> <h1>What is the Document Object Model?</h1> <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/" title="W3C"> <p> A platform- and language-neutral(中立语言) interface that will allows paograms and scripts to dynamically access and update the content,structrue and the 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> </p> <h1>Abbreviation(缩略语列表)</h1> </body> </html>
效果如图:
我们在写博客和文章的经常引用别人的文章,这个时候我们会说明这段文档的出处,我们在开发时亦是如此:这个时候我们可以给我们引用的段落用一个<blockquote></blockquote>包围,然后在里面加一个cite属性(文章出处的链接地址)标明出处,然后通过JS将地址动态的加载到引用段落的最后位置。代码如下:
js代码:
/* 检查浏览器的兼容性,是否支持查用的DOM方法 check the compatibility of the broswer */ function checkCompatibility() { if (!document.getElementById) return false; if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementsByTagName) return false; if (!document.getElementsByName) return false; return true; } //文献来源链接表 在引用的文档的末尾添加引用的具体地址 //The literature source list function:add specific adress to end of the reference document function getLiteratureSourceList() { if (!checkCompatibility()) return; //检查兼容性 if (!document.getElementsByTagName("blockquote")) return false; var quotes =document.getElementsByTagName("blockquote"); for (var i = 0; i < quotes.length; i++) { var cite = quotes[i].getAttribute("cite") != "" ? quotes[i].getAttribute("cite") : "javascript:void(0)"; //get reallink var from = quotes[i].getAttribute("title") == "" ? "" : "from "+quotes[i].getAttribute("title"); //get the origin of the document var link = document.createElement("a"); link.setAttribute("href", cite); //set href to a var txt = document.createTextNode(from); link.appendChild(txt); quotes[i].appendChild(link); } } //The literature source list end
html代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/utility.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script> </head> <body> <h1>What is the Document Object Model?</h1> <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/" title="W3C"> <p> A platform- and language-neutral(中立语言) interface that will allows paograms and scripts to dynamically access and update the content,structrue and the 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> </p> <h1>Abbreviation(缩略语列表)</h1> </body> </html>
效果如下:
from w3c 表明了出处,超链接也指向了来源的地方.
在html元素的属性里有一个accseekey属性,这个属性可以把一个元素与键盘上的某个特定按键关联在一起,这对那些不能或不喜欢使用鼠标来浏览网页的人们很有用。对于有视力障碍的人士,键盘快捷方式肯定会带来方便。
注意:设置太多的快捷键往往会适得其反,他们或许可能会与浏览器内建的键盘快捷方式发生冲突。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/utility.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script> </head> <body> <ul id="navigation"> <li><a href="javascript:void(0)" accesskey="1">Home</a></li> <li><a href="javascript:void(0)" accesskey="4">Search</a></li> <li><a href="javascript:void(0)" accesskey="9">Contact</a></li> </ul> <h1>What is the Document Object Model?</h1> <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/" title="W3C"> <p> A platform- and language-neutral(中立语言) interface that will allows paograms and scripts to dynamically access and update the content,structrue and the 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> </p> <h1>Abbreviation(缩略语列表)</h1> </body> </html>
js代码:
//展示网页快捷键清单 //display the list of shortcut key function displayAccessKeys() { if (!checkCompatibility()) return; //check compatibility var links = document.getElementsByTagName("a"); var keys = new Array(); for (var i = 0; i < links.length; i++) { var current_link = links[i]; if (!current_link.getAttribute("accesskey")) continue; var key = current_link.getAttribute("accesskey"); //get the key var text = current_link.firstChild.nodeValue; //get the description keys[key] = text; } var ul = document.createElement("ul"); for (key in keys) { var li = document.createElement("li"); var li_txt = key + " : " + keys[key]; var item = document.createTextNode(li_txt); li.appendChild(item); ul.appendChild(li); } var tit = document.createElement("h3"); var tit_text = document.createTextNode("state of shortcut key(快捷键说明)"); tit.appendChild(tit_text); document.getElementsByTagName("body")[0].appendChild(tit); document.getElementsByTagName("body")[0].appendChild(ul); } //display the list of shortcut key end /* 检查浏览器的兼容性,是否支持查用的DOM方法 check the compatibility of the broswer */ function checkCompatibility() { if (!document.getElementById) return false; if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementsByTagName) return false; if (!document.getElementsByName) return false; return true; }
输出如下:
相关文章推荐
- JavaScript 闭包
- JSP 万能DAO( 增删改查)
- js正则表达式学习笔记
- 【ArcGIS for JavaScript】加载地图,并标注点
- JavaScript prototype
- 基于HTML+CSS+JS实现增加删除修改tab导航特效代码
- JavaScript学习之Array(数组对象)方法介绍
- touch事件影响click事件探究
- 解决ie打开url返回json/map自动下载
- 关于JS原型链
- ajax同步开发——json+对应的处理方式直接贴上被我滥用的代码标本吧:
- D3.js学习总结
- 用面向对象的编程思想去写js
- 前后台json数据绑定——way.JS
- [leetcode]304. Range Sum Query 2D - Immutable -- JavaScript 代码
- 轻松理解javascript中的闭包
- JavaScript事件概览
- 当获得json格式的字符串时,如何用Alibaba的json包来解析
- JavaScript笔记:引用类型
- JS中function()使用方法