你的位置:首页 > Java教程

[Java教程]javascripts学习笔记(五):用js来实现缩略语列表、文献来源链接和快捷键列表。


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"></abbr> documents.  </p>

    缩略语标签的title属性在浏览器里是隐藏的,不同浏览器对缩略语的默认呈现样式是不同的,那么这多少都会影响用户的体验。一个比较好的解决方法是,将这些缩列语通过列表的方式展示出来。如:

<dl>	<dt>缩略语标题/abbr.lastChild.nodeValue</dt>	<dd>缩略语定义描述/abbr.getAttribute</dd>	......</dl>

  用DOM来创建这个列表(即用js来动态创建html标记,常见的方法见javascript学习笔记(四):事件处理函数和动态创建html标记。),大致过程如下:

   (1)遍历abbr
   (2)保存abbr的title属性和文本
   (3)创建定义列表元素dl
   (4)创建定义标题元素dt
   (5)将abbr的文本插入到这个dt元素
   (6)创建定义描述元素dd
   (7)将abbr的title属性插入到这个dd元素
   (9)追加以上创建的各元素

    代码如下:

 1 function displayAbbreviations() { 2   //注释1:注意这里没有对DOM方法做兼容性检查 3   var abbreviations = document.getElementsByTagName("abbr"); 4   var defs = new Array();//注释2:用数组的键值对来保存abbr的title属性和文本 5   //loop through the abbr list 6   for (var i=0; i<abbreviations.length; i++) { 7     var current_abbr = abbrevaitons[i]; 8     //注释3:if (current_abbr.childNodes.length < 1) continue; 9     var defination = current_abbr.getAttributes("title");10     var key = current_abbr.lastChild.nodeValue;11     defs[key] = defination;12   }13   var dlist = document.createElement("dl");14   //loop through the defs15   for (key in defs) {16     var defination = defs[key];17     var dtitle = document.createElement("dt");18     var dtitle_text = document.createTextNode(key);19     dtitle.appendChild(dtitle_text);20     var ddesc = document.createElement("dd");21     var ddesc_text = document.createTextNode(defination);22     ddesc.appendChild(ddesc_text);23     dlist.appendChild(dtitle);24     dlist.appendChild(ddesc);25   }26   //注释4:if (dlist.childNodes.length < 1) return false;27   var header = document.createElement("h2");28   var header_text = document.createElement("Abbreviations");29   header.appendChild(header_text);30   //注释5:下面两行用到了HTML-DOM属性:document.body,也可以用DOM core的 document.getElementsByTagName("body")[0]方法;31   document.body.appendChild(header);32   document.body.appendChild(dlist);33 }

    displayAbbreviations有很多改进的余地,比如注释1提到的DOM方法兼容性检查问题。还有就是IE6不支持<abbr>的问题,这个问题可以通过增加注释3和注释5中的语句来解决。注释3解决了IE6及之前的版本的IE在统计abbr元素节点时总是返回0的问题,注释5则解决了浏览器不支持abbr元素而出现js报错的问题。

2  动态创建文献来源链接的实现方法和缩列语列表的方法大致相同

    <blockquote> 标签定义块引用,它有一个可选的cite属性,这个属性规定了引用的来源。该属性的值是一个包含在引号中并指向某个网页的 URL地址。这个属性很有用,它可以将文献资料和相关网页链接起来。但主流浏览器均不支持 cite 属性,一般都会将它忽略,用户也看不到。

    将1中的html代码中 <blockquote> 的cite属性以链接的形式显示出来,代码如下:

 1 function displayCitations() {
    //兼容性检查 2 if (!document.getElementsByTagName || !document.createElement 3 || !document.createTextNode) return false; 4 //获取所有的blockquote元素 5 var quotes = document.getElementsByTagName("blockquote"); 6 //1 遍历blockquote元素 7 for (var i=0; i<quotes.length; i++) { 8 // 检查是否存在cite属性 9 if (!quotes[i].getAttribute("cite")) continue;10 // 2 提取cite属性的值11 var url = quotes[i].getAttribute("cite");12 // 获取blockquote包含的所有元素节点,注意是元素节点,这样就把文本节点排除掉了13 var quoteChildren = quotes[i].getElementsByTagName("*");14 // 判断元素是否为空15 if (quoteChildren.length < 1) continue;16 var elem = quoteChildren[quoteChildren.length - 1];//获取最后一个元素节点17 var link = document.createElement("a");//3 创建链接节点18 var link_text = document.createTextNode("source");19 link.appendChild(link_text);20 link.setAttribute("href", url);//4 给链接节点的href属性赋值21 var superscript = document.createElement("sup");22 superscript.appendChild(link);23 elem.appendChild(superscript);//5 追加节点到<blockquote>包含节点的末尾24 }25 }

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>

    代码如下:

 1 function displayAccesskeys() { 2  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; 3 // get all the links in the document 4  var links = document.getElementsByTagName("a"); 5 // create an array to store the accesskeys 6  var akeys = new Array(); 7 // loop through the links 8  for (var i=0; i<links.length; i++) { 9   var current_link = links[i];10 // if there is no accesskey attribute, continue the loop11   if (current_link.getAttribute("accesskey") == null) continue;12 // get the value of the accesskey13   var key = current_link.getAttribute("accesskey");14 // get the value of the link text15   var text = current_link.lastChild.nodeValue;16 // add them to the array17   akeys[key] = text;18  }19 // create the list20  var list = document.createElement("ul");21 // loop through the accesskeys22  for (key in akeys) {23   var text = akeys[key];24 // create the string to put in the list item25   var str = key + " : "+text;26 // create the list item27   var item = document.createElement("li");28   var item_text = document.createTextNode(str);29   item.appendChild(item_text);30 // add the list item to the list31   list.appendChild(item);32  }33 // create a headline34  var header = document.createElement("h3");35  var header_text = document.createTextNode("Accesskeys");36  header.appendChild(header_text);37 // add the headline to the body38  document.body.appendChild(header);39 // add the list to the body40  document.body.appendChild(list);41 }42 addLoadEvent(displayAccesskeys);

    最后实现的网页效果如下: