DOM事件

1.DOM中的事件可以分為兩類

• 1.瀏覽器行為
  如：文檔載入完成，圖片載入完成
• 2.用戶行為
  如：輸入框輸入數據，點擊按鈕

(2).常見的DOM事件

onload        瀏覽器已完成頁面的載入
支持事件的對象    window image
onchange    HTML 元素改變
onclick        用戶點擊 HTML 元素
onmousemove    用戶移動滑鼠
onmouseover    滑鼠移動到元素上
onmouseout    滑鼠移開某元素上
onmousedown    滑鼠按下
onmouseup    滑鼠鬆開
onkeydown    用戶按下鍵盤按鍵
onkeyup        按下鍵盤鬆開
onblur        失去焦點
onfocus        獲取焦點

(3).DOM事件綁定的二種方式

1.在元素的事件屬性中直接綁定

如：

<button type="button" onclick="alert('haha')">點擊看看</button>

2.通過元素對象的事件屬性賦值(匿名函數實現)
如：

<button id="btn" type="button">點擊看看</button>
 var oBtn=document.getElmentById("btn");
 oBtn.onclick=function(){
     alert('haha');
 }

JS樣式特效

1.使用js獲取或設置css樣式(只能獲取或設置行內樣式)

語法：

node.style.屬性名=屬性值
註意：當屬性名為蛇形命名時，要轉換成小駝峰命名

node.style.color="red"
node.style.fontSize="30px"

2.使用js獲取或設置css類名

語法：

node.className=類名
node.className="a1";
node.className="a1 b1";
獲取元素的位置:
event.offsetX；
event.offsetY；
event.clientX；
event.clienY；

3.實現廣告圖所需事件

事件：當網頁滾動時觸發的事件

onscroll
獲取網頁滾動上邊距的距離

document.body.scrollTop
或者

docuemnt.documentElement.scrollTop

4.日期時間對象

Date日期對象用於處理日期和時間

1、【創建】Date 對象：

var myDate=new Date();

創建空的Date對象時表示的值是當前的日期和時間

var myDate=new Date(dateString)
var myDate=new Date(year, month, day, hours, minutes, seconds, milliseconds)；
日期字元串dateString：
規則：
1、日期字元串是可選的。
2、日期在前，時間在後。
3、日期常用（空格，橫線-，逗號,）分隔，時間以（冒號:）分隔

2、Date對象的屬性和方法

獲取當前時間：

var d=new Date();
//獲取年：
var year=d.getFullYear();
//獲取月：
var month=d.getMonth();
//獲取日：
var date=d.getDate();
//獲取時分秒：
var hours=d.getHours();
var minutes=d.getMinutes();
var seconds=d.getSeconds();
//獲取星期：
var day=d.getDay();

表格對象和表單操作

1、表格對象的屬性

• 表格對象的邊框：表格對象.border
• 表格對象的寬度：表格對象.width

2、表格對象的行操作（row）

表格對象的所有行： 表格對象.rows;
表格對象的行數：  表格對象.rows.length
表格對象的第一行： 表格對象.rows[0]
表格對象的最後一行：表格對象.rows[表格對象.rows.length-1]
行對象獲取行下標: 行對象.rowIndex
刪除行：刪除指定下標行        表格對象.deleteRow(行的下標)
插入行：在指定下標行前插入行    表格對象.insertRow(行的下標)
返回值：返回行對象

3、表格對象的列操作（cell）

行對象的所有列：    行對象.cells;
行對象的第一列：    行對象.cells[0]
行對象的最後一列：    行對象.cells[行對象.cells.length-1]
列對象獲取列下標:  列對象.cellIndex
刪除列：刪除指定下標列        行對象.deleteCell(列的下標);
插入列：在指定下標列前面插入列    行對象.insertCell(列的下標);

事件：

• 點擊事件：onclick
• 失去焦點事件：onblur
• 獲取焦點事件：onfocus

2.表單操作
一、 獲取表單元素的方法

• 第一種方法,通過元素的name獲取
• 第二種方法：通過元素的index獲取
• 第三種方法：通過元素的id獲取
  例如：

<form name="fr1" id="fm" action="demo.html">
   賬號:<input type="text" id="tx1" />
   密碼:<input type="password" id="pwd1" />
   確認密碼<input type="password" id="pwd2" />
   <input type="submit" value="登錄" />
</form>
<script type="text/javascript">
   //1.通過下標獲取form元素
     var fr1 = document.forms[0];
   console.log(fr1);
   //2.通過name屬性獲取form元素
     var fr2 = document.forms["fr1"];
   console.log(fr2);
   //3.通過name屬性獲取form元素
     var fr3 = document.fr1;
   console.log(fr3);
   //4.通過id屬性獲取form元素
     var fm2 = document.forms["fm"];
   console.log(fm2);
</script>

二、表單驗證
return false : 在大多數情況下,為事件處理函數返回false,可以防止預設的事件行為.
案例一：

document.forms[0].onsubmit=function(){
    var zh=document.forms[0].tx1.value;
    if(zh==""){
    alert("賬號不能為空!!");
    return false;
    }
}

案例二:

<a href="demo.html">點擊跳轉</a>
var a1=document.getElementsByTagName("a")[0];
    a1.onclick=function(){
    return false;
}