第一章 Java Script简史
1、DOM是指文档对象模型。我们可以利用DOM给文档增加交互能力。DOM简单来说就是一套对文档的内容进行抽象和概念化的方法，是一种应用编程接口。
第二章 Java Script语法
1、Java Script代码执行的两种方法：
①将Java Script代码直接放到HTML文档<head>标签中的<script>标签里；
②将Java Script代码存入一个扩展名为.js的独立文档中，并在HTML文档的<head>部分放一个<script>标签，并把它的src属性指向该文件。但最好是把<script>标签放到HTML文档最后，</body>标签之前，这样浏览器能更快地加载页面。
2、注释方法：
①//注释内容
②<!--注释内容，注意在HTML文件中的注释方法是<!--注释内容-->
③/*注释内容*/
3、变量：Java Script中允许程序员直接对变量赋值而无需事先声明，但最好是使用var关键字进行声明变量。可以一次性完成多个变量的声明并赋值：var mood="happy",age=33; 。Java Script的变量名区分大小写，不允许包含空格或标点符号（$除外），允许包括字母、数字、下划线、$（但第一个字符不可以是数字）。变量的值称之为字面量。
4、数据类型：
①字符串：字符串需要包在单、双引号之间。我们可以在双引号中包含单引号，这样单引号就会被看做普通字符。如果要在单引号中套用一个普通字符的单引号，就需要使用反斜杠（\）来对字符进行转义；
②数值：可以是一个整数、浮点数也可以是负数；
③布尔值只有两个可选值：true或false；
④数组：使用关键字Array来声明，声明的同时可以指定数组初始元素个数，也可以不指定长度，如：var a = Array(4); 我们在向数组中添加元素也称填充数组时，需要同时给出新元素的值和存放位置，位置就是下标，从0开始，要用方括号[ ]括起来，如：a[0]='a'。在声明数组的同时就可以对数组进行填充，如：var a = Array('a','b','c','d')；甚至可以不用写Array关键字，只需在定义时，使用方括号把所有元素的初始值括起来就行，如：var a=['a','b','c','d']。数组元素还还可以是变量、另一个数组的元素、其他数组。在填充数组时，我们可以为每个新元素给定明确的下标，下标不局限于整数数字，可以使用字符串，如：a["name"]='xiaowanzi'; 这样的数组称为关联数组；
⑤对象：对象的定义使用关键字object来定义。如：var a = object(); a.name='xiaowanzi'; 我们也可以在定义对象的同时对对象进行赋值，如：var a={name: "xiaowanzi"}
5、操作：
算术操作符：+、-、*、/、++、--、+=、-=
6、条件语句：
if(条件){
操作；
}//如果花括号中只有一条语句，可以不用写花括号
else{
操作；
}
操作比较符：>、<、>=、<=、!=、==(表示不严格相等)、===(表示严格相等)、！==(表示严格不相等)
逻辑操作符：&&、||、！
7、循环
①while循环：
while(条件){
操作：
}//只要条件成立，操作就会一直执行下去；
②do..while循环
do{
操作；
}while(条件);
③for循环：
for(初始条件；循环条件；变量改变条件){
操作；
}
如：for(a=0; a < 10; a++){
alert(a);
}
8、函数：
如果需要多次使用同一段代码，就把它封装成一个函数，先进行函数定义再调用它。创建一个函数，并且让他有一个返回值，需要使用return关键字。函数命名中不可以使用空格。一般在命名变量时，使用下划线来分隔各个单词，在命名函数时，使用驼峰命名法。函数可以作为一种数据类型来使用，我们可以把一个函数的调用结果赋值给一个变量。如：
function convertToCelsius(temp){
var result = temp - 32;
result = result / 1.8;
return result;
}
var temp_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius);在使用函数时，一定要注意函数的定义域。变量分为全局变量和局部变量。全局变量，可以在脚本中的任意位置被调用；局部变量，值存在于声明它的那个函数内部。注意，在函数内部定义一个变量，如果是局部变量需要使用var关键字来定义，如果没有使用var关键字，则会被认为是全局变量。
9、对象：
对象是由一些属性和方法组合在一起构成的一个数据实体。对象中的数据可以通过两种形式来访问：属性和方法，他们都通过使用“点”语法来访问。为给定对象创建一个实例，需要使用new关键字。
在Java Script中有一系列预先定义好的对象，我们称为內建对象，数组就是一种。当我们使用new关键字去初始化一个数组时，就是在创建一个Array对象的新实例：var a = new Arrry( ); 常用的內建对象还有Math：用于处理数值。例如math对象的round方法可以把十进制数舍入为一个与之最近的整数；Date用于处理日期值，它包含getDay( )、getHours( )、getMonth( )等一系列方法。
除了內建对象，Java Script中还可以使用由浏览器预先定义好的对象，我们称为宿主对象。如：Form用于获取网页上的表单、Image用于获取图像、Element用于获取表单元素、document用于获取网页上任何一个元素的信息。
第三章：DOM
1、DOM：D表示文档，当创建一个网页并把它添加到浏览器中时，它会把你编写的文档自动转换为一个文档对象。O表示对象。与某个特定对象相关联的变量称为这个对象的属性；只能通过某个特定对象去调用的方法称为这个对象的方法。Java Script中，对象分为三类：用户自定义对象、內建对象、宿主对象（宿主对象的属性和方法统称为BOM(浏览器对象模型)）。M表示模型，是指网页的表现形式，也就是网页的结构。DOM实际上是定义了HTML所有元素的对象和属性，以及访问它们的方法。通俗来说，DOM编程就是通过JS来操作HTML。
2、DOM中包含三种节点：元素节点、文本节点、属性节点。<p title="name" id='a'>xiaowanzi</p>，在这里<p></p>就是元素节点，<p>标签中的内容xiaowanzi就是文本节点、title="name"就是属性节点。
3、DOM获取元素节点的三种方法（这些方法是document对象特有的方法，所以在调用时，需要使用document对象来完成调用：如：document.getElementById("a")），文档中的每一个元素类型都是一个对象：
①getElementById( )通过元素ID来获取元素节点。
②getElementByTagName( )通过标签名字来获取元素节点，返回的是一个对象数组，数组中的每一个元素都是一个对象。在这个方法中，可以使用通配符“*”作为参数，当我们想要知道文档中总共有多少个元素节点，就可以这样使用：document.getElementByTagName("*").length;
③getElementByClass( )通过类名来访问元素节点。这种方法只支持HTML5。对于老的浏览器就需要使用已有的DOM方法来实现自己的getElementByClassName。
function getElementByClassName(node,classname){
if(node.getElementByClass){
return node.getElementByClassName(classname)
}else{
var results = new Array( );
var elems = node.getElementByTagName(*);
for(var i = 0; i < elems.length; i++0){
if(elems[i].className.indexOf(classname) != -1){
results[result.length] = elems[i];
}
}
return results;
}
}getElementById返回的是一个对象，对应着文档里一个特定的元素节点；getElementByTagName和getElementByClass将返回一个对象数组，对应着文档里的一组特定的元素节点。这三种方法都属于document方法，需要通过document. 来调用。
4、得到元素后，我们就可以使用getAttribute方法获取他们的属性值，相同的，可以通过setAttribute方法来改变他们的属性值。注意，这两种方法都不属于document的方法，不能通过document对象来调用。它只能通过元素节点对象调用。例如，可以和getElementByTagName方法合用，获取每个<p>元素的title属性：
var paras=document.getElementByTagName("p");
for(var i = 0; i < paras.length; i++){
alert(paras[i].getAttribute(title));
}注意：使用if条件语句时，if(somthing != null)的作用和if(something)的作用是完全一致的。
5、与getAttribute方法一样，setAttribute方法也只能作用于元素节点。值得注意的一点是：通过setAttribute方法对文档做出修改后，在通过浏览器检查源码时，看到的仍然是改变之前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源码里。这种现象源于DOM的工作模式：先加载文档静态内容，再动态刷新，动态刷新不影响文档的静态内容。
第四章：案例研究JavaScript图片库
这章我们要做的就是：把整个图片库的浏览器链接集中安排在图片库主页里，只有用户点击了主页里的某个图片链接时才把相应的图片传送给他，并显示相应的图片描述文本。使用JavaScript来创建图片库将是最佳选择。
1、做法：在图片库主页中，通过增加一个“占位符”图片在这个主页上为图片预留一个浏览区域，点击某个链接时，拦截这个网页的默认行为并同时把“占位符”图片替换为那个链接相对应的图片。为把“占位符”图片替换为想要查看的图片，需要随时改变它的src属性，setAttribute就是一个很好的办法。
占位符：
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery">定义一个函数，来展示图片：
function showPic(whichpic)改变whichpic节点的src属性方法：
document.getElementById("placeholder").setAttribute("src",whichpic.getAttribute("href"));完整代码：
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src',source);
}2、再接下来要做的就是：把这个JavaScript与标记文档结合起来。
先引入事件处理函数的概念。事件处理函数的作用就是，在特定事件发生时就调用特定的JavaScript代码。例如：①在鼠标指针悬停在某个元素上时触发一个动作，使用：onmouseover事件处理函数；②当鼠标指针离开某个元素时触发一个动作，使用：onmouseout事件处理函数；③当鼠标点击某个元素时触发一个动作，使用：onclick事件处理函数。
在上面的showPic函数中，有一个whichpic参数，表示当前你所要展示的图片是哪张。当我们把onclick事件处理函数嵌入到一个链接中时，就是要把这个链接本身作showPic函数的参数，使用this关键字就可以做到这一点，这个关键字在这儿的含义就是“这个对象”。添加事件处理函数的语法如下：event = "JavaScript statement(s)"。例：onclick = "showPic(this)"。如果仅仅这样写，我们会遇到一个问题：点击这个链接时，不仅showPic函数会被调用，链接被点击的默认行为也会被调用，也就是说用户会被带到图片窗口查看图片，而不是在当前页面中查看。所以，我们要阻止这个默认行为，方法：在onclick事件处理函数的Java Script代码中再加一条：return false语句，就可以防止用户被带到目标链接窗口。在这，我们可以把任意数量的Java Script语句放在这对引号之间，值需要用分号（;）把各条语句分隔开来就好。继续对这个函数进行扩展，不仅要在点击链接时改变图片，同时加一段对图片的描述文本：
<p id="description">choose an image.</p>3、childNodes属性：在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，返回的是一个数组。
例如，获取某个文档中body元素的全体子元素（使用getElementByTagName方法获取的是一个数组，由于文本中只有一个body元素，所以我们取这个数组的第一个元素即可）：
document.getElementByTagName("body")[0].childNodes
注意：由childNode属性返回的数组包含所有类型的节点，通过这个方法会返回很多个节点。因为，这个方法返回的不仅仅是元素节点，还有文本节点、属性节点等等。
4、nodeType属性：每一个节点都有一个nodeType属性，这个方法是让一个属性知道，它自己属于哪一种节点类型。调用方法：node.nodeType。这个方法返回的是数字：常用的nodeType可取值：
■元素节点的nodeType属性值：1；■属性节点的nodeType属性值：2；■文本节点的nodeType属性值：3。
5、nodeValue属性：想要改变一个文本节点的值，就要使用nodeValue属性。
首先获取p元素：
var description = document.getElementById("description");取它的文本值：
description.nodeValue注意，这样返回的值是null。因为在使用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。<p>元素本身的nodeValue属性是一个空值，包含在<p>元素里的文本是另一种节点，它是<p>元素的第一个子节点，所以正确的取<p>元素的文本属性的方法：
description.childNode[0].nodeValue每个数组元素的第一个元素和最后一个元素都有一个更直观的同义词：firstChild和lastChild
第五章：最佳实践
1、平稳退化：虽然某些功能无法实现，但最基础的操作仍然能顺利完成。
2、JavaScript中使用window对象的open( )方法来创建新的浏览器窗口。这个方法有三个参数：window(url,name,features)。这三个参数都是可选的。url表示你想在新窗口里打开的网页的url地址，如果省略这个参数，屏幕上将弹出一个空白的浏览器窗口。第二个参数是新窗口的名字，可以在代码里通过这个名字与新窗口进行通信。第三个参数是新窗口的各种属性，包括新窗口的尺寸（宽度和高度）以及新窗口的初始位置、工具条、菜单栏启用或禁用等等。
定义一个创建新窗口的函数popUp：
function popUp(winURL){
window.open(winURL,"popup","width=320,height=480");
}调用这个函数的方法：
①使用"javascript:"伪协议来调用
<a href="javascript:popUp("http://www.example.com/");">Example</a>
②使用内嵌的事件调用这个函数
在链接中使用onclick事件处理函数来打开新的窗口
<a href="#" onclick="popUp("http://www.example.com/");return false;">Example</a>
这里的href属性指向的是一个空连接。当onclick成功执行时，这个链接不会被打开。
③使用上面这两种方法，当Java Script被禁用时，都不能实现平稳退化。所以，在这里，为了实现平稳退化，我们可以把href的属性值设置为一个真实的URL，那么当Java Script不能使用时，还可以打开这个链接。修改如下：
<a href="http://www.example.com/" onclick="popUp("http://www.example.com/");return false;">Example</a>
URL地址在这条语句中出现了两次，我们可以使用this来表示当前的任何一种元素。所以，可以把popUp函数中的URL地址改为：this.getAttribute("href")。事实上，当前链接的href属性在DOM中海油一种更简明的引用方法：this.href。所以上面的代码可以写为：
<a href="http://www.example.com/" onclick="popUp("this.href");return false;">Example</a>
3、分离Java Script：上面的这几种方法都是将JS代码嵌入到了html代码里，最好的方式应该是将Java Script代码与HTML代码分离开来。分离方法类似于CSS的分离方法，另外在HTML文件外部编写一个js为后缀的代码，通过class和id来确定元素（通过使用getElementById/getElementByTagName和getAttribute很容易确定元素）。
①把一个事件添加到某个带有特定id属性的元素上（单个元素），使用getElememtById方法来确认元素：
getElememtById(Id).event = action
②如果事情涉及多个元素，getElementByTagName和getAttribute方法把事件添加到有特定属性的一组元素上，再遍历这个数组。如找到一个文档中所有a标签的class属性为popup的元素，在点击链接时，把当前元素的链接传给popUp(URL)函数：
var link = document.getElementByTagName("a");
for(var i = 0; i < link.length; i++){
if(link[i].getAttribute("class") == “popup”){
link[i].onclick = function( ){
popUp(this.getAttribute('href'))
return false;
}
}
}注意，上述代码需要在HTML文档全部加载到浏览器后才立马执行。HTML文档全部加载完毕时会触发一个事件，这个事件有自己的处理函数。文档被加载到浏览器窗口时，document对象又是window对象的一个属性。实现HTML文档全部加载到浏览器后才立马执行的做法：将js代码全部打包到window对象的onload事件上去。
window.onload=function(){
for(var i = 0; i < link.length; i++){
if(link[i].getAttribute("class") == “popup”){
link[i].onclick = function( ){
popUp(this.getAttribute('href'))
return false;
}
}
}
}4、对象检测，为了浏览器能正确执行js代码，在这里添加检测浏览器对JavaScript的支持程度。实现方法：将某个方法打包在if语句中，当方法不存在时，就返回false：
if(!method) return false;
5、加快浏览器加载代码的速度：
①将所有<script>标签放到文档的末尾，</body>标签之前
②使用代码压缩工具，压缩脚本文件。推荐几个代表性的代码压缩工具：
■Douglas Crockford的JSMin（http://crockford.com/javascript/jsmin.html）
■雅虎的YUI Compressor（http://yui.github.io/yuicompressor/）
■谷歌的Closure Comiler（https://www.npmjs.com/package/closurecompiler）
第六章：案例研究：图片库改进版
1、在Java Script中，有特殊含义和用途的单词，还有现有的函数或方法名都不能用来命名变量。
2、共享onload事件：页面加载完毕时会触发一个onload事件，为了让函数在页面加载完毕之后立刻执行骂我们需要报这个函数绑定到这个事件上。如：window.onload = firstFunction; 假设有两个函数：firstFunction和secondFunction，他们都需要在页面加载时执行，一种方法是逐一将这些函数绑定到onload事件上。另一种方法是先创建一个匿名函数来容纳这些要绑定的函数。如：window.onload = function( ){
firstFunction( );
secondFunction( );
}
还有一个最弹性的解决方法，无论你要打算在页面加载完毕后执行多少个函数它都能应付自如。方法思想：
■把现有的window.onnload事件处理函数的值存入变量onload
■如果这个处理函数还没有绑定任何函数，就把函数添加给它
■如果这个处理函数已经绑定了一些函数，就把新函数追加到现有指令的末尾
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){ //检查window.onload有没有绑定函数
window.onload = func;
}else{
window.onload = function( ){
oldonload( );
func( );
}
}
}现在，再想添加函数时，直接写：
addLoadEvent(firstFunction); 即可。
3、改进过多的假设条件：
①前面我们对浏览器是否支持一些方法先使用if语句进行了判断，当不支持时，返回false；如果支持，再执行语句。如：
if(!document.getElementById("description")) return false;
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description,firstchild.nodeValue = text;改进方法：直接判断方法是不是可以执行，可行执行代码，改进后：
if(!document.getElementById("description")) {
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description,firstchild.nodeValue = text;
}②在使用onclick处理函数时，我们的做法是：执行一个函数，并且取消这onclick处理事件的默认行为。onclick处理函数的作用机制：函数如果执行后会返回一个true，onclick接受到true时会默认打开一个新窗口，所以我们会强行让这个处理函数返回一个false。在这里，我们默认函数一定是可以执行的，但如果函数不可以执行，我们点击这个链接时就不会有任何反应，没有实现平稳退化。所以onclick处理函数是要返回true还是返回false，应该是由这个函数决定的。所以我们应该将：
links[i].onclick = function{
showPic(this);
return false;
}改为：
links[i].onclick = function{
return !showPic(this);
}4、三元操作符
操作语句：variable = condition ? if true : if false; 如;
var text = whichpic.getAttribute("title")?whichpic.getAttribute("title") : " ";5、对每个元素来说，它都有nodeName属性和nodeType属性，注意，nodeName属性总是返回一个大写字母的值，即使元素在HTML文档里是小写字母。
6、通过键盘访问
在之前，我们了解了通过鼠标访问的onclick属性，通过键盘访问则是：按下键盘上的Tab键可以从这个链接移动到另一个链接（其实，在很多浏览器中，用Tab键移动到某个链接然后按下回车键的动作也会触发onclick事件），按下回车键将启用当前链接。有一个onkeypress的事件处理函数用来专门处理键盘事件。为了确保onkeypress和onclick事件的处理行为一致，可以使用类似的如下代码：
link[i].onkeypress = link[i].onclick第七章：动态创建标记
1、document.write
document对象的write( )方法可以方便便捷地把字符串插入到一个文档中。如：
<script>
document.write("<p>This is inserted.</p>")
</script>这种方法最大的缺点是违背了“行为和表现分离”的原则，即使把一个函数定义在另一个文件里，我们在调用这个函数时，一样是要使用<script>function</script>这对标签来调用这个函数。
2、innerHTML属性
几乎所有的浏览器都支持innerHTML属性，从innerHTML来看标记，标记里的所有内容（包括标签、文本）都会被认为是一个值。当你需要把一大段HTML内容插入网页时，使用innerHTML 属性的方法更为合适。这个属性即支持读取，又支持写入。一旦你使用了innerHTML属性，它的全部内容将被替换。
步骤：①获取元素（document.getElementById）；②使用innerHTML属性插入内容。如：
window.onload = function(){
var testdiv = document.getElementById("testdiv");
testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>";
}3、DOM方法
当我们使用setAttribute方法时，并不会改变文档的物理内容，如果用文本编辑器而不是用浏览器去打开这个文档时，我们将看不到任何变化，只有在用浏览器打开那份文档时才能看到文档呈现效果的变化。
①creatElement方法：document.creatElement(nodename)。作用：创建一个元素节点。
②creatTextNode方法：document.creatTextNode("text")。作用：创建文本。
③appendChild方法：parent.appendChild(child)。作用：将child节点成为某个parent节点的子节点。文本节点可以看作是元素节点的一个子节点，所以可以使用appendChild方法将文本插入到一个元素节点后。
在<body>标签的最后添加一个名为description的节点：
使用getElementByTagName方法返回的是一个数组，在一个HTML文件中只包含唯一一个<body>标签，所以我们要引用<body>标签，就将它作为这个数组的第一个元素使用。
document.getElementByTagName("body")[0].appendChild(description);
对<body>元素的引用，我们也可以采用HTML-DOM提供的body属性：
document.body.appendChild(description);
4、在已有元素的前面添加一个新的元素：insertBefore( )方法
调用语法：parentElement.insertBefore(newElement,targetElement)
对插入的目标元素的父元素调用insertBefore方法，在目标元素targetElement前插入新元素newElement。在调用这个函数的时候，我们不必了解目标元素的符元素是谁，只要取目标元素parentNode属性值就行。所以上述方法可以写成：
targetElement.parentNode.insertBefore(newElement,targetElement)
5、在已有元素的后面添加一个新的元素
DOM中并没有像insertBefore一样，提供直接在元素后面插入新元素的方法insertAfter，但我们可以编写一个这样的函数。思路：首先对目标函数的父元素调用lastChild属性，判断这个目标函数是不是其父元素的最后一个子元素，如果是，则直接对其父元素调用appendChild方法，如果不是，则对目标元素的下一个兄弟元素nextSibling调用insertBefore函数。具体代码如下：
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}6、Ajax
Ajax是一种异步加载页面内容的技术，使用Ajax技术，可以对页面的请求以异步的方式发送到服务器上。在更新页面时可以只加载页面中的某一小部分，而不用全部加载。
第八章：充实文档的内容
1、元素的display属性：①inline使每个元素横向排列；②block使每个元素独占一行；③none使元素不显示在浏览器中。
2、<abbr></abbr>标签表示为缩略语，可以对该标签使用title属性，当用户鼠标放置在缩略语上时可以显示出title属性中的内容。一般在<abbr>标签中的内容显示为带有下划线或下划点的文本。想要去除格式，可以在css样式设置表中使用 text-decoration: none; 注意在有些浏览器中可能不支持<abbr>标签，这时可以在元素中使用HTML命名空间（<html:abbr>abbr<html:abbr>）
第九章：CSS-DOM
1、style属性
文档的每一个元素都有style属性，style属性中包含着元素的样式，使用element.style.property查询style属性将返回一个对象，而不是简单的字符串。注意，我们不能简单的想如下这样去访问一个元素的属性：element.style.font-family。这样访问会出错。因为在CSS中font-family会变为DOM属性fontFamily。在DOM中一律使用驼峰法进行命名。所以在取属性值的时候要注意转变带有“-”的属性名称。而使用style返回样式只使用于内嵌样式，不能用于检索在外部CSS文件里声明的样式。另外，我们不仅可以通过某个元素的style属性去获取样式，还可以通过它去更新样式，使用赋值操作来更新样式，赋值时必须把属性值放在引号里。
2、在CSS中根据元素在节点树里的位置来设置样式
①对标签元素统一声明样式，如：p{ }
②对特有的class属性统一声明样式，如：.fineprint{ }
③对id属性的元素统一设置样式，如：#intro( )
④为有类似属性的多个元素声明样式，如：input[text *= "text"]{ }
⑤根据元素的位置声明样式：在CSS中引入了很多与位置相关的选择器，如：:first-child；:last-child；:nth-child(odd/even)；:nth-of-type()
3、对一个表格添加斑马线效果，隔行设置样式。编写函数的思路：①找出所有table元素；②对每个table元素添加odd变量，并把它初始化为false；③遍历这个表格里的所有数据行；④如果变量odd的值是true，设置样式并把odd变量修改为false；⑤如果变量odd的值是false，则不设置样式，但把odd变量修改为true。具体代码如下：
function stripeTable(){
if(!document.getElementByTagName) return false;
var tables = document.getElementByTagName("table");
var odd,rows;
for(var i = 0; i < table.length; i++){
odd = false;
rows = table.document.getElementByTagName("tr");
for(var j = 0; j < row.length; j++){
if(odd == true){
row[j].style.backgroundColor = "#ffc";
odd = false;
}else{
odd = true;
}
}
}
}4、当鼠标停留在某一个元素上时改变样式，可以对元素调用onmouseover方法；离开时改变样式，可以对元素调用onmouseout方法。
5、className属性
①可以使用DOM里的setAttribute方法设置一个元素的属性，如给它定义一个类：elem.setAttribute("class","intro");
②使用className属性得到一个元素的class属性，并对它进行赋值：elem.className = "intro";
③当我们想给一个元素的class属性中添加一个值，而不是完全重新覆盖它时，可以使用字符串拼接操作，把新的class设置值追加到className属性上去，注意，新添加的属性值第一个字符是一个空格：elem.className += "intro";
第十章：用JavaScript实现动画效果
1、一个元素的position属性的合法值有：static（静态）、relative（相对）、fixed（固定）和absolute（绝对）四种。①static是position的默认值，意思是有关元素按照它们在标记里出现的先后顺序出现在浏览器里；②relative与static相似，区别是它还可以从文档的正常顺序里脱离出来；③absolute：它可以使元素摆放到它的“容器”里的任意位置。这个容器要么是文档本身，要么是一个有着fixed或absolute属性值的父元素。这个元素的位置与它出现在文档中的顺序无关，它的显示位置由top、left、right和bottom等属性决定。想要改变一个元素的位置时，只需要通过elem.style.left...改变就行。
2、JavaScript中关于时间的函数：
①variable = setTimeout("function",interval)
第一个参数表示你所要执行的函数，第二个参数表示时间间隔为多久执行一次该函数。
②clearTimeout(variable)
用来取消“等待执行”队列中的函数
3、当我们想要以定额间隔某个元素的位置来移动元素时，首先就是要将这个元素的位置信息取出来：elem.style.left。使用这个方法取出来的值是带长度单位的一个字符串，然后使用parseInt方法可以取出以数字开头字符串中的数值：parseInt(elem.style.left)
4、CSS的overflow属性：
overflow属性用来处理一个元素的尺寸超过其容器尺寸的情况，有四个值：visible、hidden、scroll、auto
①visible：不裁剪溢出内容，浏览器对全部元素都可见，它会把溢出的内容呈现在其容器元素的显示区域外；
②hidden：隐藏溢出内容，浏览器只显示未溢出部分的内容；
③scroll：类似于hidden，只是会显示一个滚动条，让用户能够拖动滚动条查看溢出部分；
④auto：类似于scroll，只是只有真正发生溢出时，才会显示滚动条。
注意：在设置overflow属性时，将该元素的位置position属性设置为relative值非常重要，因为我们想让子元素使用绝对位置。