JS 高級總結

一、查找HTML元素

　　通常，通過 JavaScript，您需要操作 HTML 元素。

　　1、通過 id 找到 HTML 元素

　　2、通過標簽名找到 HTML 元素

　　3、通過類名找到 HTML 元素

提示：通過類名查找 HTML 元素在 IE 5,6,7,8 中無效。

var x=document.getElementById("intro");
var y=document.getElementsByTagName("p");

①、改變 HTML 元素的內容 (innerHTML)

document.getElementById(id).innerHTML=new HTML

②、改變 HTML 屬性

document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";

③、改變 HTML 樣式

document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>

④、添加或刪除 HTML 元素

二、DOM 事件

1、Js中的事件

行為,結構,樣式分離的頁面

一般事件 onclick 鼠標點擊時觸發此事件

ondblclick 鼠標雙擊時觸發此事件
onmousedown 按下鼠標時觸發此事件
onmouseup 鼠標按下后松開鼠標時觸發此事件
onmouseover 當鼠標移動到某對象范圍的上方時觸發此事件
onmousemove 鼠標移動時觸發此事件
onmouseout 當鼠標離開某對象范圍時觸發此事件
onkeypress 當鍵盤上的某個鍵被按下並且釋放時觸發此事件.
onkeydown 當鍵盤上某個按鍵被按下時觸發此事件
onkeyup 當鍵盤上某個按鍵被按放開時觸發此事件

①、綁定事件的3種方式

1: 直接寫在html標簽內聲明

<div id="school" onclick="t();">

這種寫法最古老,兼容性最強.屬於DOM的lev0級的標准.這個效果,等同於在點擊div的時候,執行"t();"這一語句,

在全局范圍內執行,因此,t函數內部的this指代全局對象-->window 想操作被點擊的DOM對象,用this就不行了.

 第2種綁定方式:

DOM對象.onclick = function () {}

這種綁定是把一個DOM對象onclick屬性賦值為一個函數,

因此,函數內部的this直接指向該DOM對象.

在這種綁定方式中,只能給一個事件,綁定一個處理函數

即 .onclick = fn1;  .onclick = fn2;

最終的效果, 是.onclick = fn2;

如果用函數來調用其他函數的形式

例.onclick = function () {fn1(),fn2()}

那么此時，　fn1,fn2中的this又指向window．

如何綁定多個函數，　並令this指向DOM對象

第三種綁定事件的方法:

DOM lev3的事件綁定標准

添加和去除監聽事件.

addEventListener('事件',函數);  // 第一個參數事件參數, 沒有前綴"on", w3c的標准,IE不支持

注意點1: 如果添加了多個事件處理函數, 按"添加時的先后順序來執行"

注意占2: 事件處理函數中的this 指代 DOM節點自身 (w3c標准)

注意點3: 第一個事件參數,一律把事件名稱的'on'去掉 (w3c標准)

 

去除綁定

removeEventListener('事件',函數)

IE下綁定事件與解除事件的方法

attachEvent('事件',函數)   // 注意: 事件 要加on

detachEvent('事件',函數) // 事件依然要加on

總結一下:

W3c addEventListener 與IE的attachEvent()的不同

1: 函數名不同

2: 事件名不同, IE下要加on,w3c不加on

3: 加事件后的執行順序不同, w3c按綁定事件的順序來執行, 而IE6,7,8,是后綁定的事件先發生.

4: this的指向, w3c中,綁定函數中的this指向 DOM對象, 而IE6,7,8中,指向window對象

三、事件的捕捉與冒泡模型

在w3c的模型中,

addEventListener 支持 第3個參數來聲明事件的模型為冒泡還是捕捉.

如果聲明為 true,則為捕捉方式

如果聲明為false, 或者不聲明, 則為冒泡方式

注意: IE的attchEvent 沒有第3個參數,不支持捕捉模型

事件對象的概念:

當事件對應的函數被觸發時, 函數會接收到一個事件參數, // w3c標准

例 xx.onclick = function (ev) {alert(ev)}

點擊后,ev 參數就代表單擊那一瞬間的"各個參數",以一個對象的方式傳過去.

對於IE, 當事件發生的瞬間,事件對象賦值給window.event屬性

 四、事件的中斷

如何中斷事件的傳播???????

在w3c:  事件.stopPropagation();

在IE中,  事件對象.cancelBubble = true;

cancelBubble = true //IE取消冒泡

stopPropagation(); // w3c取消冒泡

 returnValue = false; // IE取消事件效果

preventDefautl() ;// w3c取消事件效果

取消事件的默認效果

事件對象.preventDefault();  // 阻止事件的默認效果, w3c方法

事件對象.returnValue = false; // 設置returnValue 的屬性值為false;

五、Js 作用域鏈（是指AO鏈）

1:參數

2:局部變量聲明

3:函數聲明

* 函數聲明與函數表達式的區別

表達式必有返回值,把返回值(即匿名函數)賦給了一個變量.

此時 就是普通的賦值過程.

①、js並不是一句一句順序執行的,先進行詞法分析

This, 與 arguments

當一個函數運行的時候,函數內部能引用的變量有這么幾種

AO、arguments、this

對於 arguments和this, 每個函數都有自己獨有的arguments和this, 且不進行鏈式查找

arguments是什么?

答:1:arguments是收到的實參副本

2:收到實參收集起來,放到一個arguments對象里

在詞法分析中, 首先按形參形成AO的屬性,值為undefined

當實參傳來時, 再修改AO的相應屬性.

t(a,b,c){}, 

調用時: t(1,2,3,4,5) 個參數

此時 , AO屬性只有a,bc,3個屬性, arguments里有1,3,3,4,5, 所有的值

對於超出形參個數之外的實參, 可以通過arguments來獲得

3:arguments 的索引 從 0, 1,2,....遞增,與實參逐個對應

4:arguments.length 屬性代表實參的個數

5:Arguments一定不是數組, 是長的比較像數組的一個對象,雖然也有length屬性

6:Arguments每個函數都會有,因此,arguemnts只會在內部找自身的arguments,

無法引用到外層的arguments

This是誰

This是指調用上下文

針對函數的應用場景來討論

函數的4種調用方式

1:函數方式

直接調用函數名,或函數表達式的返回值,

This指代全局對象,window

2:屬性方式(對象方法方式)

This指代該對象(方法的屬主)

3:構造器方式

通過 new 函數     名() , 來創建對象

在js里, 構造函數與對象的關系比較松散,

對象就是"屬性->值"的集合

構造器的作用,是制造一個對象,把this指向該對象,

4:call,apply方式

函數本身即是對象,對象就有方法

函數名.call(對象,參數1,參數2,參數3);

以fn.call(obj,'a','b');

實際效果相當於

1:fn內部的this指向了obj

2:fn('a','b');

Apply的效果與call一樣, 只不過傳參時,把所有參數包裝在數組里,傳過去.

例 fn.call(obj,'a',' b')  ===> fn.apply(obj,['a','b']);

還有一種改變this的方法

With 語句

With(對象) {

語句1

語句2

.....

}

在with內部的語句,就把參數中的對象當成的上下文環境.

六、詞法分析

js執行順序

1:詞法分析階段

先把接收到的參數放到激活對象上

 

再對函數體中代碼作分析

a: var xx = yy;

做法:聲明一個xx屬性在激活對象上,

但不賦值,如果已經有xx,則不無動作.

b:function ttt() {

}

做法:直接聲明ttt屬性,

且內容是函數體

 

2:執行語句階段

 

六、Js面向對象

 屬性,方法-->對象

"類"能做到封裝,繼承,多態,

"類"的靜態方法

1: js中的對象是什么?

答:js的對象就是鍵值對的無序集合

2:種創建對象的方法

①、通過字面量來創建對象

例:{age:22,hei:180}

{}->空對象,沒有屬性

②、通過 new Object([value]);

通過構造函數來創建對象(和第2種沒區別,因為Object就是系統內建的構造函數)

七、Js面向對象中的封裝

javascript語言中,沒有現成的私有屬性/方法機制,

但可以通過作用域來模擬私有屬性,私有方法

 

對象的屬性外界是可讀可寫的, 如何來達到封裝的目的?

答:通過閉包+局部變量來完成

在構造函數內部聲明局部變量, 和普通方法,

因為作用域的關系,只有構造函數內的方法,才能訪問到局部變量.

而方法對於外界是開放的,因此可以通過方法來訪問局部變量.

在查找屬性或方法的過程中, 沿着原型鏈來查找屬性,

對象->原型->原型的原型....->空對象-->NULL

原型形成一條鏈

這個查找屬性的方式,稱為js的原型鏈

①、原型冒充的方式來完成繼承

復制繼承, 又稱對象繼承,其實就是復制父對象的屬性到子對象身上

八、Js面向對象中的靜態屬性或者靜態方法

從豆漿機-->制造豆漿的流程看, 豆漿機充當的是構造函數的角色.

如果單獨看豆漿機本身, 豆漿機也是一部機器,也是一個對象,也可以有屬性和方法.

那么,豆漿機作為對象時的屬性和方法,就相當於類的靜態屬性,靜態方法.

十、閉包

一句話說閉包:

函數的作用域,不取決於運行時的環境,

而取決於函數聲明時的環境.

 

典型應用:

閉包與局部作用域模擬私有屬性

閉包與匿名函數完成"不受干擾的變量"

 

①、閉包(4) 閉包+匿名函數