经过这几日的学习，测试和摸索，算是了解了一些关于javascript 的相关知识吧。学习过程中做出了一些小DEMO，现总结一下实现这些DEMO的基本思路，如有不妥或更为简便的方法，还希望大神拍砖，共同进步。代码可直接复制引用。
demo1.选项卡：
在网站中应用选项卡是很多网站必不可少的效果，因为方便，简单，使用。可分块展示不同的内容链接，当鼠标点击不同按钮时，下面的DIV根据不同的点击显示不同的内容。要实现这样的一个选项卡，首先在body--->div中建立几个button按钮，并在下面建立相同个数的div，初始化第一个div（即：使它的display为block）;style初始化div和相应的button;然后写js脚本，根据一般步骤：取元素--->写事件---->测试。在这个案例中，首先得为每个按钮建立索引；将所有的button和div中的样式去除，再用this这个关键字，实现新的样式更换。
<!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>choice card</title> <style> #div1 .active {background:yellow;} #div1 div {width:200px;height:200px;background:#CCC;border:1px solid #999;display:none;} </style> <script language="javascript"> window.onload=function() { var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsByTagName('input'); var aDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i].onclick=function() { for(var i=0;i<aBtn.length;i++){ aBtn[i].className=''; aDiv[i].style.display='none'; } this.className='active'; aDiv[this.index].style.display='block'; }; } }; </script> </head> <body> <div id="div1"> <input class="active" type="button" value="aaaa"> <input type="button" value="bbbb"> <input type="button" value="cccc"> <input type="button" value="dddd"> <div style="display:block;">1111</div> <div>2222</div> <div>3333</div> <div>4444</div> </div> </body> </html>
demo2.隔行变色：
通过基本的js中模运算，即：i%2==0来实现偶数行变色。本DEMO实现起来比较容易，首先在body中输入一些<ul><li></li><li></li><li></li><li></li></ul>，<li>越多越能看到明显的效果。接着，应用document.getElementsByTagName('li')，来获取标签li元素，判断之后，设置背景颜色，直接通过js实现不同的效果。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 10 <script> 11 window.onload=function(){ 12 var aLi=document.getElementsByTagName('li'); 13 for(var i=0;i<aLi.length;i++) 14 { 15 if(i%2==0) 16 { 17 aLi[i].style.background='#CCC'; 18 } 19 else 20 { 21 aLi[i].style.background=''; 22 } 23 } 24 }; 25 </script> 26 </head> 27 28 <body> 29 <ul> 30 <li></li> 31 <li></li> 32 <li></li> 33 <li></li> 34 <li></li> 35 <li></li> 36 <li></li> 37 <li></li> 38 <li></li> 39 <li></li> 40 <li></li> 41 </ul> 42 </body> 43 </html>
demo3.InnerHTML的使用：
通过点击button将文本框中的内容直接显示到DIV中。首先获取页面中的元素，然后直接用onclick事件（oDiv.innerHTML=oTxt.value;）将文本框中的文字或者HTML标签显示到div中。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> setFont </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <style> 10 #div1 {width:200px;height:150px;border:1px solid black;} 11 </style> 12 <script> 13 window.onload=function(){ 14 var oTxt=document.getElementById('txt1'); 15 var oBtn=document.getElementById('btn1'); 16 var oDiv=document.getElementById('div1'); 17 18 oBtn.onclick=function(){ 19 oDiv.innerHTML=oTxt.value; 20 }; 21 } 22 </script> 23 </head> 24 25 <body> 26 <input type="text" id="txt1"/> 27 <input id="btn1" type="button" value="SetFont"> 28 <div id="div1"> 29 </div> 30 </body> 31 </html>
demo4.延时提示框：
对于延时提示框的实现，需要知道计时器的作用和用法。本例实现的是利用当鼠标在某个div上时，另外的一个div显示，当鼠标移开的时候，div过一会儿才消失。代码实现过程，首先需要两个div，设置初始化的样式，选择将其中一个div的display设置为none。再用js实现鼠标的移入移除时，计时器控制div的变化。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> #div {float:left; margin:10px;} #div1 {width:50px;height:50px;background:red;} #div2 {width:250px;height:180px;background:#CCC;display:none;} </style> <script> window.onload=function(){ var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var timer=null; oDiv2.onmouseover=oDiv1.onmouseover=function(){ clearTimeout(timer); oDiv2.style.display='block'; }; oDiv2.onmouseout=oDiv2.onmouseout=function() { timer=setTimeout(function(){ oDiv2.style.display='none'; },200); }; }; </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
还有部分DEMO的分析和总结在《决战JS（二）》。