JavaScript [1]事件 ①用戶操作網頁或者瀏覽器所發生的交互行為稱為事件。比如:點擊按鈕,最小化視窗,修改文本框內容等。 ②JS為我們定義許多瀏覽器中的事件。比如:單擊(onclick)、雙擊(ondblclick)、移動(onmousemove) 等。 ③我們可以通過為事件設置一個響應函 ...
JavaScript
[1]事件
①用戶操作網頁或者瀏覽器所發生的交互行為稱為事件。比如:點擊按鈕,最小化視窗,修改文本框內容等。
②JS為我們定義許多瀏覽器中的事件。比如:單擊(onclick)、雙擊(ondblclick)、移動(onmousemove) 等。
③我們可以通過為事件設置一個響應函數來對事件進行響應:
1 <body> 2 <button id="btn">按鈕</button> 3 </body> 4 5 <script type="text/javascript"> 6 //獲取到按鈕的對象 7 var btn = document.getElementById("btn"); 8 //為btn綁定一個單擊響應函數 9 btn.onclick = function(){ 10 alert("hello World!"); 11 }; 12 </script> 13
[2]載入方式
①瀏覽器載入網頁代碼時是由上到下依次載入的。
②如果我們在瀏覽器還尚未載入網頁中的元素,那麼將無法確定,控制台將會報錯,解決該問題有兩種方式:
1) 將JS代碼編寫到body標簽的下邊。但是我們習慣上將JS、CSS等代碼都寫在head標簽中。這種形式不符合使用習慣。
2) 將js代碼編寫到window.onload = function(){}中。推薦的使用方式。(ps:在編寫js代碼的時候最好開始的時候就將window.onload = function(){}寫上)。
[3]DOM編程
DOM全稱:Document Object Model。
DOM主要是通過JavaScript來控制網頁中的各種元素,從而達到使網頁可以和用戶進行動態交互的作用。
DOM的操作主要分四部分增、刪、改、查。
節點類型:
- 元素節點
- 文本節點
- 屬性節點
①DOM查詢
1) 通過document對象查詢:
document.getElementById(id); ---> 通過id獲取一個元素節點對象.
document.getElementsByTagName(標簽名); ---> 通過標簽名獲取一組元素節點對象.
document.getElementsByName(name屬性); --->通過name屬性獲取一組元素節點對象,一般用來獲取表單項.
2) 通過具體的元素對象查詢:
element.getElementsByTagName(標簽名); --->查找當前元素節點內指定標簽名的子節點
element.childNodes; --->獲取當前節點的所有子節點.
element.parentNode; --->獲取當前節點的父節點.
3) 獲取元素的屬性:
獲取 : 元素.屬性名
設置 : 元素.屬性名 = 屬性值;
4)this:
this指向的是當前函數的所屬對象。
DOM的增刪改:
1) 創建元素節點:document.createElement(標簽名);
2) 創建文本節點: document.createTextNode(文本值);
3) 添加子節點: 父節點.appendChild(子節點);
4) 插入節點: 父節點.insertBefore(新節點,舊節點);
5) 替換節點: 父節點.replaceChild(新節點,舊節點);
6) 刪除節點: 父節點.removeChild(子節點); / 子節點.parentNode.removeChild(子節點) *****
7) 讀寫元素內部HTML代碼
讀取: 元素.innerHTML
設置: 元素.innerHTML = 新值