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,列表
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
- 群星《超好听流行音乐10CD》五星珍藏版[WAV+CUE][6.6G]
- 群星1990-经典金曲金中之金2CD[日本天龙版][WAV+CUE]
- 群星《2024好听新歌05》十倍音质WAV分轨
- 诹访内晶子AkikoSuwanai巴赫:小提琴协奏曲《J.S.BachViolinConcertos》(flac)
- 苏打绿《原汁原味》[320K/MP3][27.44MB]
- 苏打绿《原汁原味》[FLAC/分轨][73.86MB]
- 群星《青春重置计划9新的凡人歌》[320KMP3][89.41MB]
- 苏曼《苏曼的夜晚HQII》[低速原抓WAV+CUE]
- 【电影原声】汉斯·季默《星际穿越》2014[FLAC+CUE整轨]
- 诹访内晶子AkikoSuwanai巴赫:小提琴协奏曲《J.S.BachViolinConcertos》(flac)
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 【爵士乐】VA-2024-ParamountJazzLoungeChillingExperience(FLAC)
- 群星《离歌 网剧原声带》[320K/MP3][249.78MB]
- 群星《离歌 网剧原声带》[FLAC/分轨][538.53MB]