JS個人筆記
一. javaScript簡介及基本用法
JavaScript誕生於1995年，主要用於處理網頁中的前端驗證（指檢查使用者輸入的內容是否符合一定的規則，eg:使用者名稱長度，郵箱格式等），就可以不需要將資料傳到伺服器再進行驗證，就加快了驗證的速度，有良好的使用者體驗。
還有一堆關於JavaScript的簡史，由網景公司發明，被SUN公司介入，還有一個JavaScript是微軟公司的JScript。。。。。。
-
JS的特點：解釋型語言，類似於C和JAVA的語法結構（難怪學起來這麼的熟悉），動態語言，基於原型的面向物件
-
JS程式碼編寫的位置
-
JS程式碼可以編寫到script標籤中；
-
或者向CSS一樣使用外部樣式，在外部建一個CSS文件再匯入到html中；(script標籤一旦用於引入外部檔案就不能編寫程式碼了，因為瀏覽器會忽略，如有需要可再建立一個新的script標籤編寫)（寫到外部檔案中可以在不同的頁面中同時引用，也可以利用到瀏覽器的快取機制，推薦~~~）
-
或者標籤的onclick屬性中，a標籤的href屬性中（但這兩個術語結構和行為耦合，不方便維護，不建議使用）
-
-
JS的輸出：
alert("hello world")//控制瀏覽器彈出一個警告框
document.write("hello world")//讓計算機在頁面中輸出內容
console.log("hello world")//向控制檯輸出內容 -
JS嚴格區分大小寫
-
JS中每一條語句以分號；結尾（如果不寫分號，瀏覽器會自動新增，但是有時候會出錯，檢查時也不容易找到錯誤的地方。且會消耗一些系統資源）
-
JS會忽略多個空格和換行，所以程式碼要美觀，規範~~~
-
字面量：一些不可改變的值，eg:1,2,3
-
變數：可以用來儲存字面量，且變數的值是可以任意改變的
-
JS中使用var關鍵字來宣告一個變數
-
識別符號：在JS中所有的可以由我們自主命名的可稱為識別符號，JS底層儲存識別符號時實際上採用Unicode編碼，所以理論上講所有的utf-8中含有的所有內容都可以作為識別符號，比如中文（但是最好不要用！！！）命名規則如下：
-
可含有字母，數字，下劃線_，$
-
不能是ES中的關鍵字或保留字
-
一般用駝峰命名法（一定要好好寫名字）
-
1. 資料型別
資料型別就是字面量的型別，有以下六種
-
記得首字母是大寫的
-
其中字串，數值，布林值，空值，未定義是基本資料型別，物件是引用資料型別
-
基本資料型別的資料，變數是直接儲存的它的值。變數與變數之間是互相獨立的，修改一個變數不會影響其他的變數。
-
引用資料型別的資料，變數是儲存的物件的引用（記憶體地址）。如果多個變數指向的是同一個物件，此時修改一個變數的屬性，會影響其他的變數。
-
比較兩個變數時，對於基本資料型別，比較的是值，對於引用資料型別比較的是地址，地址相同才相同
1.1 String 字串
-
要使用引號，單引號雙引號都可以。但是“你好’，”她說：“你很簡單。” “，兩個混用或者用兩次不可。正確用法：”你好“，‘我很好’，”她說：’我很不好。‘ “
-
在字串中用\作為轉義字元
eg:
\" :表示”
\' :表示’
\n :表示換行
\t :表示製表符
\\ :表示\ -
用運算子typeof檢驗變數的型別顯示srting
1.1.1 字串的一些方法
-
length：獲取字串的長度
-
charAt()：根據索引獲取指定的字元
-
charCodeAt()：根據索引獲取指定的字元編碼
-
String.fromCharCode()：根據字元編碼獲取字元
-
indexOf()，lastIndexOf()：
-
從一個字串中檢索指定內容
-
需要一個字串作為引數，這個字串就是要檢索的內容， 如果找到該內容，則會返回其第一次出現的索引，如果沒有找到則返回-1。
-
可以指定一個第二個引數，來表示開始查詢的位置
-
indexOf()是從前向後找
-
lastIndexOf()是從後向前找
-
-
slice()：可以從一個字串中擷取指定的內容，並將擷取到內容返回，不會影響原變數
-
引數： 第一個：擷取開始的位置（包括開始） 第二個：擷取結束的位置（不包括結束）
-
可以省略第二個引數，如果省略則一直擷取到最後
-
可以傳負數，如果是負數則從後往前數 substr()
-
和slice()基本一致，不同的是它第二個引數不是索引，而是擷取的數量
-
-
substr()： 和slice()基本一致，不同的是它第二個引數不是索引，而是擷取的數量
-
substring()：和slice()基本一致，不同的是它不能接受負值作為引數，如果設定一個負值，則會自動修正為0，substring()中如果第二個引數小於第一個，自動調整位置
-
toLowerCase() ：將字串轉換為小寫並返回
-
toUpperCase() ：將字串轉換為大寫並返回
-
split()：可以根據指定內容將一個字串拆分為一個數組
-
引數：需要一個字串作為引數，將會根據字串去拆分陣列 可以接收一個正則表示式，此時會根據正則表示式去拆分陣列
-
-
match() ：可以將字串中和正則表示式匹配的內容提取出來
-
引數：
-
正則表示式，可以根據該正則表示式將字串中符合要求的內容提取出來，並且封裝到一個數組中返回
-
-
-
replace() ：可以將字串中指定內容替換為新的內容
-
引數：第一個：被替換的內容，可以是一個正則表示式 第二個：替換的新內容
-
-
search() ：可以根據正則表示式去字串中查詢指定的內容
-
引數：正則表示式，將會根據該表示式查詢內容，並且將第一個匹配到的內容的索引返回，如果沒有匹配到任何內容，則返回-1。
-
1.2. Number 數值
在JS中所有的數值都是Number型別，包括整數，小數
-
用運算子typeof檢驗變數的型別顯示number
-
可以表示的數字的最大值：1.79.....e+308Number.MAX_VALUE,當超過了最大值用typeof檢驗顯示為Infinity（正無窮），反之則為-Infinity(負無窮)；檢驗infinity顯示為number
-
Number.MIN.VALUE: 5e-324 表示的是一個大於0的最小值，而不是一個複數
-
NaN：一個特殊的數字，表示Not A Number ，eg: abc*acb就等於NaN
-
整數的運算可以保證精準，但是浮點元素可能得不到一個精確的值，因為計算機是採用二進位制的，有的小數不能表示出來，就會有誤差，所以對數值有精確度的要求的話最好不要用JS計算
1.3. Boolean 布林值
用來表示邏輯運算，true表示真，false表示假
1.4. Null 空值
只有一個，null，表示一個空的物件，和空格還是有差別的
檢查時返回object
1.5. Undefined 未定義
只有一個，undefined，宣告變數後，但是沒有給變數賦值（原來如此）
1.6. Object 物件
這個型別就不放在這寫了，在下面哦
1.7. 資料型別轉換
1.7.1 轉為String型別
-
toString()方法(強制)
（null和undefined不可用）
var a=1;
b=a.toString();
-
String()函式(強制)
（null型別和undefined型別會轉為字串）
var a=1;
b=String(a);
-
要轉換的資料+" "(隱式)
var a=1;
b=a+""
1.7.2 轉為Number型別
-
Number()函式（強制）
var a="1";
b=Number(a);
分情況討論如下：
-
String
-
若字串為合法數字則轉為數字
-
若為非法數字則轉為NaN
-
若為空串或空格則轉為0
-
-
Boolean
-
若為true則轉為1
-
若為false則轉為0
-
-
Null：轉為0
-
Undefined：轉為NaN
-
parseInt()函式（強制）
(將字串的有效整數位提取出來)
var a="12.34bds";
b=parseFloat(a);
（可指定進位制，如下）
var a="12.34bds";
b=parseFloat(a,10);
-
parseFloat()函式（強制）
(將字串的有效小數位提取出來)
var a="12.34bds";
b=parseInt(a);
-
用+（隱式）
var a="12.34bds";
b=+a;
1.7.3 轉為Boolean
-
Boolean()函式（強制）
var a="true";
b=Boolean(a);
分情況討論如下：
-
String：除了空串為false，其餘都為true
-
Number：除了0和NaN為false，其餘都為true
-
Null,Undefined：都為false
-
物件：都為true
-
用！！(隱式)
var a="true";
b=!!a;
2. 運算子
2.1. 算數運算子
-
+，-，*，/（除），%（求餘）（記住除和求餘不要弄混了）
-
自增
-
a++的值是自增前的值
-
++a的值是自增後的值
-
（兩者的a的值都自增1）
-
-
同理還有自減
2.2. 邏輯運算子：
-
||（或）：對兩端的值進行或運算（只有兩邊都為false時才返回false）
-
若第一個值為true，則返回第一個值
-
若第一個值為false，則返回第二個值
-
（剛剛才知道原來這樣也可以，好！）
-
-
&&（與）：對兩端進行與計算（只有兩邊都為true時才返回true）
-
若第一個值為false，則返回第一個值
-
若第一個值為true，則返回第二個值
-
-
！（非）：對Boolean取反（對非Boolean型別使用時會自動先將其轉換為Boolean型別，再進行運算）
2.3. 賦值運算子：
+=：
eg：a+=1 等於 a=a+1
同理還有-=，*=，等等等等等等，就這吧
2.4. 關係運算符：>, <, >=, <=
2.5. 相等運算子：
-
==：相等（若對不同型別進行比較，會轉為相同型別）
-
!=：不等（同上）
-
===：全等（不會進行型別轉換）
-
！==：不全等（同上）
2.6. 特殊值：
-
Null==Undefined, 返回true
-
Null===Undefined, 返回false
-
原因：undefined衍生自null
-
NaN不和任何值相等，包括自身
2.7. 三元運算子
？=：先對錶達式求值，若為true，執行語句1，若為false則執行語句2（個人感覺有點像if else）
語法：條件表示式？語句1：語句2
2.8 優先順序
越上面的優先順序越高
3. 流程空值語句
程式是自上而下執行的
3.1 條件判斷語句
-
if(條件表示式){
執行語句
}
-
if(條件表示式){
執行語句
}else{
執行語句
}
-
if(條件表示式){
執行語句
}else if（條件表示式）{
執行語句
}else if（條件表示式）{
執行語句
}else if（條件表示式）{
執行語句
}......
else{
執行語句
}
-
這個部分就偷懶了，就寫這麼多了，對就是這樣，沒有了
3.2 條件分支語句
-
switch（條件表示式）{
case 表示式：
執行語句
break；
case 表示式：
執行語句
break；
case 表示式：
執行語句
break；
......
default:
執行語句
break；
}
-
嗯，這個也就寫到這裡吧，你知我也知
3.3 迴圈語句
-
do{
執行語句
}while（條件表示式）
-
while（條件表示式）{
執行語句
}
-
for（初始化表示式；條件表示式；更新表示式）{
執行語句
}
-
死迴圈
-
while（true）{
執行語句
}
-
for（;;）{
執行語句
}
-
-
這個也就寫這麼多吧，大家也都知道了
二. 物件
物件是JS中的引用資料型別，是複合資料型別，在物件中可以儲存多個不同資料型別的屬性
1. 建立物件
var obj=new Object();
var obj={};
2. 向物件新增屬性
屬性值可以是任意的資料型別
物件.屬性名=屬性值;
物件["屬性名"]=屬性值;
var 物件名={
屬性名：屬性值,
屬性名：屬性值,
屬性名：屬性值,
3. 讀取物件中的屬性
若讀取一個物件沒有的屬性，不會報錯，會返回一個undefined
屬性.屬性名
物件["屬性名"]
4. 刪除物件中的屬性
delete 物件.屬性名
delete 物件["屬性名"]
5. 檢視物件是否有指定的屬性
"屬性名" in 物件
6. 一些物件和類
6.1 Data
-
日期的物件，在JS中通過Date物件來表示一個時間
-
建立一個當前的時間物件
var d = new Date(); -
建立一個指定的時間物件
var d = new Date("月/日/年 時:分:秒"); -
方法：
-
getDate()： 當前日期物件是幾日（1-31）
-
getDay() ：返回當前日期物件時周幾（0-6）
-
0 週日
-
1 週一
-
-
getMonth()：返回當前日期物件的月份（0-11）
-
0 一月 1 二月 。。。
-
-
getFullYear() 從 Date 物件以四位數字返回年份。
-
getHours() 返回 Date 物件的小時 (0 ~ 23)。
-
getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)。
-
getSeconds() 返回 Date 物件的秒數 (0 ~ 59)。
-
getMilliseconds() 返回 Date 物件的毫秒(0 ~ 999)。
-
getTime()：返回當前日期物件的時間戳
-
時間戳，指的是從1970年月1日 0時0分0秒，到現在時間的毫秒數 計算機底層儲存時間都是以時間戳的形式儲存的。
-
-
Date.now()：可以獲取當前程式碼執行時的時間戳
-
6.2 Math
-
Math屬於一個工具類，它不需要我們建立物件，它裡邊封裝了屬性運算相關的常量和方法，我們可以直接使用它來進行數學運算相關的操作
-
方法：
-
Math.PI：常量，圓周率
-
Math.abs()：絕對值運算
-
Math.ceil()：向上取整
-
Math.floor()： 向下取整
-
Math.round()：四捨五入取整
-
Math.random()：生成一個0-1之間的隨機數
-
生成一個x-y之間的隨機數：
-
Math.round(Math.random()*(y-x)+x);
-
-
-
Math.pow(x,y)：求x的y次冪
-
Math.sqrt()：對一個數進行開方
-
Math.max()：求多個數中最大值
-
Math.min()：求多個數中的最小值
-
三. 函式
函式也是一個物件，也具有普通物件的功能，其中可以封裝一些程式碼，在需要的時候可以去呼叫函式來執行這些程式碼
1. 建立函式
函式的語句是按順序向下執行
但是在全域性作用域中var宣告的變數和使用函式宣告建立的函式（function 函式名（）{}）會放在最前面執行，只宣告沒有賦值，和沒有該函式的特性
同時在區域性作用域，也就是函式作用域中也如此，且在函式作用域中var宣告的是區域性變數，沒有var的宣告的是全域性變數
--宣告
function 函式名([形參1],[形參2],[形參3]
2. 呼叫函式
函式物件([形參1],[形參2],[形參3]
3. 形參和實參
-
形參：形式引數，定義函式時，可以在()中定義一個或多個形參，形參之間使用,隔開 定義形參就相當於在函式內聲明瞭對應的變數但是並不賦值，形參會在呼叫時才賦值。
-
實參：實際引數，呼叫函式時，可以在()傳遞實參，傳遞的實參會賦值給對應的形參, 呼叫函式時JS解析器不會檢查實參的型別和個數，可以傳遞任意資料型別的值。如果實參的數量大於形參，多餘實參將不會賦值， 如果實參的數量小於形參，則沒有對應實參的形參將會賦值undefined
4. 函式的返回值
函式執行的結果，使用return 來設定函式的返回值。return後可以跟任意型別的值，可以是基本資料型別，也可以是一個物件。
return 值;
-
return後邊的程式碼都不會執行，一旦執行到return語句時，函式將會立刻退出。
-
如果return後不跟值，或者是不寫return則函式預設返回undefined。
4.1 something else break、continue和return的區別
-
break
-
退出迴圈
-
-
continue
-
跳過當次迴圈
-
-
return
-
退出函式
-
5. 作用域
5.1. 全域性作用域
-
直接在script標籤中編寫的程式碼都執行在全域性作用域中
-
全域性作用域在開啟頁面時建立，在頁面關閉時銷燬。
-
全域性作用域中有一個全域性物件window，window物件由瀏覽器提供， 可以在頁面中直接使用，它代表的是整個的瀏覽器的視窗
-
在全域性作用域中建立的變數都會作為window物件的屬性儲存 在全域性作用域中建立的函式都會作為window物件的方法儲存
-
在全域性作用域中建立的變數和函式可以在頁面的任意位置訪問。 在函式作用域中也可以訪問到全域性作用域的變數。
-
儘量不要在全域性中建立變數
5.2 函式作用域
-
函式作用域是函式執行時建立的作用域，每次呼叫函式都會建立一個新的函式作用域。
-
函式作用域在函式執行時建立，在函式執行結束時銷燬。
-
在函式作用域中建立的變數，不能在全域性中訪問。
-
當在函式作用域中使用一個變數時，它會先在自身作用域中尋找， 如果找到了則直接使用，如果沒有找到則到上一級作用域中尋找，如果找到了則使用，找不到則繼續向上找
5.3 this（上下文物件）
-
我們每次呼叫函式時，解析器都會將一個上下文物件作為隱含的引數傳遞進函式。 使用this來引用上下文物件，根據函式的呼叫形式不同，this的值也不同。
-
this的不同的情況：
-
以函式的形式呼叫時，this是window
-
以方法的形式呼叫時，this就是呼叫方法的物件
-
以建構函式的形式呼叫時，this就是新建立的物件
-
使用call和apply呼叫時，this是指定的那個物件
-
在全域性作用域中this代表window
-
6. 建構函式
-
建構函式是專門用來建立物件的函式
-
一個建構函式我們也可以稱為一個類
-
通過一個建構函式建立的物件，我們稱該物件時這個建構函式的例項
-
通過同一個建構函式建立的物件，我們稱為一類物件
-
建構函式就是一個普通的函式，只是他的呼叫方式不同，
-
如果直接呼叫，它就是一個普通函式 如果使用new來呼叫，則它就是一個建構函式
6.1 建構函式的執行流程：
-
建立一個新的物件
-
將新的物件作為函式的上下文物件（this）
-
執行函式中的程式碼
-
將新建的物件返回
6.2 instanceof 檢查一個物件是否是一個類的例項
-
語法
物件 instanceof 建構函式
-
如果該物件時建構函式的例項，則返回true，否則返回false
-
Object是所有物件的祖先，所以任何物件和Object做instanceof都會返回true
-
6.3 列舉物件中的屬性
-
語法：
for(var 屬性名 in 物件){
}
for...in語句的迴圈體會執行多次，物件中有幾個屬性就會執行幾次,每次講一個屬性名賦值給我們定義的變數，我們可以通過它來獲取物件中的屬性。
7. call（），apply（）
-
這兩個方法都是函式物件的方法需要通過函式物件來呼叫
-
通過兩個方法可以直接呼叫函式，並且可以通過第一個實參來指定函式中this
-
不同的是call是直接傳遞函式的實參而apply需要將實參封裝到一個數組中傳遞
8. arguments
-
arguments和this類似，都是函式中的隱含的引數
-
arguments是一個類陣列元素，它用來封裝函式執行過程中的實參 所以即使不定義形參，也可以通過arguments來使用實參
-
arguments中有一個屬性callee表示當前執行的函式物件
9. 原型（prototype）
-
建立一個函式以後，解析器都會預設在函式中新增一個數prototype prototype屬性指向的是一個物件，這個物件我們稱為原型物件。
-
當函式作為建構函式使用，它所建立的物件中都會有一個隱含的屬性執行該原型物件。 這個隱含的屬性可以通過物件.proto來訪問。
-
原型物件就相當於一個公共的區域，凡是通過同一個建構函式建立的物件他們通常都可以訪問到相同的原型物件。 我們可以將物件中共有的屬性和方法統一新增到原型物件中， 這樣我們只需要新增一次，就可以使所有的物件都可以使用。
-
當我們去訪問物件的一個屬性或呼叫物件的一個方法時，它會先自身中尋找， 如果在自身中找到了，則直接使用。 如果沒有找到，則去原型物件中尋找，如果找到了則使用， 如果沒有找到，則去原型的原型中尋找，依此類推。直到找到Object的原型為止，Object的原型的原型為null， 如果依然沒有找到則返回undefined
-
hasOwnProperty()
-
這個方法可以用來檢查物件自身中是否含有某個屬性
-
語法：物件.hasOwnProperty("屬性名")
-
-
四. 陣列（Array）
-
陣列也是一個物件，是一個用來儲存資料的物件和Object類似，但是它的儲存效率比普通物件要高。其中儲存的內容我們稱為元素，並使用索引（index）來操作元素，索引指由0開始的整數
1. 陣列的操作：
1.1 建立陣列
var arr = new Array();
var arr = [];
1.2 向陣列中新增元素
陣列物件[索引] = 值;
arr[0] = 123;
arr[1] = "hello";
1.3 建立陣列時直接新增元素
var arr = [元素1,元素2
1.4 獲取和修改陣列的長度
-
使用length屬性來運算元組的長度
-
獲取長度： 陣列.length
-
length獲取到的是陣列的最大索引+1
-
對於連續的陣列，length獲取到的就是陣列中元素的個數
-
-
修改陣列的長度 陣列.length = 新長度 - 如果修改後的length大於原長度，則多出的部分會空出來 - 如果修改後的length小於原長度，則原陣列中多出的元素會被刪除
-
向陣列的最後新增元素 陣列[陣列.length] = 值;
1.5 陣列的方法
-
push()
-
用來向陣列的末尾新增一個或多個元素，並返回陣列新的長度
-
語法：陣列.push(元素1,元素2,元素N)
-
-
pop()
-
用來刪除陣列的最後一個元素，並返回被刪除的元素
-
-
unshift()
-
向陣列的前邊新增一個或多個元素，並返回陣列的新的長度
-
-
shift()
-
刪除陣列的前邊的一個元素，並返回被刪除的元素
-
-
slice()
-
可以從一個數組中擷取指定的元素
-
該方法不會影響原陣列，而是將擷取到的內容封裝為一個新的陣列並返回
-
引數： 1.擷取開始位置的索引（包括開始位置） 2.擷取結束位置的索引（不包括結束位置）
- 第二個引數可以省略不寫，如果不寫則一直擷取到最後-
引數可以傳遞一個負值，如果是負值，則從後往前數
-
-
-
splice()
-
可以用來刪除陣列中指定元素，並使用新的元素替換 該方法會將刪除的元素封裝到新陣列中返回
-
引數： 1.刪除開始位置的索引 2.刪除的個數 3.三個以後，都是替換的元素，這些元素將會插入到開始位置索引的前邊
-
-
reverse()
-
可以用來反轉一個數組，它會對原陣列產生影響
-
concat()
-
可以連線兩個或多個數組，它不會影響原陣列，而是新陣列作為返回值返回
-
join()
-
可以將一個數組轉換為一個字串
-
引數： 需要一個字串作為引數，這個字串將會作為連線符來連線陣列中的元素 如果不指定連線符則預設使用, sort()
-
可以對一個數組中的內容進行排序，預設是按照Unicode編碼進行排序 呼叫以後，會直接修改原陣列。
-
可以自己指定排序的規則，需要一個回撥函式作為引數： function(a,b){
//升序排列
//return a-b;
//降序排列
return b-a;
}
-
1.6 遍歷陣列
-
遍歷陣列就是將陣列中元素都獲取到
-
一般情況我們都是使用for迴圈來遍歷陣列：
for(var i=0 ; i<陣列.length ; i++){
//陣列[i]
} -
使用forEach()方法來遍歷陣列（不相容IE8）
陣列.forEach(function(value , index , obj){
});forEach()方法需要一個回撥函式作為引數，陣列中有幾個元素，回撥函式就會被呼叫幾次，每次呼叫時，都會將遍歷到的資訊以實參的形式傳遞進來，我們可以定義形參來獲取這些資訊。
-
value:正在遍歷的元素
-
index:正在遍歷元素的索引
-
obj:被遍歷物件
-
五. DOM
-
文件物件模型，通過DOM可以來修改網頁中各個內容
-
文件：指網頁，一個網頁就是一個文件
-
物件：物件將網頁中的每一個節點都轉換為物件，轉換完物件後就可以以一種純面向物件的形式來操作網頁了
-
模型：用來表示節點和節點之間的關係，方便操作頁面
-
節點：構成網頁的最基本的單元，網頁中的每一個部分都可以成為是一個節點，但節點的型別是不同的
-
文件節點：代表整個網頁
-
元素節點：代表網頁中的標籤
-
屬性節點：代表網頁中的屬性
-
文字節點：代表網頁中的文字內容
-
1.1 DOM操作
1.11 DOM查詢：
在網頁中瀏覽器已經為我們提供了document物件，它代表的是整個網頁，它是window物件的屬性，可以在頁面中直接使用。
document查詢方法：
-
根據元素的id屬性查詢一個元素節點物件：document.getElementById("id屬性值");
-
根據元素的name屬性值查詢一組元素節點物件：document.getElementsByName("name屬性值");
-
根據標籤名來查詢一組元素節點物件：document.getElementsByTagName("標籤名");
-
通過具體的元素節點來查詢
-
元素.getElementsByTagName()：通過標籤名查詢當前元素的指定後代元素
-
元素.childNodes：獲取當前元素的所有子節點，會獲取到空白的文字子節點
-
元素.children：獲取當前元素的所有子元素
-
元素.firstChild：獲取當前元素的第一個子節點
-
元素.lastChild：獲取當前元素的最後一個子節點
-
元素.parentNode：獲取當前元素的父元素
-
元素.previousSibling：獲取當前元素的前一個兄弟節點
-
元素.nextSibling：獲取當前元素的後一個兄弟節點
-
1.12 DOM的修改
-
document.createElement()：可以根據標籤名建立一個元素節點物件
-
document.createTextNode()：可以根據文字內容建立一個文字節點物件
-
父節點.appendChild(子節點)：向父節點中新增指定的子節點
-
父節點.insertBefore(新節點，舊節點)：將一個新節點插入到舊節點的前面
-
父節點.replaceChild(新節點，舊節點)：使用一個新節點替換舊節點
-
父節點.removeChild(子節點)：刪除指定的子節點
-
讀取內聯樣式
元素.style.樣式名
元素.style.width
元素.style.height
<!--注意：如果樣式名中帶有-，則需要將樣式名修改為駝峰命名法
將-去掉，然後-後的字母改大寫
比如：background-color -> backgroundColor
border-width -> borderWidth-->
-
修改內聯樣式
元素.style.樣式名=樣式值
通過style修改的樣式都是內聯樣式，由於內聯樣式的優先順序比較高，所以我們通過JS來修改的樣式，往往會立即生效，但是如果樣式中設定了!important，則內聯樣式將不會生效。
-
讀取元素的當前樣式
-
一般瀏覽器
使用getComputedStyle()：這個方法是window物件的方法，可以返回一個物件，這個物件中儲存著當前元素生效樣式
引數： 1.要獲取樣式的元素 2.可以傳遞一個偽元素，一般傳null
eg：獲取元素的寬度 getComputedStyle(box , null)["width"];
通過該方法讀取到樣式都是隻讀的不能修改
-
IE8
使用currentStyle
語法： 元素.currentStyle.樣式名
eg：box.currentStyle["width"]
通過這個屬性讀取到的樣式是隻讀的不能修改
-
-
其他的樣式相關的屬性：以下樣式都是隻讀
-
clientHeight：元素的可見高度，指元素的內容區和內邊距的
-
clientWidth：元素的可見寬度，指元素的內容區和內邊距的寬度
-
offsetHeight：整個元素的高度，包括內容區、內邊距、邊
-
offfsetWidth：整個元素的寬度，包括內容區、內邊距、邊
-
offsetParent：當前元素的定位父元素，離他最近的開啟了定位的祖先元素，如果所有的元素都沒有開啟定位，則返回body
-
offsetLeft，offsetTop：當前元素和定位父元素之間的偏移量，offsetLeft水平偏移量 offsetTop垂直偏移量
-
scollHeight，scollWidth：獲取元素滾動區域的高度和寬度
-
scollTop，scollLeft：獲取元素垂直和水平滾動條滾動的距離
-
判斷滾動條是否滾動到底
-
垂直滾動條：scollHeight - scollTop=clientHeight
-
水平滾動：scollWidth - scollLeft=cilentWidth
-
-
1.2 元素的屬性
-
讀取元素的屬性： 語法：元素.屬性名
-
eg：ele.name ele.id ele.value ele.className
-
-
修改元素屬性：
語法：元素.屬性名=屬性值
innerHTML：使用該屬性可以獲取或設定元素內部的HTML程式碼
1.3 事件
事件是使用者和瀏覽器之間的互動行為，如點選按鈕，關閉視窗，滑鼠移動等。我們可以為事件來繫結回撥函式來相應事件
-
繫結事件的方式：
-
在標籤的事件屬性中設定相應的JS程式碼
<button onclick="js程式碼">按鈕</button>-
為物件的指定事件屬性設定回撥函式的形式來處理事件
<button id="btn">按鈕</button>
<script>
var btn=document.getElementByld("btn");
btn.onclick=function(){
balabala
};
</script>
-
1.31 事件物件
當響應函式被呼叫時，瀏覽器每次都會將一個事件物件作為實參傳遞進響應函式中，這個事件物件中封裝了當前事件的相關資訊，比如：滑鼠的座標，鍵盤的按鍵，滑鼠的按鍵，滾輪的方向。 可以在響應函式中定義一個形參，來使用事件物件，但是在IE8以下瀏覽器中事件物件沒有做完實參傳遞，而是作為window物件
元素.事件 = function(event){
event = event || window.event;
};
元素.事件 = function(e){
e = e || event;
};
1.32 事件的冒泡
事件的冒泡指的是事件向上傳導，當後代元素上的事件被觸發時，將會導致其祖先元素上的同類事件也會觸發。事件的冒泡大部分情況下都是有益的，如果需要取消冒泡，則需要使用事件物件來取消。可以將事件物件的cancelBubble設定為true，即可取消冒泡
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};
1.4 文件的載入
-
瀏覽器在載入一個頁面時，是按照自上向下的順序載入的，載入一行執行一行。如果將js程式碼編寫到頁面的上邊，當代碼執行時，頁面中的DOM物件還沒有載入， 此時將會無法正常獲取到DOM物件，導致DOM操作失敗。
-
解決方式一：將js程式碼編寫到body的下邊
<body>
<button id="btn">按鈕</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
</body>-
解決方式二：將js程式碼編寫到window.onload = function(){}中
window.onload 對應的回撥函式會在整個頁面載入完畢以後才執行， 所以可以確保程式碼執行時，DOM物件已經載入完畢了
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
};
};
</script>
-
1.5 some dom屬性
-
innerHTML和innerText：這兩個屬性並沒有在DOM標準定義，但是大部分瀏覽器都支援這兩個屬性，它們作用類似，都可以獲取到標籤內部的內容，不同是innerHTML會獲取到html標籤，而innerText會自動去除標籤，如果使用這兩個屬性來設定標籤內部的內容時，沒有任何區別的
-
讀取標籤內部的文字內容
<h1>h1中的文字內容</h1>
元素.firstChild.nodeValue
-
document.all：獲取頁面中的所有元素，相當於document.getElementsByTagName("*");
-
document.documentElement：獲取頁面中HTML根元素
-
document.body：獲取頁面中的body元素
-
document.getElementByClassName()：根據元素的屬性值查詢一組元素節點物件（不支援IE8以下的瀏覽器）
-
document.querySelector()：根據CSS選擇器去頁面查詢一個元素（若匹配到多個，則返回第一個）
-
document.querySelectorAll()：根據CSS選擇器去查詢一組元素，將匹配到的所有元素封裝到一個數組中返回
六. 正則表示式
-
正則用來定義一些字串的規則，程式可以根據這些規則來判斷一個字串是否符合規則，也可以將一個字串中符合規則的內容提取出來。
-
建立正則表示式
var reg = new RegExp("正則","匹配模式");
var reg = /正則表示式/匹配模式 -
語法： 匹配模式： i:忽略大小寫 g:全域性匹配模式
-
設定匹配模式時，可以都不設定，也可以設定1個，也可以全設定，設定時沒有順序要求
-
正則語法 | 或 [] 或 除了 [a-z] 小寫字母 [A-Z] 大寫字母 [A-z] 任意字母 [0-9] 任意數字
-
量詞
{n} ：正好n次 {m,n}： m-n次 {m,} ：至少m次
+：至少1次 {1,} ? ： 0次或1次 {0,1}
*：0次或多次 {0,}
-
轉義字元
\ 在正則表示式中使用\作為轉義字元 . 表示任意字元 \w：相當於[A-z0-9] \W： 相當於[^A-z0-9] \d：任意數字 \D：除了數字 \s： 空格 \S：除了空格 \b： 單詞邊界 \B：除了單詞邊界 ^ ：表示開始 $ ：表示結束
-
-
方法： test()：可以用來檢查一個字串是否符合正則表示式，如果符合返回true，否則返回false
-
我的天，終於寫完了，寫了好久好久好久，寫得自己都懷疑人生了，怎麼這麼多（好吧，大部分是抄的筆記，但是打的也好累）
-
但是覺得又有點問題，等我什麼時候有空了再改改（可能沒有這個時間）
-
裡面還有一些知識點自己還沒有很熟悉，還需要再看看
-
十一月。加油
-