經過這幾日的學習，測試和摸索，算是了解了一些關於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（二）》。