【DOM编程艺术】综合示例

index.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jay Skript And The Domsters</title>
<script src="scripts/modernizr-1.6.min.js"></script>
<link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Welcome</h1>
<p id="intro">Welcome to the official website of Jay Skript and the Domsters. Here, you can <a href="about.html">learn more about the band</a>, view <a href="photos.html">photos of the band</a>, find out about <a href="live.html">tour dates</a> and <a href="contact.html">get in touch with the band</a>.</p>
</article>
<script src="scripts/global.js"></script>
</body>
</html>

global.js


function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != ‘function‘){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}

function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if( parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}

function addClass(element,value){
if(!element.className){
element.className = value;
}else{
newClassName = element.className;
newClassName += ‘ ‘;
newClassName += value;
element.className = newClassName;
}
}

function highlightPage(){
if( !document.getElementById) return false;
if( !document.getElementsByTagName ) return false;
var headers = document.getElementsByTagName(‘header‘);
if( headers.length == 0) return false;
var navs = headers[0].getElementsByTagName(‘nav‘);
if( navs.length == 0 ) return false;
var links = navs[0].getElementsByTagName(‘a‘);
var url = window.location.href;
for(var i=0;i<links.length;i++){
var linkurl = links[i].getAttribute(‘href‘);
if( url.indexOf(linkurl) != -1 ){
links[i].setAttribute(‘href‘,‘#‘);
links[i].className = ‘here‘ ;
}
}
}
addLoadEvent(highlightPage);

【DOM编程艺术】综合示例,码迷,mamicode.com

时间: 2024-10-12 22:01:51

【DOM编程艺术】综合示例的相关文章

《javascript dom编程艺术》笔记(二)——美术馆示例

这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是书中的最后版本,好像是第二版吧.后面还有动态创建结点的一版本,我已经在别的地方实践过了,就不再做了. 只贴出两个函数. //显示图片方法 function showPicture (whichpic) { //综合绑定的事件考虑,条件执行失败,希望浏览器可以让用户打开图片,因此在onclick处re

《JavaScript DOM 编程艺术》 ——笔记

以下只是个人的读书笔记,限于本人的知识局限性,可能有偏差.请见谅,欢迎指出问题. 1.本书的名字就是<JavaScript DOM 编程艺术>,那么首先什么是DOM呢? DOM-Document Object MOdel,按字面上的意思翻译就是文本对象模型.“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” 它将网页抽象成一个节点树: <!DOCTYPE html> <html lang="en&

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

《DOM编程艺术》读书笔记&lt;概述&gt;

作为一名前端开发工程师,学习的过程中总少不了各种各样的书籍,作为新手如何在众多书籍中选到适合自己的呢,我们今天先来谈谈<DOM编程艺术>这本书. 其实呢大部分书都是好书,就像LOL中大部分英雄都很厉害,只有不强悍的召唤师.先了解一本书,然后认真的读下去你一定会有所收获的.在网上搜索书单时,你大概率会看到标题中这本书,但是又会看到褒贬不一的评论,那么这本书到底适不适合入门阅读呢,且听我慢慢道来. 读完这本书的第一感觉就是这本书里面好多内容已经过时了,比如里面大量的 js 对浏览器兼容性的检查,会

JavaScript DOM编程艺术第一章:JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap

Javascript DOM 编程艺术读书笔记16/04/01

愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易跳过createTextNode直接用parentNode.appendChild(text) 单独拎出来晒一晒,以后引以为戒 Javascript DOM 编程艺术读书笔记16/04/01

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

JavaScript DOM编程艺术学习笔记(一)

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad