javascript小執行個體【第一課時筆記】

js裡面的dot表示什麼什麼的。等號表示賦值給一個變數。當文檔有內容的時候也就是標記的時候需要使用window.onload來調用某個函數來執行，否則瀏覽器會一直不執行，一般情況下都會把指令碼放在</body>標籤之前，這是為了先載入結構和樣式，最後載入指令檔，這樣有利於使用者體驗和可訪問性原則。

那就開始今天的第一個小執行個體吧，其實昨天就做了，今天貼上來==！

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>提示框</title> 6 </head> 7 <style> 8     #div1{width:100px;height:100px;background:red;border:1px solid #ccc;display:none;} 9 </style>10 <body>11     <label onMouseOver="document.getElementById('div1').style.display='block';" 12     onmouseout="document.getElementById('div1').style.display='none';"><input type="checkbox"/>自動登入</label>13     <div id="div1">不要在網吧留下密碼</div>14 </body>15 </html>

這是一個類似於提示框的東西，你會懂得，不解釋了。補充一句吧，使用label標籤來包含input元素可以使---當滑鼠移動到文字上面的時候也會促使onmuoseover事件的發生。

 

第二個小執行個體：

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>huanClass</title> 6 </head> 7 <style> 8     div{width:100px;height:100px;background:red;border:1px solid #ccc;} 9     .box{width:150px;height:150px;color:blue;}10 </style>11 <body>12     <div id="div1" onMouseOver="document.getElementById('div1').className='box';"13     onmouseout="document.getElementById('div1').className='';"></div>14 </body>15 </html>

這個執行個體是通過className來更換類名實現樣式的切換。特別要注意每一個標點符號，多一個就錯了，糾結了好久的標點符號。還有style標籤裡面的div不能使用#div1，否則會出錯，不知道什麼情況，後來調試的時候發現的，坑爹啊。

 

1. 函數的調用要加上（）這個傢伙，並且類似於css裡的class，可以多次使用。
2. getElementByID();
3. alert();
4. Onclick;
5. onmouseover/onmouseout;
6. className;

END！！