javascript總結(jié)
ECMAScript
1.語法
2.變量：只能使用var定義，如果在函數(shù)的內(nèi)容使用var定義油讯，那么它是一個局部變量陌兑，如果沒有使用var它是一個全局的兔综。弱類型！
3.數(shù)據(jù)類型：原始數(shù)據(jù)類型(undefined/null/string/number/boolean)
4.語句：
5.運算符：==與===的區(qū)別
6.函數(shù)：兩種寫法(有命名稱涧窒，匿名的)
BOM對象
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(參數(shù))纠吴，back(),forward()
location: href屬性
DOM操作
DOM文檔結(jié)構(gòu).PNG
- Document:整個html文件都成為一個document文檔
- Element:所有的標簽都是Element元素
- Attribute：標簽里面的屬性
- Text：標簽中間夾著的內(nèi)容為text文本
- Node:document慧瘤、element、attribute、text統(tǒng)稱為節(jié)點node.
Document對象
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象上煤。
document對象.png
后面兩個方法獲取之后需要遍歷劫狠！
以下兩個方法很重要独泞，但是在手冊中查不到！
創(chuàng)建文本節(jié)點：document.createTextNode()
創(chuàng)建元素節(jié)點：document.createElement()
Element對象
我們所認知的html頁面中所有的標簽都是element元素
- element.appendChild():向元素添加新的子節(jié)點蜒犯，作為最后一個子節(jié)點罚随。
- element.firstChild:返回元素的首個子節(jié)點淘菩。
- element.getAttribute():返回元素節(jié)點的指定屬性值潮改。
- element.innerHTML:設(shè)置或返回元素的內(nèi)容汇在。
- element.insertBefore():在指定的已有的子節(jié)點之前插入新節(jié)點趾疚。
- element.lastChild:返回元素的最后一個子元素糙麦。
- element.setAttribute():把指定屬性設(shè)置或更改為指定值赡磅。
- element.removeChild():從元素中移除子節(jié)點焚廊。
- element.replaceChild():替換元素中的子節(jié)點。
Attribute對象
我們所認知的html頁面中所有標簽里面的屬性都是attribute
attribute對象.png
練習
在頁面中使用列表顯示一些城市
<ul>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
我們希望點擊一個按鈕實現(xiàn)動態(tài)添加城市嚼隘。
分析：
- 事件(onclick)
- 獲取ul元素節(jié)點
- 創(chuàng)建一個城市的文本節(jié)點
- 創(chuàng)建一個li元素節(jié)點
- 將文本節(jié)點添加到li元素節(jié)點中去飞蛹。
- 使用element里面的方法appendChild()來添加子節(jié)點
JS代碼：
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
//1.獲取ul元素節(jié)點
var ulEle = document.getElementById("ul1");
//2.創(chuàng)建城市文本節(jié)點
var textNode = document.createTextNode("深圳");//深圳
//3.創(chuàng)建li元素節(jié)點
var liEle = document.createElement("li");//<li></li>
//4.將城市文本節(jié)點添加到li元素節(jié)點中去
liEle.appendChild(textNode);//<li>深圳</li>
//5.將li添加到ul中去
ulEle.appendChild(liEle);
}
}
</script>
HTML代碼
<body>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
</body>
事件：
onsubmit()此事件寫在form標簽中，必須有返回值焰宣。
onload()此事件只能寫一次并且放到body標簽中
其它事件放到需要操作的元素位置霉囚。(onclick盈罐、onfocus暖呕、onblur)
回顧之前已經(jīng)使用過的事件
(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
事件.png
- onfocus/onblur:聚焦離焦事件苞氮，用于表單校驗的時候比較合適湾揽。
- onclick/ondblclick:鼠標單擊和雙擊事件
- onkeydown/onkeypress：搜索引擎使用較多
- onload：頁面加載事件，所有的其它操作(匿名方式)都可以放到這個綁定的函數(shù)里面去笼吟。如果是有名稱库物，那么在html頁面中只能寫一個。
- onmouseover/onmouseout/onmousemove：購物網(wǎng)站商品詳情頁贷帮。
- onsubmit：表單提交事件 戚揭，有返回值，控制表單是否提交撵枢。
- onchange:當用戶改變內(nèi)容的時候使用這個事件(二級聯(lián)動)
獲取元素：
document.getElementById("id")
獲取元素里面的值:
document.getElementById("id").value
向頁面輸出
彈窗：alert();……
向瀏覽器中寫入內(nèi)容：document.write(內(nèi)容)民晒；
向頁面指定位置寫入內(nèi)容,innerHTML
JavaScript內(nèi)置對象
- JS Array
- JS Boolean
- JS Date
- JS Math
- JS Number
- JS String
- JS RegExp
Array對象
數(shù)組的創(chuàng)建：
Array對象用于在單個的變量中存儲多個值
創(chuàng)建Array對象的語法：
new Array();
new Array(size);
new Array(element0,element1,...,elementn);
數(shù)組的特點：長度可變！數(shù)組的長度=最大角標+1
Boolean對象
創(chuàng)建Boolean對象的語法：
new Boolean(value);//構(gòu)造函數(shù)
Boolean(value);//轉(zhuǎn)換函數(shù)
如果value 不寫锄禽，那么默認創(chuàng)建的結(jié)果為false
Date對象
getTime()返回 1970 年 1 月 1 日至今的毫秒數(shù)潜必。
解決瀏覽器緩存問題
Math和number對象
與java里面的基本一致磁滚。
String對象
match()找到一個或多個正則表達式的匹配。
substr()從起始索引號提取字符串中指定數(shù)目的字符。
substring()提取字符串中兩個指定的索引號之間的字符唁影。
例子：
<script>
var str = "-a-b-c-d-e-f-";
var str1 = str.substr(2,4);//-b-c
//alert(str1);
var str2 = str.substring(2,4);//-b
alert(str2);
</script>
RegExp對象
正則表達式對象。
test
檢索字符串中指定的值猾警。返回 true 或 false穴墅。
全局函數(shù)
全局屬性和函數(shù)可用于所有內(nèi)建的 JavaScript 對象
全局函數(shù).png
關(guān)于編碼和解碼的一組方法：
<script>
var str = "張三";
//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
//alert(decodeURI(encodeURI(str)));//張三
//alert(decodeURIComponent(encodeURIComponent(str)));//張三
var str1 = "http://www.ithcx.cn";
//alert(encodeURI(str1));//http://www.ithcx.cn
//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.ithcx.cn
//alert(decodeURI(encodeURI(str1)));//http://www.ithcx.cn
//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.ithcx.cn
var str2 = "alert('abc')";
//alert(str2);
eval(str2);
</script>