js高級總結

一般，經過 JavaScript，您須要操做 HTML 元素。

　　一、經過 id 找到 HTML 元素

　　二、經過標籤名找到 HTML 元素

　　三、經過類名找到 HTML 元素

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

var x=document.getElementById("intro");

var q=document.querySelector("#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 元素

2、DOM 事件

一、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對象

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

在w3c的模型中,

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

若是聲明爲 true,則爲捕捉方式

若是聲明爲false, 或者不聲明, 則爲冒泡方式

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

事件對象的概念:

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

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

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

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

 4、事件的中斷

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

在w3c:  事件.stopPropagation();

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

cancelBubble = true //IE取消冒泡

stopPropagation(); // w3c取消冒泡

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

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

取消事件的默認效果

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

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

5、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內部的語句,就把參數中的對象當成的上下文環境.

6、詞法分析

js執行順序

1:詞法分析階段

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

 

再對函數體中代碼做分析

a: var xx = yy;

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

但不賦值,若是已經有xx,則不無動做.

b:function ttt() {

}

作法:直接聲明ttt屬性,

且內容是函數體

 

2:執行語句階段

 

6、Js面向對象

 屬性,方法-->對象

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

"類"的靜態方法

1: js中的對象是什麼?

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

2:種建立對象的方法

①、經過字面量來建立對象

例:{age:22,hei:180}

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

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

經過構造函數來建立對象(和第2種沒區別,由於Object就是系統內建的構造函數)

7、Js面向對象中的封裝

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

但能夠經過做用域來模擬私有屬性,私有方法

 

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

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

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

由於做用域的關係,只有構造函數內的方法,才能訪問到局部變量.

而方法對於外界是開放的,所以能夠經過方法來訪問局部變量.

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

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

原型造成一條鏈

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

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

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

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

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

若是單獨看豆漿機自己, 豆漿機也是一部機器,也是一個對象,也能夠有屬性和方法.

那麼,豆漿機做爲對象時的屬性和方法,就至關於類的靜態屬性,靜態方法.

10、閉包

一句話說閉包:

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

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

 

典型應用:

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

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

 

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