03 前端篇（JS）
參考博客：http://www.cnblogs.com/yuanchenqi/articles/5980312.html
JavaScript包括三部分： ECMAScript、DOM、BOM
Javascript在開發中大多數情況下是基於對象的，也是面向對象的。
ECMAScript：語法、類型、語句、關鍵字、保留字、運算符、對象
JavaScript 引入方式：
- 直接編寫：建議放在 body 的最後
<script>
alert(“hello div”)
</script>
2. 導入文件：建議放在 head 裏面
<script src=”hello.js></script>
變量：var
註釋方式：1. // 2. /* */
數據類型： 1. Number，包括整型和浮點型 2. String 3. Boolean 4. Null 5. Undefined：undefined
NaN：當字符串轉換成數字失敗時，就是NaN，屬於 Number數據類型
NaN 數據在表達式中結果一定為 false，除了 !=
typeof：數據類型查詢，只能檢測基本數據類型，對象不能檢測
邏輯運算符:
ECMAScript：
native object：
host object： DOM 、BOM
DOM： document.write
BOM：alert(“
function 創建方式：
- function func() {
alert(123);
return 8;
}
var ret = func()
alert(ret) - var func2 = new function ("1", "n", "函數體") ;
instanceof：檢測對象類型 s instanceof String
字符串：
兩種創建方式：1. var s=“hello” 2. var s2=new String（“hello”）
方法：
1. s.length
2. 遍歷
3. 編排方法：s.italics() s.bold() s.anchor()
4.大小寫轉換: s.toUpperCase() s.toLowerCase()
5. 獲取指定字符： s.charAt(3)//取對應位置的字符
s.charCodeAt(3)//取對應位置字符的ASCII值
6. 查詢字符串： s.match(“l”)//返回一個數組，裏面是所有匹配結果 s.search(“l”)//得到第一個匹配結果的索引值
7. s.replace(“E”,”e”); s.split(“E”); s.concat(“ world”)// 進行字符串拼接
8. 截取字符串： s.substr(1, 2) //從索引 1 開始往後取 2 個元素
s.substring(1,3) //從索引1 取到索引2
s.slice(1, -2) //後面的位置可以取負數，也是左閉右開
9. 根據元素取索引 s.indexOf(“l”) s.lastIndexOf(“l”)
數組 Array：
創建方式： 1. var arr=[1,2,3] 2. var arr2=new Array(1,2,3,4)
//如果采用初始化對象方式創建數組，如果裏面只有一個值且是一個數字，那麽數字表示的是長度，而不是內容 var arr=new Array(3)
//數組是可變長的
數組對象的方法：
- [“hello”,”world”].join(“---”)
- 棧操作：push、pop（在棧頂部操作） unshift、shift（在棧底部操作）
arr5.push(13)
var ret = arr5.pop()//刪除最後一個元素，返回值是刪除元素的值
arr5.unshift(45)
arr5.shift
3. 排序：sort reverse
arr5.reverse() //反轉,直接更改數組
arr5.sort（）
4. concat： 連接數組 b=a.concat(4,5)
5. toString() // a.toString() 用 ’,’ 連接數組內的每個元素
Date 對象：
- 創建方式： var date_obj=new Date();
正則對象：
Math 對象：
Window 對象方法：
alert（）：顯示帶有一段消息和一個確認按鈕的警告框
confirm（）：顯示帶有一段消息以及確認按鈕和取消按鈕的警告框
prompt（）：顯示可提示用戶輸入的對話框
setInterval（）：循環的，按照指定的周期（以毫秒計）來調用函數或計算表達式
clearInterval（）：取消由setInterval設置的timeout
setTimeout（）：只一次，在指定的毫秒後調用函數或計算表達式
clearTimeout（）：取消由setTimeout設置的timeout
document.getElementById(“clock”)
document.getElementsByClassName(“div2”)
History 對象方法：
history內部三種方法：forward、back、go history.go(-1|1)
一個屬性length：保存的是 history 的歷史頁面個數
location：
onclick=”location.reload()” 刷新
onclick = “location.href=’http://www.baidu.com’”
DOM對象：
HTML中所有內容都是節點（NODE）
整個文檔是一個文檔節點（Document 對象）
每個HTML元素是元素節點（element對象）
html元素內的文本是文本節點（text 對象）
註釋是註釋節點（comment對象）
節點（自身屬性）：
attributes：節點的屬性節點
nodeType：節點類型
nodeValue：節點值
nodeName：節點名稱
innerHTML：節點（元素）的文本值,即 text 值
導航屬性：
parentNode：節點的父節點
firstChild：節點下第一個子元素 #text
lastChild：節點下最後一個子元素
childNodes：節點（元素）的子節點
parentElement：
firstElementChild：
lastElementChild：
children：子節點元素
nextElementSibling：下一個兄弟節點標簽
previousElementSibling：上一個兄弟節點標簽
訪問HTML元素（節點）：
getElementById（）
getElementsByTagName（） ： p、div
getElementsByClassName（）
getElementsByName（）: <p name=”lily”> hello p </p>
全局查找：
在document下查找： document.xxx
局部查找： 局部查找不可以通過 id 、name var ele = document.getElementsByClassName(“div3”)
var ele2 =ele.getElementsByTagName(“p”)
HTML DOM Event：
onclick：點擊
ondblclick：雙擊
onfocus：元素獲得焦點 // 練習：輸入框
onblr：失去焦點
onchange：域的內容被改變，應用場景
onkeydown：按下鍵盤某個鍵
onkeypress：鍵盤被按下並松開
onkeyup：鍵盤被松開
onload：一張頁面或一幅圖像。放在body標簽上，當頁面記載完成後才會去執行對應函數的內容。
window.onload=function(){ .....}
onmousedown：按下鼠標
onmousemove：移動鼠標
onmouseout：鼠標離開指定區域會觸發
onmouseover：鼠標一進入指定區域就會觸發
onsubmit：只能綁定在 form 標簽上
event.stopPropagation()：阻止事件傳播
標簽的增刪改查：
添加： createElement（“p”） appendChild（son）
刪除：removeChild（last_son）
改：ele.innerHTML 、ele.innerText 前者可以解析字符串內的標簽
ele.style.fontSize=”30px”
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)
elementNode.className
elementNode.classList.add(“big”)
elementNode.classList.remove(“big”)
DHTML: dynamic html（動態html）
<a href=”javascript:void(0)”>hello</a>,實現的功能和 onclick 一樣，javascript 就是一個偽協議
03 前端篇（JS）