javascript
JS 常用语法
通常，通過 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 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");//創建新的<p> 元素
var node=document.createTextNode("這是一個新段落。");//創建文本節點,如果不再需要追加其他文本節點，也可以p1.innerHTML = "這是一個新段落。"
; para.appendChild(node);//向 <p> 元素追加這個文本節點 //向已有的元素追加這個新元素 var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
④、刪除 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
DOM 事件
?
1、Js中的事件
?
行為,結構,樣式分離的頁面
?
一般事件 onclick 鼠標點擊時觸發此事件
?
ondblclick 鼠標雙擊時觸發此事件
onmousedown 按下鼠標時觸發此事件
onmouseup 鼠標按下后松開鼠標時觸發此事件
onmouseover 當鼠標移動到某對象范圍的上方時觸發此事件
onmousemove 鼠標移動時觸發此事件
onmouseout 當鼠標離開某對象范圍時觸發此事件
onkeypress 當鍵盤上的某個鍵被按下并且釋放時觸發此事件.
onkeydown 當鍵盤上某個按鍵被按下時觸發此事件
onkeyup 當鍵盤上某個按鍵被按放開時觸發此事件
?
①、綁定事件的3種方式
?
1: 直接寫在html標簽內聲明
?
<div id="school" οnclick="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) 閉包+匿名函數?
轉載于:https://www.cnblogs.com/shamszhang/p/10608335.html
總結
- 上一篇： Shell编程-控制结构 | 基础篇
- 下一篇： gradle idea java ssm