dom4

1. window經常使用子對象：
history: window對象中保存當前窗體訪問過的url的歷史記錄棧
history.go(1): 前進1次
go(-1): 後退1次
go(0): 刷新當前頁
go(n): 前進/後退n次

location：當前窗口正在打開的url地址對象
location.search：得到url中的查詢字符串
若是進一步得到參數名和參數值？
先按&分隔，再按=分隔
location.replace("新url"): 在當前窗口打開新連接
不可後退
（history中舊url被新url替換了）

使用location在當前窗口打開新連接，可後退：2種：
location.href="新url";
location.assign("新url");

刷新：location.reload();

screen: 封裝當前屏幕的顯示信息
screen.height/width: 完成屏幕寬高
availHeight/Width: 去掉任務欄後的剩餘寬高
window7下任務欄透明

2. ***事件：
瀏覽器自動觸發的或用戶手動觸發的對象狀態的改變
DOM Level2 Event標準
IE8：自成體系！
事件處理函數：當事件觸發時，自動執行的函數
好比：<button onclick="函數/js語句"></button>
//btn.onclick();

事件處理：
1. 事件定義（綁定事件處理函數）：3種
html： <標籤 on事件名="fun()">
d1.onclick=function(){
eval("fun()");
//[window.]fun();
}
強調：fun()中this-->window
若是得到當前目標元素對象：
html: onxxx="fun(this)"
js中定義函數時：fun(elem)

js: elem.on事件名=函數對象;
一個元素的一個事件處理函數，只能綁定一個函數對象
DOM標準：elem.addEventListener(
"事件名",函數對象,是否在捕獲階段觸發)
true/false
一個元素的一個事件處理函數，可add多個不一樣函數對象IE8: elem.attachEvent("on事件名",函數對象)
實際執行的：elem.on事件名(); this-->elem
2. ***事件週期：從瀏覽器捕獲到事件後，一直到最後一個事件觸發完，經歷的過程。
DOM標準：3個階段：
1. （由外向內）捕獲：從最外層html元素開始，向內逐層記錄每層元素綁定的事件處理函數。到目標元素爲止
2. 目標觸發：自動執行目標元素上綁定的事件處理函數
3. （由內向外）事件冒泡：從目標元素的父元素開始，逐層向上執行每層的事件處理函數，到最外層html結束。
IE8的事件週期：2個階段：沒有捕獲

3. event對象：
當事件發生時，自動建立，封裝了事件信息
好比：keyCode
screenX/Y
得到event對象：
html: onclick="fun(event)"
實際調用時: event會自動得到當前事件對象
fun(e){
e中得到的就是事件對象
}

js：elem.onxxxx=fun;
fun(){
//DOM標準：自動建立event對象，默認以第一個參數傳入！
//IE8：window全局的event屬性，
當事件發生時，也會自動建立event對象,
但會保存在window.event中
}
event對象中包含：
1. 目標元素對象：var src=e.srcElement||e.target
2. ***取消/利用冒泡:
取消：DOM標準：e.stopPropagation()
IE8：e.cancelBubble=true;
通常用在當前事件處理函數執行結尾
***優化：若是多個子元素中定義了相同的事件處理函數
其實，只須要在共同的父元素上定義一次便可！
3. *取消事件：
if(e.preventDefault){
e.preventDefault(); //--DOM
}else{
e.returnValue=false; //--IE8
}
什麼時候取消：好比:表單提交前，若是驗證未經過，
則取消以後的自動提交

事件座標：3種座標系
1. 相對於顯示器:
最大值: screen.availHeight/availWidth
鼠標位置: e.screenX/Y
2. 相對於文檔顯示區
最大值：window.innerHeight/Width
鼠標位置：e.clientX/x; e.clientY/y
3. 相對於父元素左上角
最大值：父元素的寬和高
鼠標位置：e.offsetX/Y

頁面滾動

 

1.(繼續)事件對象的生命週期

  第一階段：捕獲，event對象由父元素向下傳遞

  第二階段：目標，event對象在事件源對象上觸發

  第三階段：冒泡，event對象由子元素向上傳遞

注意：(1)IE事件模型沒有捕獲階段，element.attachEvent( 'onxxx', fn )也沒有第三個參數。

  (2)element.onxxx = fn  綁定的事件處理函數都是在「冒泡階段」觸發的。

  (3)DOM事件模型中有完整的三個階段，使用第三個參數useCapture(boolean)來指定「是否綁定在捕獲階段」

element.addEventListener('xx', fn, false) —— 事件監聽函數綁定在冒泡階段

element.addEventListener('xx', fn, true) —— 事件監聽函數綁定在捕獲階段

 

 

 

思考：DOM事件模型爲何添加一個捕獲階段？？

 

