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) 閉包+匿名函式來源：http://www.cnblogs.com/suihui/p/3186499.html