2.如何獲取event對象？

  IE:   HTML/JS中，能夠直接使用event對象，把event看作是window.event屬性。

  FF:   HTML中可使用使用event對象，但JS中不能直接使用該對象。

  兼容性問題解決方法：

  綁定監聽函數的方式1：

    HTML:   <a   onclick="f1( event )">

    JS:   function f1( e ){  console.log(e);   }

  綁定監聽函數的方式2/3：

    JS：  element.onclick = function( event ){

 console.log( event );

          }

事件對象的經常使用屬性和方法：

  (1)獲取事件的源頭對象

IE:  event.srcElement

FF:  event.target

兼容性解決方案：  var src = event.srcElement || event.target;

練習：建立一個計算器應用，監聽函數對象儘量少

 

  (2)阻止事件的默認行爲

事件的默認行爲：一個事件觸發後，默認要執行的動做。如submit按鈕被單擊，默認就要提交表單；網頁中單擊上下左右鍵，默認就要讓內容發生滾動；輸入框中擊鍵後默認就會把鍵盤字符顯示在輸入框中.......

有些應用中，須要阻止事件的默認行爲！

IE: event.returnValue = false;

DOM:  event.preventDefault( );

保證兼容性的寫法：

if( event.preventDefault ){

event.preventDefault(  ); //DOM

}else{

event.returnValue = false;     //IE

}

  (3)中止事件的繼續傳播

IE:  event.cancelBubble = true; //取消冒泡

DOM:  event.stopPropagation( ); //中止傳遞/傳播

考慮兼容性的寫法：

if( event.stopPropagation ){

event.stopPropagation();

}else{

event.cancelBubble = true;

}

  (4)獲取事件的發生座標

 

 

BOM： 七個對象，操做瀏覽器自己

DOM： N個對象，操做文檔內容，分爲三部分：

(1)核心DOM：用於操做任意的ML文檔

(2)HTML DOM：用於操做HTML文檔

(3)XML DOM：用於操做XML文檔

 

4.HTML DOM

  面試題：核心DOM和HTML DOM的關係

 核心DOM只定義幾種不一樣Node對象：屬性Node、文本Node、元素Node，但沒有定義元素Node又能夠細分爲哪些；

 HTML DOM定義了100種左右的元素Node——每一個HTML標籤都對應一個對象，且這些對象預約義了若干的屬性，如：

var img = new Image( );

img.src = '1.jpg';

img.title = '';

img.width = '';

img.alt = '';

img.onclick = function(){   }

<img src="" width="" height="" title="" alt="" onclick="">

練習：使用HTML DOM屬性訪問方式來獲取和修改下述超連接的全部屬性值

<a class="title" href="javascript:void(0)" target="_blank" onclick="open()">標題1</a>

 

5.經常使用的HTML DOM對象

 (1)Image對象    <=>     <img>

 (2)Table對象     <=>     <table border="" width="">

特別的屬性：  rows    類數組型屬性

特別的方法：  

insertRow( )   爲表格對象添加一個tr子對象

              deleteRow( )  從表格對象中刪除一個tr子對象

 (3)TableRow對象 <=> <tr>

特別的屬性：  

rowIndex : number，返回當前tr在table中序號

cells：類數組對象，返回當前tr中全部的td集合

特別的方法：

insertCell( ) 在tr中的插入一個新的td

deleteCell( ) 在tr中刪除一個td元素

  (4)TableCell對象     <=>     <td>

  (5)Form對象   <=> <form action="" method="" enctype="">

特殊的方法：

submit( ) 提交表單中的內容

reset( ) 重置表單中的內容

<form id="form1" action="user.php">     <input ...>     <input type="button"    onclick="if(...){ form1.submit( );}" >     <input type="button"    onclick="form1.reset( );" > </form>

  (6)表單中的輸入域對象：  Text  Password   Checkbox....

經常使用的屬性：

name

value

經常使用的方法：

focus( ) 申請獲取輸入焦點

select( ) 選中輸入框中的全部文本

  (7)Select對象 <=> <select multiple="true" size="3">

特別的屬性：

multiple： boolean，是否容許多選，注意！與HTML中的類型不一樣！！！！

size：  number，顯示出來的選項的數量

value：string，當前選中的option的值

selectedIndex：number，當前選中的option的下標

options：類數組對象，包含全部的option

特別的方法：

add(option) 添加一個新option

remove(index) 刪除一個option

  (8)Option對象 <=> <option value="">

建立新的Option：   new Option(txt,  value)

new Option('北京', '110');  <=> <option value="110">北京</option>

特別的屬性：

index：

text： 開始標籤和結束標籤之間的文本

value：

selected：boolean     讀取/設置當前option是否被選中

練習：有以下的數據：

var data = [

{id: 110,  pname: '北京市'},

{id: 210,  pname: '天津市'},

{id: 310,  pname: '上海市'}

];

把上述數據盛放到一個select中，並讓最後一個選項默認選中

 

 

四個階段的重點

(1)JS

(2)DOM操做

(3)jQuery

(4)AJAX

 

 

 

 

 

 

 

 

挑戰性做業：

(1)完成計算器的加減乘除功能。

(2)無限級聯下拉菜單