js基礎學習筆記

## js中零散知識點
複製代碼

控制瀏覽器彈出一個警告框 alert（）；css
document.write()能夠向<body>中輸出一個內容。html
console.log向控制檯輸出一個內容正則表達式
js代碼是從上到下一行一行執行的數組
<script>標籤一旦用於引入外部文件，就不能再編寫代碼了，即便編寫了瀏覽器也會忽略，如須要則能夠再建立一個新的<script>標籤用於編寫內部代碼。瀏覽器
能夠經過Math.sqrt()對一個數進行開方。緩存
基本數據類型都是單一的值，值和值之間沒有任何的聯繫。安全
能夠經過debug斷點的形式查看代碼的執行和整個程序的內存結構。markdown

js編寫位置

能夠將js代碼編寫到標籤的onclick屬性中，當咱們點擊標籤時，js代碼纔會執行。（雖然能夠寫在標籤的屬性中，可是他們屬於結構與行爲耦合，不方便維護，不推薦使用）
能夠將js代碼寫在超連接的href屬性中，這樣當點擊超連接時，會執行js代碼。
能夠將js代碼編寫到<script>標籤中
能夠將js代碼編寫到外部js文件中，而後經過<script>標籤引入，寫到外部文件中能夠再不一樣的頁面中同時引用，也能夠利用到瀏覽器的緩存機制（推薦使用的方式）

js基本語法

多行註釋

/*

* 註釋中的內容不會被執行，可是能夠在源代碼中查看，要養成良好的編寫註釋的習

* 慣，也能夠經過註釋來對代碼進行一些簡單的調試

*/
複製代碼

單行註釋

// 只會對一行中註釋後面的內容起做用
複製代碼

js中嚴格區分大小寫app
js中每一條語句以分號（；）結尾dom
- 若是不寫分號，瀏覽器弧自動添加，可是會消耗一些系統資源，並且有些時候，瀏覽器會加錯分號，因此在開發中分號必須寫。
js中會忽略多個空格和換行，因此咱們能夠利用空格和換行對代碼進行格式化。

字面量和變量

字面量，都是一些不可變的值。字面量都是能夠直接使用的，可是咱們通常都不會直接使用字面量。
變量，能夠用來保存字面量，並且變量的值是能夠任意改變的。變量更加方便咱們使用，因此在開發中都是經過變量去保存一個字面量，而不多直接使用字面量。能夠經過變量對字面量進行描述
聲明變量
- 在js中使用var關鍵字來聲明一個變量
  
  例：var a;
- 爲變量賦值
  
  a=123;
- 也能夠同時聲明並賦值
  
  var b=0;

標識符

在js中全部的能夠由咱們自主命名的均可以稱爲是標識符
- 例如：變量名，函數名，屬性名都屬於標識符
命名一個標識符時須要遵照以下規則：

1.標識符中能夠含有字母，數字 _ $

2.標識符不能以數字開頭

3.標識符不能是ES中的關鍵字或保留字

4.標識符通常都採用駝峯命名法
首字母小寫，每一個單詞的開頭字母大寫，其他字母小寫

例：helloWorld
js底層保存標識符時實際上採用的Unicode編碼，因此理論上講，全部的utf-8中含有的內容均可以做爲標識符。可是千萬不要用中文起名。

數據類型

數據類型指的是字面量的類型
在js中一共有六中數據類型

String 字符串

Number 數值

Boolean 布爾值

Null 空值

Undefined 未定義

Object 對象

其中String,Number,Boolean,Null,Undefined屬於基本數據類型，而Object屬於引用數據類型。
String字符串

在js中字符串須要使用引號引發來
使用雙引號或單引號均可以，可是不要混着用
引號不能嵌套，雙引號不能放雙引號，單引號不能放單引號。

在字符串中可使用\做爲轉義字符，當表示一些特殊符號時可使用\進行轉義。
```
\" 表示「

 \' 表示‘

 \n 表示換行

 \t 表示製表符

 \\ 表示\
複製代碼
```
Number
- 在js中全部的數值都是Number類型，
- 包括整數和浮點數（小數）
可使用改一個運算符typeof來檢查一個變量的類型
- 語法：typeof 變量
- 檢查字符串時，會返回string
- 檢查數值時，會返回number
js中能夠表示的數字的最大值
```
Number.MAX_VALUE
複製代碼
```
若是使用number表示的數字超過了最大值，則會返回一個Infinity(表示正無窮)
使用typeof檢查Infinity返回number
NaN 是一個特殊的數字，使用typeof檢查NaN，返回number
Number.MIN_VALUE 大於0的最小數
在js中整數的運算基本能夠保證精確
若是使用js進行浮點元素，可能獲得一個不精確的結果，因此千萬不要使用js進行對精確度要求比較高的運算。
Boolean布爾值
- 布爾值只有兩個，主要用來作邏輯判斷
  - true表示真
  - false表示假
- 使用typeof檢查一個布爾值時，會返回boolean
Null類型
- Null類型的值只有一個，就是null
- null這個值專門用來表示一個爲空的對象
- 使用typeof檢查一個Null值時，會返回object
Undefined（未定義）類型的值只有一個，就是undefined
當聲明一個變量，可是並不給變量賦值時，它的值就是undefined
使用typeof檢查一個Undefined時會返回undefined

強制類型轉換

強制類型轉換指將一個數據類型強制轉換爲其餘的數據類型
類型轉換主要指，將其餘的數據類型轉換爲String Number Boolean
將其餘的數據類型轉換爲String

方式一：
- 調用被轉換數據類型的toString()方法
- 調用xxx的yyy( )方法，就是xxx.yyy( )
- 可是注意：null和undefined這兩個值沒有toString方法，若是調用他們的方法，會報錯。
方式二：
- 調用String（）函數，並將被轉換的數據做爲參數傳遞給函數
使用String（）函數作強制類型轉換時，對於Number和Boolean實際上就是調用的toString()方法，可是對於null和undefined就不會調用toString()方法，他會將null直接轉換爲「null」，將undefined直接轉換爲「undefined」
將其餘的數據類型轉換爲Number

方式一：
- 使用Number（）函數
- 字符串 --> 數字
  1. 若是是純數字的字符串，則直接將其轉換爲數字
  2. 若是字符串中有非數字的內容，則轉換爲NaN
  3. 若是字符串是一個空串或者是一個全是空格的字符串，則轉換爲0
- 布爾 -->數字
  
  true 轉成 1
  
  false轉成 0
- null --> 數字 0
- undefined --> 數字 NaN
方式二：
- 這種方式專門用來對付字符串
- parseInt()把一個字符串轉換爲一個整數
  
  parseInt（）能夠將一個字符串中的有效的整數內容取出來，而後轉換爲Number類型
- parseFloat（）把一個字符串轉換爲一個浮點數
  
  parseFloat（）能夠將一個字符串中的有效的小數內容取出來，而後轉換爲Number類型
若是對非String使用parseInt（）或parseFloat(),它會先將其轉換爲String，而後再操做
將其餘的數據類型轉換爲Boolean
- 使用Boolean（）函數
- 數字 --> 布爾
  
  除了0和NaN，其他的都是true
- 字符串 --> 布爾
  
  除了空串，其他的都是true
- null和undefined都會轉換爲false
- 對象也會轉換爲true

其餘進制的數字

在js中，若是須要表示16進制的數字，則須要以0x開頭
若是須要表示8進制的數字，則須要以0 開頭
若是須要表示2進制數字，則須要以0b開頭，可是並非全部的瀏覽器都支持
注意：像「070」這種字符串，有些瀏覽器會當成8進制解析，有些會當成10進制解析。能夠在parseInt()中傳遞一個第二個參數，來指定數字的進制。

運算符

運算符也叫操做符，經過運算符能夠對一個或多個值進行運算，並獲取運算結果。好比：typeof就是運算符，能夠來得到一個值的類型。它會將該值的類型以字符串的形式返回。
算數運算符
1. 當對非Number類型的值進行運算時，會將這些值轉換爲Number而後再運算
2. 任何值和NaN做運算都得NaN
3. +能夠對兩個值進行加法運算，並將結果返回。若是對兩個字符串進行加法運算，則會作拼串。會將兩個字符串拼接爲一個字符串，並返回。任何的值和字符串作加法運算，都會轉換爲字符串，並作拼串操做
4. 咱們能夠利用這個特色，來將一個任意的數據類型轉換爲String，只須要爲任意的數據類型+ 一個"" 便可將其轉換爲String。這是一種隱式的類型轉換，由瀏覽器自動完成，實際上它也是調用String（）函數。
5. -能夠對兩個值進行減法運算，並將結果返回
6. *能夠對兩個值進行乘法運算
7. /能夠對兩個值進行除法運算
8. 任何值作 - * /運算時都會自動轉換爲Number，能夠利用這一特色作一隱式的類型轉換，能夠經過一個值 -0 *1 /1來將其轉換爲Number,原理和Number（）函數同樣，使用起來更加簡單
9. %能夠對兩個值進行取餘運算
一元運算符
- 只須要一個操做數
- 正號不會對數字產生任何影響
- 負號能夠對數字進行符號取反
對於非number類型會先轉換爲Number，而後再運算

能夠對一個其餘的數據類型使用+，來將其轉換爲Number，原理和Number（）函數同樣
邏輯運算符

js中爲咱們提供了三種邏輯運算符
1. ！非
  - ！能夠用來對一個值進行非運算
  - 所謂非運算就是對一個布爾值進行取反操做
  true變false，false變true
  - 若是對一個值進行兩次取反，它不會變化
  - 若是對非布爾值進行運算，則會將其轉換爲布爾值，而後再取反。
  因此咱們能夠利用該特色，來將一個其餘的數據類型轉換爲布爾值
  
  能夠爲一個任意數據類型取兩次反，來將其轉換爲布爾值，原理和Boolean（）函數同樣。
2. && 與
  - &&能夠對符號兩側的值進行與運算
  - 只有兩端的值都爲true時，纔會返回true。只要有一個false就會返回false。
  - js中的與是一個短路的與，若是第一個值是false，則再也不檢查第二個值
  - 對於非布爾值，它會將其轉換爲布爾值而後作運算，並返回原值
  - 規則：
    
    1.若是第一個值爲false，則返回第一個值
    
    2.若是第一個值爲true，則返回第二個值
3. || 或
- ||能夠對符號兩側的值進行或運算
  - 只有兩端都是false時，纔會返回false。只要有一個true，就會返回true。
  - js中的或是一個短路的或，若是第一個值是true，則再也不檢查第二個值
  - 對於非布爾值，它會將其轉換爲布爾值而後作運算，並返回原值
  - 規則：
  1. 若是第一個值爲true，則返回第一個值
  2. 若是第一個值爲false，則返回第二個值
&& || 非布爾值的狀況
- 對於非布爾值進行與或運算時，會先將其轉換爲布爾值，而後再運算
- 與運算：
  
  若是第一個值都爲true，則返回第二個值
  
  若是第一個值爲false，則返回第一個值
- 或運算：
  
  若是第一個值爲true，則直接返回第一個值
  
  若是第一個值爲false，則直接返回第二個值
賦值運算符

=
- 能夠將符號右側的值賦值給左側變量
+=
- a += 5 至關於 a = a+5
- var str = "hello"; str += "world";
-=
- a -= 5 至關於 a = a-5
*=
- a *= 5 至關於 a = a*5
/=
- a /= 5 至關於 a = a/5
%=
- a %= 5 至關於 a = a%5
關係運算符
- 關係運算符用來比較兩個值之間的大小關係的
>

>=

<

<=
- 關係運算符的規則和數學中一致，用來比較兩個值之間的關係，若是關係成立則返回true，關係不成立則返回false。
- 若是比較的兩個值是非數值，會將其轉換爲Number而後再比較。
- 若是比較的兩個值都是字符串，此時會比較字符串的Unicode編碼，而不會轉換爲Number。比較字符編碼時是一位一位進行比較的，若是兩位同樣則比較下一位，因此借用它對英文進行排序。比較中文是沒有意義的
- 注意：在比較兩個字符串型的數字時，必定必定要轉型。
- 任何值和NaN作任何比較都是false
相等運算符
1. 用來比較兩個值是否相等，若是相等會返回true，不然返回false
==
- 相等，判斷左右兩個值是否相等，若是相等返回true，若是不等返回false
- 相等會自動對兩個值進行類型轉換，若是對不一樣的類型進行比較，會將其轉換爲相同的類型而後再比較，轉換後相等它也會返回true
- underfined 衍生自null，因此這兩個值作相等判斷時，會返回true。
- NaN不和任何值相等，包括他自己
!=
- 不等，判斷左右兩個值是否不等，若是不等則返回true，若是相等則返回false
- 不等也會作自動的類型轉換，轉換後相等它也會返回true
===
- 全等，判斷左右兩個值是否全等，它和相等相似，只不過它不會進行自動的類型轉換，
若是兩個值的類型不一樣，則直接返回false

!==
- 不全等，和不等相似，可是它不會進行自動的類型轉換，若是兩個值的類型不一樣，它會直接返回true
特殊的值：
- null和undefined，因爲undefined衍生自null，因此null == undefined 會返回true。可是 null === undefined 會返回false。
- NaN 不與任何值相等，報告它自身 NaN == NaN //false
- 判斷一個值是不是NaN，使用isNaN()函數，若是該值是NaN則返回true，不然返回false
三元運算符：

?:
- 語法：條件表達式?語句1:語句2;
- 執行流程：
先對條件表達式求值判斷，

若是判斷結果爲true，則執行語句1，並返回執行結果。

若是判斷結果爲false，則執行語句2，並返回執行結果。
- 若是條件的表達式的求值結果是一個非布爾值，會將其轉換爲布爾值而後再進行運算。
，運算符

使用，能夠分割多個語句，通常能夠在聲明多個變量時使用。優先級：
- 和數學中同樣，JS中的運算符也是具備優先級的，好比先乘除後加減先與後或
- 具體的優先級能夠參考優先級的表格，在表格中越靠上的優先級越高，優先級越高的越優先計算，優先級相同的，從左往右計算。
- 優先級不須要記憶，若是越到拿不許的，使用()來改變優先級。

自增和自減

自增 ++
- 經過自增能夠是變量在自身的基礎上增長1
- 對一個變量自增之後，原變量的值會當即自增1
- 自增分紅兩種，後++（a++）和前++（++a）
  
  不管是a++ 仍是++a，都會當即使原變量的值自增1
不一樣的是a++和 ++a的值不一樣

a++ 的值等於原變量的值（自增前的值）

++a的值等於新值（自增後的值）
自減 --
- 經過自減能夠是變量在自身的基礎上減1
- 自減分紅兩種：後--（a--）和前--（--a）
  
  不管a--仍是--a，都會當即使原變量的值自減1
不一樣的是a--和--a的值不一樣

a--的值等於原變量的值（自減前的值）

--a的值等於新值（自減後的值）

Unicode編碼

在字符串中使用轉義字符輸入Unicode編碼

\u四位編碼

在網頁中使用Unicode編碼

&#編碼，這個的編碼須要的是10進制。

代碼塊

程序是由一條一條語句構成的
語句是按照自上向下的順序一條一條執行的
在js中可使用{}來爲語句進行分組，同一個{}中的語句稱爲是一組語句，他們要麼都執行，要麼都不執行，一個{}中的語句稱爲代碼塊，在代碼塊的後面就不用再編寫；了。
js中的代碼塊，只具備分組的做用，沒有其餘的用途
代碼塊的內容，在外部是徹底可見的。

流程控制語句

程序都是自上向下的順序執行的，經過流程控制語句能夠改變程序執行的順序，或者反覆的執行某一段的程序。
分類：
1. 條件判斷語句
2. 條件分支語句
3. 循環語句
條件判斷語句
- 條件判斷語句也稱爲if語句，if語句中的條件表達式中千萬不要寫一個=，一個=是賦值。
- if語句只能控制緊隨其後的那個語句，若是但願if語句能夠控制多條語句能夠將這些語句統一放到代碼塊中。if語句後的代碼塊不是必須的，可是在開發中儘可能寫代碼塊，即便代碼塊中只有一條語句。

語法一：

if(條件表達式){

語句...

}
複製代碼

執行流程：

if語句執行時，會先對條件表達式進行求值判斷，若是值爲true，則執行if後的語句；若是值爲false，則不執行
語法二：

if(條件表達式){

語句...

}else{

語句...

}
複製代碼

執行流程：

if...else語句執行時，會對條件表達式進行求值判斷，若是值爲true，則執行if後的語句；若是值爲false，則執行else後的語句
語法三：

if(條件表達式){

語句...

}else if(條件表達式){

語句...

}else if(條件表達式){

語句...

}else if(條件表達式){

語句...

}else{

語句...

}
複製代碼

執行流程
if...else if...else語句執行時，會自上至下依次對條件表達式進行求值判斷，若是判斷結果爲true，則執行當前if後的語句，執行完成後語句結束。若是判斷結果爲false，則繼續向下判斷，直到找到爲true的爲止。若是全部的條件表達式都是false，則執行else後的語句，該語句中，只會有一個代碼塊被執行，一旦代碼塊執行了，則直接結束語句。

條件分支語句

switch語句
語法:

switch(條件表達式){

case 表達式:

語句...

break;

case 表達式:

語句...

break;

case 表達式:

語句...

break;

default:

語句...

break;

}
複製代碼

執行流程：
switch...case...語句在執行時，會依次將case後的表達式的值和switch後的表達式的值進行全等比較，若是比較結果爲false，則繼續向下比較。若是比較結果爲true，則從當前case處開始向下執行代碼（當前case後的全部的代碼都會執行）。咱們能夠在case後邊跟着break，這樣能夠確保只會執行當前case後的語句，而不會執行其餘的case。
若是全部的case判斷結果都爲false，則從default處開始執行代碼。
break

使用break能夠退出switch語句
switch語句和if語句的功能其實是有重複的，使用switch能夠實現if的功能，一樣使用if也能夠實現switch的功能，因此咱們使用時，能夠根據本身的習慣選擇。

循環語句

經過循環語句能夠反覆執行某些語句屢次
while循環
語法：

while(條件表達式){

語句...

}
複製代碼

執行流程：

while語句在執行時，會先對條件表達式進行求值判斷，若是判斷結果爲false，則終止循環；若是判斷結果爲true，則執行循環體；循環體執行完畢，繼續對條件表達式進行求值判斷，依此類推。

向這種將條件表達式寫死爲true的循環，叫作死循環。該循環不會中止，除非瀏覽器關閉
建立一個循環，每每須要三個步驟，
1. 創初始化一個變量
2. 在循環中設置一個條件表達式
3. 定義一個更新表達式，每次更新初始化變量
do...while循環
語法:

do{

語句...

}while(條件表達式)

複製代碼

執行流程
- do...while在執行時，會先執行do後的循環體，而後在對條件表達式進行判斷，
- 若是判斷判斷結果爲false，則終止循環。
- 若是判斷結果爲true，則繼續執行循環體，依此類推
和while的區別：

while：先判斷後執行

do...while: 先執行後判斷
- do...while能夠確保循環體至少執行一次。
for循環
語法：

for(①初始化表達式 ; ②條件表達式 ; ④更新表達式){

③語句...

}
複製代碼

執行流程：

首先執行①初始化表達式，初始化一個變量（初始化表達式只會執行一次），

而後對②條件表達式進行求值判斷，若是爲false則終止循環

若是判斷結果爲true，則執行③循環體

循環體執行完畢，執行④更新表達式，對變量進行更新。

更新表達式執行完畢重複②
死循環

while(true){}
- 若是在for循環中不寫任何的表達式，只寫兩個；；此時循環是一個死循環會一直執行下去，慎用
for(;;){ }
break關鍵字能夠用來退出switch或循環語句

不能在if語句中使用break和continue

多個循環嵌套的狀況下，break只對離它最近的循環起做用

能夠爲循環語句建立一個label，來表示當前的循環

label：循環語句

使用label語句時，能夠在break後跟着一個label，這樣break將會結束指定的循環，而不是最近的。
continue關鍵字能夠用來跳過當次循環

一樣continue也是默認只會對離他最近的循環起做用。

提示框prompt（）

prompt（）函數能夠彈出一個提示框，該提示框中會帶有一個文本框
用戶能夠在文本框中輸入一段內容，該函數須要一個字符串做爲參數
該字符串將會做爲提示框的提示文字
用戶輸入的內容將會做爲函數的返回值返回，能夠定義一個變量來接收該內容，
prompt（）函數的返回值是String類型的。

定時器

開啓計時器

console.time（「計時器的名字」）能夠用來開啓一個計時器

他須要一個字符串做爲參數，這個字符串將會做爲計時器的標識
終止計時器

console.timeEnd()用來中止一個計時器，須要一個即時起的名字做爲參數.

對象object

對象屬於一種複合的數據類型，在對象中能夠保存多個不一樣數據類型的屬性。
對象的分類
1. 內建對象
  - 由ES標準中定義的對象，在任何的ES的實現中均可以使用
  - 好比：MAth String Number....
2. 宿主對象
-由js的運行環境提供的對象，目前來說主要指由瀏覽器提供的對象
- 好比BOM DOM
1. 自定義對象
- 由開發人員本身建立的對象
建立對象
- 方式一：
  - 使用new關鍵字調用的函數，是構造函數constructor
  構造函數是專門用來建立對象的函數
  - var obj = new Object();
- 方式二：
  - var obj = {};
向對象中添加屬性
- 語法：
  
  對象.屬性名 = 屬性值;
  
  對象["屬性名"] = 屬性值;
讀取對象中的屬性
- 語法：
  
  對象.屬性名
  
  對象["屬性名"]
- 若是讀取一個對象中沒有的屬性，它不會報錯，而是返回一個undefined
修改對象的屬性值
- 語法：
  
  對象.屬性名 = 新值
刪除對象中的屬性
- 語法：
  
  delete 對象.屬性名
  
  delete 對象["屬性名"]
向對象中添加屬性
- 對象的屬性名沒有任何要求，不須要遵照標識符的規範，可是在開發中，儘可能按照標識符的要求去寫。
- 屬性值也能夠任意的數據類型。
- 若是要使用特殊的屬性名，不能採用.的方式來操做
須要使用另外一種方式：
- 語法：
  
  對象["屬性名"]=屬性值
  
  讀取時也須要採用這種方式
- 使用[ ]這種形式去操做屬性，更加的靈活，在[ ]中能夠直接傳遞一個變量，這樣變量值是多少就會讀取那個屬性。
屬性值

js對象的屬性值，能夠是任意的數據類型，甚至也能夠是一個對象
- 使用in檢查對象中是否含有指定屬性
- 語法："屬性名" in 對象
  - 若是在對象中含有該屬性，則返回true，若是沒有則返回false
枚舉對象中的屬性

使用for ... in 語句
- 語法：
  
  for（var 變量 in 對象）{ }
  
  for... in語句，對象中有幾個屬性，循環體就會執行幾回
  
  每次執行時，會將對象中的一個屬性的名字賦值給變量
使用對象字面量，在建立對象時直接向對象中添加屬性。對象字面量的屬性名能夠加引號也能夠不加，建議不加，若是要使用一些特殊的名字，則必須加引號，屬性名和屬性值是一組一組的名值對結構，名和值之間使用：鏈接，多個名值對之間使用，逗號隔開。

若是一個屬性以後沒有其餘的屬性了，就不要寫逗號了
- 語法：
```
var obj = {
        屬性名:屬性值,
        屬性名:屬性值,
        屬性名:屬性值,
        屬性名:屬性值
    }

複製代碼
```
基本數據類型和引用數據類型

基本數據類型

String Number Boolean Null Undefined
引用數據類型

Object
js中的變量都是保存到棧內存中的
基本數據類型的數據在棧內存中存儲，變量是直接保存的它的值。
變量與變量之間是互相獨立的，修改一個變量不會影響其餘的變量。
引用數據類型的數據是保存在堆內存中，每建立一個新的對象，就會在堆內存中開闢出一個新的內存空間，變量是保存的對象的引用（內存地址）。
若是多個變量指向的是同一個對象，此時修改一個變量的屬性，會影響其餘的變量。
比較兩個變量時，對於基本數據類型，比較的就是值，對於引用數據類型比較的是地址，地址相同才相同。

函數（Function）

函數也是一個對象，也具備普通對象的功能
函數中能夠封裝一些代碼，在須要的時候能夠去調用函數來執行這些代碼
使用typeof檢查一個函數時會返回function
建立函數

能夠將要封裝的代碼以字符串的形式傳遞給構造函數

在實際開發中不多使用構造函數的

var fun = new Function();

封裝到函數中的代碼不會當即執行

函數中的代碼會在函數調用的時候執行
函數聲明

function 函數名([形參1,形參2...形參N]){

    語句...

    }
複製代碼

函數表達式

var 函數名 = function([形參1,形參2...形參N]){

    語句...

    };
複製代碼

調用函數

函數對象([實參1,實參2...實參N]);

fun() sum() alert() Number() parseInt()

複製代碼

當咱們調用函數時，函數中封裝的代碼會按照編寫的順序執行

形參和實參

形參：形式參數
定義函數時，能夠在函數的()中定義一個或多個形參，形參之間使用,隔開

定義形參就至關於在函數內聲明瞭對應的變量可是並不賦值，形參會在調用時才賦值。
實參：實際參數
調用函數時，能夠在()傳遞實參，傳遞的實參會賦值給對應的形參,

調用函數時JS解析器不會檢查實參的類型和個數，能夠傳遞任意數據類型的值。因此要注意，是否有可能會接收到非法的參數，若是有可能則須要對參數進行類型的檢查。

若是實參的數量大於形參，多餘實參將不會賦值，

若是實參的數量小於形參，則沒有對應實參的形參將會賦值undefined
函數返回值，就是函數執行的結果。
使用return 來設置函數的返回值。
語法：return 值;
該值就會成爲函數的返回值，能夠經過一個變量來接收返回值
return後邊的代碼都不會執行，一旦執行到return語句時，函數將會馬上退出。
return後能夠跟任意類型的值，能夠是基本數據類型，也能夠是一個對象。
若是return後不跟值，或者是不寫return則函數默認返回undefined。
break、continue和return
- break 退出循環
- continue 跳過當次循環
- return 退出函數
參數，函數的實參能夠是任意的數據類型，也能夠是一個對象，而後經過對象傳遞。
函數名（）
- 調用函數
- 至關於使用的函數的返回值
函數名
- 函數對象
- 至關於直接使用函數對象
當即執行函數

函數定義完，當即被調用，這種函數叫作當即執行函數

當即執行函數每每只會執行一次，

語法：將匿名函數用（）括起來，而後在後面加個（）；表示當即執行，有參數的時候，在後面的（）中能夠添加參數。
方法（method）
- 能夠將一個函數設置爲一個對象的屬性，
當一個對象的屬性是一個函數時，咱們稱這個函數是該對象的方法。

可是隻是名稱上的區別，沒有本質的差異
- 對象.方法名();
- 函數名();

做用域

做用域指一個變量的做用的範圍
在js中一共有兩種做用域：
1. 全局做用域
  - 直接編寫在script標籤中的js代碼，都在全局做用域
  - 全局做用域在頁面打開時建立，在頁面關閉時銷燬。
  - 在全局做用域中有一個全局對象window，咱們能夠直接使用
  它表明的是一個瀏覽器的窗口，它由瀏覽器建立
  - 在全局做用域中，
    
    建立的變量都會做爲window對象的屬性保存
    
    建立的函數都會做爲window對象的方法保存
  - 全局做用域中的變量都是全局變量
    
    在頁面的任意的部分均可以訪問到
2. 函數做用域
  - 函數做用域是函數執行時建立的做用域，每次調用函數都會建立一個新的函數做用域，他們之間是相互獨立的。
  - 函數做用域在函數執行時建立，在函數執行結束時銷燬。
  - 在函數做用域中能夠訪問到全局做用域的變量
  - 在函數做用域中建立的變量，不能在全局中訪問。
  - 當在函數做用域中使用一個變量時，它會先在自身做用域中尋找，若是找到了則直接使用，若是沒有找到則到上一級做用域中尋找，若是找到了則使用，找不到則繼續向上找，一直會找到全局做用域，若是全局做用域中依然沒有找到，則會報錯ReferenceError
  - 在函數做用域中若是想要訪問全局的變量，可使用window對象
3. 變量的聲明提早
  - 在全局做用域中，使用var關鍵字聲明的變量會在全部的代碼執行以前被聲明，可是不會賦值。
    
    因此咱們能夠在變量聲明前使用變量。可是不使用var關鍵字聲明的變量不會被聲明提早。
  - 在函數做用域中，也具備聲明提早的特性，使用var關鍵字聲明的變量會在函數全部的代碼執行前被聲明，
    
    若是沒有使用var關鍵字聲明變量，則變量會變成全局變量
    
    定義形參就至關於在函數做用域中聲明瞭變量
4. 函數的聲明提早
  - 使用函數聲明形式建立的函數function 函數（）{ }
    
    它會在全部的代碼執行以前就被建立，因此咱們能夠在函數聲明前來調用函數
  - 使用函數表達式建立的函數，不會被聲明提早，因此不能在聲明前調用。

this（上下文對象）

咱們每次調用函數時，解析器都會將一個上下文對象做爲隱含的參數傳遞進函數。
使用this來引用上下文對象，根據函數的調用形式不一樣，this的值也不一樣。
this的不一樣的狀況：
1. 以函數的形式調用時，this是window
2. 以方法的形式調用時，this就是調用方法的對象（誰調用方法this就是誰）
3. 以構造函數的形式調用時，this就是新建立的對象。

使用工廠方法建立對象

經過該方法能夠大批量的建立對象
1. 建立帶參數一個函數聲明
2. 在函數聲明中建立一個新的對象
3. 向對象中添加屬性
4. 將新的對象返回
而後建立變量調用這個函數聲明，直接傳實參就能夠實現函數。
使用工廠方法建立的對象，使用的構造函數都是Object
因此建立的對象都是Object這個類型，致使咱們沒法區分出多種不一樣類型的對象。

構造函數

構造函數是專門用來建立對象的函數
一個構造函數咱們也能夠稱爲一個類
經過一個構造函數建立的對象，咱們稱該對象是這個構造函數的實例（這個類的實例）
經過同一個構造函數建立的對象，咱們稱爲一類對象
構造函數就是一個普通的函數，建立方式和普通函數沒有區別，不一樣的是構造函數習慣上首字母大寫，且他的調用方式不一樣，若是直接調用，它就是一個普通函數；若是使用new來調用，則它就是一個構造函數
在構造函數中不要直接添加一個方法，這樣建立一個實例就會建立一個如出一轍的方法，消耗資源，能夠將方法在全局做用域中定義，而後在構造函數中引用該方法。可是將函數定義在全局做用域，污染了全局做用域的命名空間，並且定義在全局做用域中也很不安全，最好的方式是在構造函數的原型對象中添加該方法。
例子：

function Person(){

}
複製代碼

構造函數的執行流程：
1. 馬上建立一個新的對象
2. 將新的對象做爲函數的上下文對象（this），在構造函數中可使用this來引用新建的對象
3. 執行函數中的代碼
4. 將新建的對象做爲返回值返回
instanceof 用來檢查一個對象是不是一個類的實例
- 語法：對象 instanceof 構造函數
- 若是該對象時構造函數的實例，則返回true，不然返回false
Object是全部對象的祖先，因此任何對象和Object作instanceof都會返回true

原型（prototype）

建立一個函數之後，解析器都會默認在函數中添加一個屬性prototype
prototype屬性指向的是一個對象，這個對象咱們稱爲原型對象。
當函數做爲構造函數使用，它所建立的對象中都會有一個隱含的屬性執行該原型對象。
這個隱含的屬性能夠經過對象.__proto__來訪問。
原型對象就至關於一個公共的區域，凡是經過同一個構造函數建立的對象他們一般均可以訪問到相同的原型對象。
咱們能夠將對象中共有的屬性和方法統一添加到原型對象中，這樣咱們只須要添加一次，就可使全部的對象均可以使用。
當咱們去訪問對象的一個屬性或調用對象的一個方法時，它會先自身中尋找，若是在自身中找到了，則直接使用。若是沒有找到，則去原型對象中尋找，若是找到了則使用，若是沒有找到，則去原型的原型中尋找，依此類推。直到找到Object的原型爲止，Object的原型的原型爲null，若是依然沒有找到則返回undefined
之後咱們建立構造函數時，能夠將這些對象共有的屬性和方法，統一添加到構造函數的原型對象中，這樣不用分別爲每個對象添加，也不會影響到全局做用域，就可使每一個對象都具備這些屬性和方法了。
使用in檢查對象中是否含有某個屬性時，若是對象中沒有可是原型中有，也會返回true。
hasOwnProperty()
- 這個方法能夠用來檢查對象自身中是否含有某個屬性
- 語法：對象.hasOwnProperty("屬性名")
- 使用該方法只有當對象自身中含有屬性時，纔會返回true
當咱們直接在頁面中打印一個對象時，其實是輸出的對象的toString（）方法的返回值，若是咱們但願再輸處對象時不輸出[object Object],能夠爲對象添加一個toString（）方法，或者在構造函數的原型中修改toString（）方法。

垃圾回收（GC）

程序運行過程當中也會產生垃圾，垃圾積攢過多之後，會致使程序運行的速度過慢，因此咱們須要一個垃圾回收的機制，來處理程序運行過程當中產生垃圾。
當一個對象沒有任何的變量或屬性對它進行引用，此時咱們將永遠沒法操做該對象，此時這種對象就是一個垃圾，這種對象過多會佔用大量的內存空間，致使程序運行變慢，因此這種垃圾必須進行清理。
在js中擁有自動的垃圾回收機制，會自動將這些垃圾對象從內存中銷燬，咱們不須要也不能進行垃圾回收的操做
咱們須要作的只是要將再也不使用的對象設置null便可。

數組（Array）

數組也是一個對象，是一個用來存儲數據的對象
和Object相似，可是它的存儲效率比普通對象要高，數組的存儲性能比普通對象要好，在開發中咱們常用數組來存儲一些數據。
數組中保存的內容咱們稱爲元素
數組使用索引（index）來操做元素
索引指由0開始的整數
數組的操做：
- 建立數組（儘可能不要建立非連續的數組）
- var arr = new Array();
- var arr = [];
使用構造函數建立數組時，也能夠同時添加元素，將要添加的元素做爲構造函數的參數傳遞，元素之間使用，隔開

例：

var arr2 = new Array（1,2,3）；
使用typeof檢查一個數組時，會返回object
向數組中添加元素
- 語法：
  
  數組對象[索引] = 值;
- 例子：
  
  arr[0] = 123;
  
  arr[1] = "hello";
讀取數組中的元素
- 語法：
  
  數組 [索引]；
  
  若是讀取不存在的索引，不會報錯而是會返回undefined
使用字面量來建立數組，使用字面量建立數組時，能夠在建立時直接添加元素
- 語法：
  
  var arr = [元素1,元素2....元素N];
- 例子：
  
  var arr = [123,"hello",true,null];
- 當使用字面量建立數組時，只傳遞一個整數時，表示該數組的第一位索引值爲這個整數。可是當使用構造函數建立數組時，只傳遞一個整數，表示該數組的長度爲這個整數。
數組中的元素能夠是任意的數據類型，也能夠是對象，也能夠是函數，也能夠放數組
獲取和修改數組的長度
- 使用length屬性來操做數組的長度
- 獲取長度：
  
  數組.length
- length獲取到的是數組的最大索引+1
- 對於連續的數組，length獲取到的就是數組中元素的個數
修改數組的長度
- 數組.length = 新長度
- 若是修改後的length大於原長度，則多出的部分會空出來
- 若是修改後的length小於原長度，則原數組中多出的元素會被刪除
向數組的最後添加元素
- 數組[數組.length] = 值;
數組的方法
- push()
  - 用來向數組的末尾添加一個或多個元素，並返回數組新的長度
    
    能夠將要添加的元素做爲方法的參數傳遞
  - 語法：數組.push(元素1,元素2,元素N)
- pop()
  - 用來刪除數組的最後一個元素，並返回被刪除的元素
- unshift()
  - 向數組的前邊添加一個或多個元素，並返回數組的新的長度
  - 向前邊插入元素之後，其餘的元素索引會依次調整
- shift()
  - 刪除數組的前邊的一個元素，並返回被刪除的元素
- slice()
  - 能夠從一個數組中截取指定的元素
  - 該方法不會影響原數組，而是將截取到的內容封裝爲一個新的數組並返回
  - 參數：
    1. 截取開始位置的索引（包括開始位置）
    2. 截取結束位置的索引（不包括結束位置）
    - 第二個參數能夠省略不寫，若是不寫則一直截取到最後
    - 參數能夠傳遞一個負值，若是是負值，則從後往前數
- splice()
  - 能夠用來刪除數組中指定元素，並使用新的元素替換，也能夠替換元素，也能夠在指定位置添加元素，該方法會將刪除的元素封裝到新數組中返回
  - 參數：
    1. 刪除開始位置的索引
    2. 刪除的個數
    3. 三個之後，都是替換的元素，這些元素將會插入到開始位置索引的前邊
- reverse()
  - 能夠用來反轉一個數組，它會對原數組產生影響
- concat()
  - 能夠鏈接兩個或多個數組，它不會影響原數組，而是新數組做爲返回值返回
  - 不只能夠傳數組，還能夠傳元素
- join()
  - 能夠將一個數組轉換爲一個字符串，它不會影響原數組，而是將轉換後的字符串做爲返回值返回
  - 參數：
    
    須要一個字符串做爲參數，這個字符串將會做爲鏈接符來鏈接數組中的元素
    
    若是不指定鏈接符則默認使用,
- sort()
  - 能夠對一個數組中的內容進行排序，默認是按照Unicode編碼進行排序，調用之後，會直接修改原數組。
  - 即便對於純數字的數組，使用sort（）排序時，也會按照Unicode編碼進行排序，因此對數字進行排序時，可能會獲得錯誤的結果。
  - 能夠本身指定排序的規則，須要一個回調函數做爲參數：
    
    使用哪一個元素調用不肯定，可是確定的是在數組中a必定在b前邊
    
    瀏覽器會根據回調函數的返回值來決定元素的順序，
    
    若是返回一個大於0的值，則元素會交換位置
    
    若是返回一個小於0的值，則元素位置不變
    
    若是返回一個0，則認爲兩個元素相等，也不交換位置
```
function(a,b){

//升序排列

//return a-b;

//降序排列

return b-a;

}
複製代碼
```
遍歷數組
- 遍歷數組就是將數組中元素都獲取到
- 通常狀況咱們都是使用for循環來遍歷數組：
```
for(var i=0 ; i<數組.length ; i++){

//數組[i]

}
複製代碼
```
使用forEach()方法來遍歷數組（不兼容IE8）
```
```
  數組.forEach(function(value , index , obj){

  });
  ```
複製代碼
```
forEach()方法須要一個回調函數做爲參數，

由咱們建立可是不禁咱們調用的函數，咱們稱爲回調函數

數組中有幾個元素，回調函數就會被調用幾回，每次調用時，都會將遍歷到的信息以實參的形式傳遞進來，咱們能夠定義形參來獲取這些信息。

瀏覽器會在回調函數中傳遞三個參數
```
value:正在遍歷的元素

  index:正在遍歷元素的索引
  
  obj:正在被遍歷的對象
複製代碼
```

函數

call()

call（）方法能夠將實參在對象以後依次傳遞。
apply()
- 這兩個方法都是函數對象的方法須要經過函數對象來調用
- 經過兩個方法能夠直接調用函數，而且能夠經過第一個實參來指定函數中this
- 不一樣的是call是直接傳遞函數的實參而apply須要將實參封裝到一個數組中傳遞。
arguments
- 在調用函數時，瀏覽器每次都會傳遞進兩個隱含的參數：
  1. 函數的上下文對象this
  2. 封裝實參的對象arguments
- arguments是一個類數組元素，能夠經過索引來操做數據，也能夠獲取長度，它用來封裝函數執行過程當中的實參
- arguments.length能夠用來獲取實參的長度,因此即便不定義形參，也能夠經過arguments來使用實參
- arguments中有一個屬性callee表示當前執行的函數對象
this
- this是函數的上下文對象，根據函數的調用方式不一樣會指向不一樣的對象
  1. 以函數的形式調用時，this是window
  2. 以方法的形式調用時，this是調用方法的對象
  3. 以構造函數的形式調用時，this是新構造的那個對象
  4. 使用call和apply調用時，this是指定的那個對象
  5. 在全局做用域中this表明window

Date對象

在js中使用Date對象表示一個時間
若是直接使用構造函數建立一個Date對象，則會封裝爲當前代碼執行的時間。
建立一個指定的時間對象，須要在構造函數中傳遞一個表示時間的字符串做爲參數
日期的格式月份/日/年時：分：秒
getDate（）獲取當前日期對象是幾日
getDay（）獲取當前日期對象是周幾，0表示週日，1表示週一
getMouth（）獲取當前日期對象的月份，會返回一個0-11的值，0表示1月
getFullyear（）獲取當前日期對象以四位數字返回年份
getTime（）獲取當前日期對象的時間戳，時間戳指的是從格林威治標準時間的1970年1月1日，0分0秒，到當前日期所花費的毫秒數（1秒=1000毫秒）計算機底層在保存時間時使用都是時間戳。
Date.now（）獲取當前的時間戳

Math

Math和其餘的對象不一樣，他不是一個構造函數
它屬於一個工具類不用建立對象，它裏邊封裝了數學運算相關的屬性和方法
Math.abs（）能夠計算一個數的絕對值
Math.ceil（）能夠對一個數進行向上取整，小數位只要有值就自動進1
Math.floor（）能夠對一個數進行向下取整，小數部分會被舍掉
Math.round（）能夠對一個數進行四捨五入取整
Math.random（）能夠用來生成一個0-1之間的隨機數
Math.max（）能夠獲取多個值中的最大值
Math.min（）能夠獲取多個值中的最小值
Math.pow(x,y)返回x的y次冪
生成一個0-x之間的隨機數

Math.round(Math.random()*x)
生成一個x-y之間的隨機數

Math.round(Math.random()*（y-x）+x)

包裝類

在JS中爲咱們提供了三個包裝類：

String() Boolean() Number()
經過這三個包裝類能夠建立基本數據類型的對象

例子：

var num = new Number(2);

能夠將基本數據類型字符串轉換爲String對象

var str = new String("hello");

能夠將基本數據類型的數字轉換爲Number對象

var bool = new Boolean(true);

能夠將基本數據類型的布爾值轉換爲Boolean對象
可是在實際應用中千萬不要這麼幹。若是使用基本數據類型的對象，在作一些比較時可能會帶來一些不可預期的結果
當咱們去操做一個基本數據類型的屬性和方法時，解析器會臨時將其轉換爲對應的包裝類，而後再去操做屬性和方法，操做完成之後再將這個臨時對象進行銷燬。

字符串的相關的方法

字符串在底層是以字符數組的形式保存的

length
- 獲取字符串的長度
charAt()
- 根據索引獲取指定的字符
charCodeAt()
- 根據索引獲取指定的字符編碼
String.fromCharCode()
- 根據字符編碼獲取字符
concat（）
- 能夠用來鏈接兩個或多個字符串
indexOf()

lastIndexOf()
- 從一個字符串中檢索指定內容
- 須要一個字符串做爲參數，這個字符串就是要檢索的內容，
  
  若是找到該內容，則會返回其第一次出現的索引，若是沒有找到則返回-1。
- 能夠指定一個第二個參數，來表示開始查找的位置
- indexOf()是從前向後找
- lastIndexOf()是從後向前找
slice()
- 能夠從一個字符串中截取指定的內容，並將截取到內容返回，不會影響原變量
- 參數：
  
  第一個：截取開始的位置（包括開始）
  
  第二個：截取結束的位置（不包括結束）
- 能夠省略第二個參數，若是省略則一直截取到最後
- 能夠傳負數，若是是負數則從後往前數
substr()
- 和slice()基本一致，不一樣的是它第二個參數不是索引，而是截取的數量
substring()
- 和slice()基本一致，不一樣的是它不能接受負值做爲參數，若是設置一個負值，則會自動修正爲0，
- substring()中若是第二個參數小於第一個，自動調整位置
toLowerCase()
- 將字符串轉換爲小寫並返回
toUpperCase()
- 將字符串轉換爲大寫並返回
split()
- 能夠根據指定內容將一個字符串拆分爲一個數組，這個方法即便不全局匹配也會所有拆分
- 若是傳遞一個空串參數，則每一個字符串都會變成數組中的元素
- 參數：
- 須要一個字符串做爲參數，將會根據字符串去拆分數組
- 能夠接收一個正則表達式，此時會根據正則表達式去拆分數組
match()
- 能夠將字符串中和正則表達式匹配的內容提取出來
- 默認狀況下match（）只會找到第一個符合要求的內容，找到之後就中止檢索
  
  能夠設置正則表達式爲全局匹配模式，這樣就會匹配到全部的內容
- 參數：
- 正則表達式，能夠根據該正則表達式將字符串中符合要求的內容提取出來，而且封裝到一個數組中返回
replace()
- 能夠將字符串中指定內容替換爲新的內容
- 參數：
- 第一個：被替換的內容，能夠是一個正則表達式
- 第二個：替換的新內容
search()
- 能夠搜索字符串中是否有指定內容
  
  search（）只會查找第一個，及時設置全局匹配也沒用
- 若是搜索到指定內容，則會返回第一次出現的索引，若是沒有搜索到返回-1
- 能夠根據正則表達式去字符串中查找指定的內容
- 參數：
  
  正則表達式，將會根據該表達式查詢內容，
  
  而且將第一個匹配到的內容的索引返回，若是沒有匹配到任何內容，則返回-1。

正則表達式

正則用來定義一些字符串的規則，程序能夠根據這些規則來判斷一個字符串是否符合規則，也能夠將一個字符串中符合規則的內容提取出來。

使用typeof檢查正則對象，會返回object
建立正則表達式
使用構造函數的方式建立更加靈活

var reg = new RegExp("正則","匹配模式");
使用字面量的方式建立更加簡單

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
- 任意數字[0-9]
\D
- 除了數字[^0-9]
\s
- 空格
\S
- 除了空格
\b
- 單詞邊界
\B
- 除了單詞邊界
^ 表示開始

$ 表示結束
方法：

test()
- 能夠用來檢查一個字符串是否符合正則表達式
- 若是符合返回true，不然返回false
注意：使用構造函數時，因爲它的參數是一個字符串，而\是字符串中轉義字符，若是要使用\則須要使用\\來代替。
正則表達式舉例：
1. 開頭或者結尾是a / ^a | a$/
2. 正則表達式表示手機號
手機號的規則：
```
1. 以1開頭 
  2. 第二位3-9任意數字 
  3. 三位之後任意數字9個
複製代碼
```
正則：/^1[3-9][0-9]{9}$/
1. 去除字符串中先後的空格
  
  / ^\s* |\s*$/g
2. 正則表達式表示電子郵件
任意字母數字下劃線 .任意字母數字下劃線@ 任意字母數字 .任意字母（2-5位）

/^\w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}$/

js中的DOM

DOM,Document Object Model文檔對象模型，dom的做用是經過js操做網頁的

文檔：表示的是整個HTML網頁文檔
對象：表示將網頁中的每個部分都轉換爲了一個對象。
模型：使用模型來表示對象之間的關係，這樣方便咱們獲取對象。
節點：Node，是構成網頁的最基本的組成部分，網頁中的每個部分都是一個節點。

經常使用節點分爲四類：

文檔節點：整個HTML文檔
元素節點：HTML文檔中的HTML標籤
屬性節點：元素的屬性
文本節點： HTML標籤中的文本內容

瀏覽器已經爲咱們提供文檔節點對象這個對象是window屬性，能夠在頁面中直接使用，文檔節點表明的是整個網頁。

經過id屬性獲取一個元素節點對象

document.getElementById();
經過標籤名獲取一組元素節點對象

getElementsByTagName();

這個方法會給咱們返回一個類數組對象，全部查詢到的元素都會封裝到對象中。即便查詢到的元素只有一個，也會封裝到數組中返回。
經過name屬性獲取一組元素節點對象

getElementsByName()
對象名.innerHTML 經過這個屬性能夠獲取到元素內部的HTML代碼，對於自結束標籤，這個屬性沒有意義。
innerText該屬性能夠獲取到元素內部的文本內容，它和innerHTML相似，不一樣的是它會自動將html去除
若是須要讀取元素節點屬性，直接使用元素.屬性名。注意：class屬性不能採用這種方式。讀取class屬性時須要使用元素.className

js中的事件

事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。js和HTML之間的交互是經過事件實現的。
處理事件的方式
- 能夠在事件對應的屬性中設置一些js代碼，這樣當事件被觸發時，這些代碼將會執行。這種寫法稱爲結構和行爲耦合，不方便維護，不推薦使用。
- 能夠爲按鈕的對應事件綁定處理函數的形式來響應事件。這樣當事件被觸發時，其對應的函數將會被調用。
元素名.事件 = function（）{}
例如，爲id爲btn的button綁定一個單擊事件

btn.onclick = function（）{

        alert("I'm button");

        };
複製代碼

像這種爲單擊事件綁定的函數，稱爲單機響應函數。

瀏覽器在加載一個頁面時，是按照自上向下的順序加載的，讀取到一行就運行一行，若是將script標籤寫到頁面的上邊，在代碼執行時，頁面尚未加載，DOM對象也沒有加載，會致使沒法獲取到DOM對象。
onload事件會在整個頁面加載完成以後被觸發，爲window綁定一個onload事件，該事件對應的響應函數將會在頁面加載完成以後執行，這樣能夠確保咱們的代碼執行時全部的DOM對象已經加載完畢了。

window.onload=function（）{ }；

js中DOM查詢

獲取元素節點的子節點
經過具體的元素節點調用
1. getElementsByTagName()
- 方法，返回當前節點的指定標籤名後代節點
1. childNodes
- 屬性，表示當前節點的全部子節點
childNodes屬性會獲取包括文本節點在內的全部節點，根據DOM標籤，標籤間空白也會當成文本節點，注意：在IE8及如下的瀏覽器中，不會將空白文本當成子節點
1. firstChild
- 屬性，表示當前節點的第一個子節點（包括空白文本節點）
1. lastChild
- 屬性，表示當前節點的最後一個子節點
1. children
- 屬性，能夠獲取當前元素的全部子元素
1. firstElementChild
不支持IE8及如下的瀏覽器，若是須要兼容他們儘可能不要使用。
- 屬性，獲取當前元素的第一個子元素
獲取父節點和兄弟節點
經過具體的節點調用
1. parentNode
- 屬性，表示當前節點的父節點
1. previousSibling
- 屬性，表示當前節點的前一個兄弟節點（也可能獲取到空白的文本）
1. nextSibling
- 屬性，表示當前節點的後一個兄弟節點
1. previousElementSibling
- 屬性，獲取前一個兄弟元素，IE8及如下不支持

定義一個函數，專門用來爲指定元素綁定單擊響應函數

參數：

idstr 要綁定單擊響應函數的對象的id屬性值

  fun 事件的回調函數，當單擊元素時，該函數將會被觸發
複製代碼

文本框的value屬性值，就是文本框中填寫的內容
文本節點的內容是文本的Nodevalue
在事件的響應函數中，響應函數是給誰綁定的，this就是誰
在document中有一個屬性body，他保存的是body的引用

document.body

document.documentElement保存的是html根標籤

document.all表明的是頁面中的全部元素
根據元素的class屬性值查詢一組元素節點對象

document.getElementsByClassName()能夠根據class屬性值獲取一組元素節點對象，可是該方法不支持IE8及如下瀏覽器。
document.querySelector()
- 須要一個選擇器的字符串做爲參數，能夠根據一個css選擇器來查詢一個元素節點對象
- 雖然IE8中沒有getElementsByClassName(),可是可使用querySelector()代替
- 使用該方法總會返回惟一的一個元素，若是知足條件的元素有多個，那麼它只會返回第一個。
document.querySelectorAll()
- 該方法和querySelector（）用法相似，不一樣的是它會將符合條件的元素封裝到一個數組中返回
- 即便符合條件的元素只有一個，他也會返回數組。
document.createElement()
- 能夠用於建立一個元素節點對象
- 它須要一個標籤名做爲參數，將會根據該標籤名建立元素節點對象，並將建立好的對象做爲返回值返回。
document.createTextNode()
- 能夠用來建立一個文本節點對象
- 須要一個文本內容做爲參數，將會根據該內容建立文本節點，並將新的節點返回。
appendChild()
- 向一個父節點中添加一個新的子節點
- 用法：父節點.appendChild(子節點)；
insertBefore（）
- 能夠在指定的子節點前插入新的子節點
- 語法： 父節點.insertBefore(新節點，舊節點)；
replaceChild()
- 可使用指定的子節點替換已有的子節點
- 語法： 父節點.replaceChild(新節點，舊節點)；
removeChild()
- 能夠刪除一個子節點
- 語法： 父節點.removeChild（子節點）；
子節點.parentNode.removeChild(子節點)；更方便，能夠不用知道子節點的父節點是誰
使用innerHTML也能夠完成DOM的增刪改的相關操做，通常咱們會兩種方式結合使用。
點擊超連接之後，超連接會跳轉頁面，這個是超連接的默認行爲，可是此時咱們不但願出現默認行爲，能夠經過在響應函數的最後return false來取消默認行爲。
confirm()用於彈出一個帶有確認和取消按鈕的提示框
- 須要一個字符串做爲參數，該字符串將會做爲提示文字顯示出來
- 若是用戶點擊確認則會返回true，若是點擊取消則返回false
for循環會在頁面加載以後當即執行，而響應函數會在觸發事件時才執行，當響應函數執行時，for循環早已執行完畢。

經過js修改元素的樣式

語法：元素.style.樣式名 = 樣式值
注意：若是css的樣式名中含有-，這種名稱在js中是不合法的，例如background-color，須要將這種樣式名修改成駝峯命名法，去掉-，而後將-後的字母大寫。
咱們經過style屬性設置的樣式都是內聯樣式，而內聯樣式有較高的優先級，因此經過js修改的樣式每每會當即顯示。可是若是在樣式中寫了！important，則此時樣式會有最高的優先級，即便經過js也不能覆蓋該樣式，此時將會致使js修改樣式失效，因此儘可能不要爲樣式添加！important
讀取元素的樣式
- 語法： 元素.style.樣式名
- 經過style屬性設置和讀取的都是內聯樣式，沒法讀取樣式表中的樣式。
獲取元素的當前顯示的樣式
- 語法：元素.currentStyle.樣式名
- 它能夠用來讀取當前的元素正在顯示的樣式。若是當前元素沒有設置樣式，則獲取它的默認值
- currentStyle只有IE瀏覽器支持，其餘的瀏覽器不支持
在其餘的瀏覽器中可使用getComputedStyle（）這個方法來獲取元素當前的樣式，這個方法是window的方法，能夠直接使用

須要兩個參數

第一個：要獲取樣式的元素

第二個：能夠傳遞一個僞元素，通常都傳null

該方法會返回一個對象，對象中封裝了當前元素對應的樣式

能夠經過對象.樣式名來讀取樣式

若是獲取的樣式沒有設置，則會獲取到真實的值，而不是默認值，好比：沒有設置width，它不會獲取到auto，而是一個長度。

該方法不支持IE8及如下的瀏覽器。

經過currentStyle和getComputedStyle（）讀取到的樣式都是隻讀的。不能修改，若是要修改必須經過style屬性
定義一個函數，用來獲取指定元素的當前的樣式

參數：

obj 要獲取樣式的元素

name 要獲取的樣式名

function getStyle(obj,name){
    if(window.getComputedStyle){
        return getComputedStyle(obj,null)[name];
    }else{
        return obj.currentStyle[name];
    }
}
複製代碼

if判斷中寫window.getComputedStyle是由於，不加window，它是一個變量，須要在做用域中尋找，加了window，它變成了對象的屬性，變量若是找不到會報錯，而屬性找不到會返回undefined

clientWidth,clientHeight
- 這兩個屬性能夠獲取元素的可見寬度和高度
- 這些屬性都是不帶px的，返回都是一個數字，能夠直接進行計算。
- 會獲取元素寬度和高度，包括內容區和內邊距。
- 這些屬性都是隻讀的，不能修改。
offsetWidth,offsetHeight
- 獲取元素的整個的寬度和高度，包括內容區，內邊距和邊框
offsetParent
- 能夠用來獲取當前元素的定位父元素。
- 會獲取到離當前元素最近的開啓了定位的祖先元素
- 若是全部的祖先元素都沒有開啓定位，則返回body
offsetLeft
- 當前元素相對於其定位父元素的水平偏移量
offsetTop
- 當前元素相對於其定位父元素的垂直偏移量
scrollWidth，scrollHeight
- 能夠獲取元素整個滾動區域的寬度和高度。
scrollLeft
- 能夠獲取水平滾動條滾動的距離
scrollTop
- 能夠獲取垂直滾動條滾動的距離
當知足scrollHeight - scrollTop == clientHeight

說明垂直滾動條滾動到底了
當知足scrollWidth - scrollLeft == clientWidth

說明水平滾動條滾動到底了
若是爲表單項添加disabled="disabled",則表單項變成不可用的狀態
onscroll
- 該事件會在元素的滾動條滾動時觸發
disabled屬性能夠設置一個元素是否禁用

若是設置爲true，則元素禁用

若是設置爲false，則元素可用

事件對象

當事件的響應函數被觸發時，瀏覽器每次都會將一個事件對象做爲實參傳遞進響應函數，在事件對象中封裝了當前時間相關的一切信息，好比，鼠標的座標，鍵盤哪一個按鍵被按下，鼠標滾輪滾動的方向
onmousemove
- 該事件將會在鼠標在元素中移動時被觸發
在IE8中，響應函數被觸發時，瀏覽器不會傳遞事件對象，在IE8及如下的瀏覽器中，是將事件對象做爲window對象的屬性保存的
兼容火狐，IE時

if（！event）{

    event = window.event；

}

複製代碼

或者

event = event || window.event;來解決事件對象的兼容性問題

clientX能夠獲取鼠標指針的水平座標
clientY能夠獲取鼠標指針的垂直座標

用於獲取鼠標在當前的可見窗口的座標
div的偏移量是相對於整個頁面的

pageX和pageY能夠獲取鼠標相對於當前頁面的座標，可是這兩個屬性在IE8中不支持，因此若是須要兼容IE8，則不要使用。
chorme認爲瀏覽器的滾動條是body的，能夠經過body.scrollTop來獲取
火狐等瀏覽器認爲瀏覽器的滾動條時HTML的

事件的冒泡（Bubble）

所謂的冒泡指的是事件的向上傳導，當後代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發。
在開發中大部分狀況下冒泡都是有用的，若是不但願發生事件冒泡能夠經過事件對象來取消冒泡。
取消冒泡

能夠將事件對象的cancelBubble設置爲true

事件的委派

指將事件統一綁定給元素的共同的祖先元素，這樣後代元素上的時間觸發時，會一直冒泡到祖先元素，從而經過祖先元素的響應函數來處理事件。
事件的委派利用了冒泡，經過委派能夠減小事件綁定的次數，提升程序的性能。

例：爲每個超連接都綁定一個單擊響應函數，這種操做比較麻煩，

並且這些操做智能爲已有的超連接設置事件，而新添加的超連接必須從新綁定。

咱們但願，只綁定一次事件，便可應用到多個元素上，即便元素時後添加的

咱們能夠嘗試將其綁定給元素的共同的祖先元素。

target

event中target表示的觸發事件的對象。

使用對象.事件=函數的形式綁定響應函數

它只能同時爲一個元素的一個事件綁定一個響應函數，不能綁定多個，若是綁定了多個，則後邊會覆蓋掉前邊的
addEventListener()
- 經過這個方法也能夠爲元素綁定響應函數
- 參數：
  1. 事件的字符串，不要on
  2. 回調函數，當事件觸發時該函數會被調用
  3. 是否在捕獲階段觸發事件，須要一個布爾值，通常都傳false
使用addEventListener()能夠同時爲一個元素的相同事件同時綁定多個響應函數，這樣當事件被觸發時，響應函數將會按照函數的綁定順序執行
- 這個方法不支持IE8及如下的瀏覽器

attachEvent（）
- 在IE8中可使用attachEvent（）來綁定事件，
- 參數
  1. 事件的字符串，要on
  2. 回調函數
- 這個方法也能夠同時爲一個事件綁定多個處理函數，不一樣的是他是後綁定的先執行，執行順序和addEventListener()相反
定義一個函數，用來爲指定元素綁定響應函數

addEventListener（）中的this，是綁定事件的對象

attachEvent（）中的this，是window

參數：

obj 要綁定事件的對象

eventStr 事件的字符串(不要on)

callback 回調函數

function bind（obj , eventStr , callback）{


    if(obj.addEventListener){

        //大部分瀏覽器兼容的方式

        obj.addEventListener(eventStr , callback , false);

    }else{

        // this是誰由調用方式決定，callback.call(obj)

        //IE8及如下

        obj.attachEvent(「on」+eventStr ,function(){

        //在匿名函數中調用回調函數

            callback.call(obj);

        });

    }

}
複製代碼

事件的傳播

關於事件的傳播網景公司和微軟公司有不一樣的理解。
微軟公司認爲事件應該由內向外傳播，也就是當事件觸發時，應該先觸發當前元素上的事件，

而後再向當前元素的祖先元素上傳播，也就是說事件應該在冒泡階段執行。

網景公司認爲事件應該是由外向內傳播的，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件。而後再向內傳播給後代元素。
W3C綜合了兩個公司的方案，將事件傳播分紅了三個階段
1. 捕獲階段
- 在捕獲階段時從最外層的祖先元素，向目標元素進行事件的捕獲，可是默認此時不會觸發事件。
1. 目標階段
- 事件捕獲到目標元素，捕獲結束開始在目標元素上觸發事件。
1. 冒泡階段
- 事件從目標元素向它的祖先元素傳遞，依次觸發祖先元素上的事件。
若是但願在捕獲階段就觸發事件，能夠將addEventListener()的第三個參數設置爲true

通常狀況下咱們不會但願在捕獲階段觸發事件，因此這個參數通常都是false
IE8及如下的瀏覽器中沒有捕獲階段。
拖拽的流程
1. 當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown
2. 當鼠標移動式被拖拽元素跟隨鼠標移動 onmousemove
3. 當鼠標鬆開時，被拖拽元素固定在當前位置 onmouseup
當拖拽一個網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容，此時會致使拖拽功能的異常，這個是瀏覽器提供的默認行爲，若是不但願這個行爲，則能夠經過return false來取消默認行爲，可是這招對IE8不起做用
setCapture()
- 只有IE支持，可是在火狐中調用時不會報錯，而若是使用Chrome調用，會報錯。
- 當調用一個元素的setCapture()方法之後，這個元素將會把下一次全部的鼠標按下相關的時間捕獲到自身上，取消對事件的捕獲releaseCapture()
滾輪的事件

onmousewheel鼠標滾輪滾動的事件，會在滾輪滾動時觸發，可是火狐不支持該屬性

在火狐中須要使用DOMMouseScroll 來綁定滾動事件

注意該事件須要經過addEventListener（）函數來綁定
判斷鼠標滾輪滾動的方向

event.wheelDelta 能夠獲取鼠標滾輪滾動的方向，往上滾爲正值，往下滾爲負值

火狐中不支持wheelDelta這個屬性

在火狐中使用event.detail來獲取滾動的方向，向上滾爲負值，向下滾爲正值

當滾輪滾動時，若是瀏覽器有滾動條，滾動條會隨之滾動，這是瀏覽器的默認行爲，若是不但願發生，則能夠取消默認行爲return false

使用addEventListener（）方法綁定響應函數，取消默認行爲時不能使用return false

須要使用event來取消默認行爲event.preventDefault（），可是IE8不支持event.preventDefault（）；若是直接調用會報錯
鍵盤事件

onkeydown
- 按鍵被按下
- 對於onkeydown來講，若是一直按着某個按鍵不鬆手，則事件會一直觸發
- 當onkeydown連續觸發時，第一次和第二次之間會間隔稍微長一點，其餘的會很是的快，這種設計是爲了防止誤操做的發生。
onkeyup
- 按鍵被鬆開
鍵盤事件通常都會綁定給一些能夠獲取到焦點的對象或者是document

能夠經過keyCode來獲取按鍵的編碼

經過它能夠判斷那個按鍵被按下

除了keyCode，事件對象中還提供了幾個屬性

altKey

ctrlKey

shiftKey
- 這個三個用來判斷alt ctrl 和shift 是否被按下，若是按下則返回true，不然返回false
在文本框中輸入內容，屬於onkeydown的默認行爲

若是在onkeydown中取消了默認行爲，則輸入的內容，不會出如今文本框中

BOM

瀏覽器對象模型
在BOM中爲咱們提供了一組對象，用來完成對瀏覽器的操做
BOM對象

Window
- 表明的是整個瀏覽器的窗口，同時window也是網頁中的全局對象
Navigetor
- 表明的是當前瀏覽器的信息，經過該對象能夠來識別不一樣的瀏覽器
- 因爲歷史緣由，Navigator對象中的大部分屬性已經不能幫助咱們識別瀏覽器了
- 通常咱們只會使用userAgent來判斷瀏覽器的信息
userAgent是一個字符串，這個字符串中包含有用來描述瀏覽器信息的內容，

不一樣的瀏覽器會有不一樣的userAgent

在IE11中已經將微軟和IE相關的標識都已經去除了，因此咱們基本已經不能經過userAgent來識別一個瀏覽器是不是IE
- 若是經過userAgent不能判斷，還能夠經過一些瀏覽器中特有的對象，來判斷瀏覽器的信息，好比ActiveXObject，能夠經過ActiveXObject in window來判斷
Location
- 表明的是當前瀏覽器的地址欄信息，經過Location 能夠獲取地址欄信息，或者操做瀏覽器跳轉頁面
- 若是直接打印location,則能夠獲取到地址欄的信息（當前頁面的完整路徑）
- 若是直接將location屬性修改成一個完整的路徑，或相對路徑，則頁面會自動跳轉到該路徑，而且會生成相應的歷史記錄
- assign（）
用來跳轉到其餘的頁面，做用和直接修改location同樣
- reload（）
- 用來從新加載當前頁面，做用和刷新按鈕同樣
- 若是在方法中傳遞一個true 做爲參數，則會強制清空緩存刷新頁面
- replace（）
- 可使用一個新的頁面替換當前頁面，調用完畢也會跳轉頁面，不會生成歷史記錄不能使用回退鍵回退
- History
- 表明瀏覽器的歷史記錄，能夠經過該對象來操做瀏覽器的歷史記錄
- 因爲隱私緣由，該對象不能獲取到具體的歷史記錄，只能操做瀏覽器向前或向後翻頁。並且該操做只在當次訪問時有效。
- length
- 屬性，能夠獲取到當前訪問的連接數量
- back（）
- 能夠用來回退到上一個頁面，做用和瀏覽器的回退按鈕同樣
- forward（）
- 能夠跳轉到下一個頁面，做用和瀏覽器的前進按鈕同樣
- go（）
- 能夠用來跳轉到指定的頁面
他須要一個整數做爲參數

1：表示向前跳轉一個頁面至關於forward（）

2：表示向前跳轉兩個頁面

-1：表示向後跳轉一個頁面

-2：表示向後跳轉兩個頁面
- Screen
- 表明的是用戶屏幕的信息，經過該對象能夠獲取到用戶的顯示器的相關的信息
這些BOM對象在瀏覽器中都是做爲window對象的屬性保存的。
能夠經過window對象來使用，也能夠直接使用。
JS的程序的執行速度是很是很是快的，若是但願一段程序能夠每間隔一段時間執行一次，可使用定時調用
setInterval()
- 定時調用
- 能夠將一個函數，每隔一段時間執行一次
- 參數：
1. 回調函數，該函數每隔一段時間被調用一次
2. 每次調用間隔的時間，單位是毫秒
- 返回值：
返回一個number類型的數據

這個數字用來做爲定時器的惟一標識
clearInterval（）能夠用來關閉一個定時器
- 方法中須要一個定時器的標識做爲參數，這樣將關閉標識對應的定時器
- clearInterval()能夠接受任意參數
若是參數是一個有效的定時器的標識，則中止對應的定時器

若是參數不是一個有效的標識，則什麼也不作

當把定時器放在按鈕的單擊響應函數中時，每點擊一次按鈕，就會開啓一個定時器，點擊屢次就會開啓多個定時器，這就致使圖片的切換速度過快，而且咱們只能關閉最後一次開啓的定時器，因此在開啓定時器以前，須要將當前元素上的其餘定時器關閉clearInterval（timer）；
延時調用setTimeout（function（）{}，時間）；
- 延時調用一個函數不立刻執行，而是隔一段時間之後再執行，並且只會執行一次
- 延時調用和定時調用的區別，定時調用會執行屢次，而延時調用只會執行一次
使用clearTimeout()來關閉一個延時調用
延時調用和定時調用其實是能夠相互代替的，在開發中能夠根據本身須要去選擇
經過style屬性來修改元素的樣式，每修改一個樣式，瀏覽器就須要從新渲染一次頁面，這樣的執行的性能是比較差的，並且這種形式當咱們要修改多個樣式時也不太方便。如何用一行代碼，能夠同時修改多個樣式？
- 能夠經過修改元素的class屬性來間接的修改樣式，這樣一來，咱們只須要修改一次，便可同時修改多個樣式，瀏覽器只須要從新渲染頁面一次，性能比feedback較好，而且這種方式，能夠是表現和行爲進一步的分離。

JSON

js中的對象只有js本身認識，其餘的語言都不認識

-JSON就是一個特殊格式的字符串，這個字符串能夠被任意的語言所識別。

而且能夠轉換爲任意語言的對象，JSON在開發中主要用來數據的交互

JSON
- JavaScript Object Notation JS對象表示法
- JSON和JS對象的格式同樣，只不過JSON字符串中的屬性名必須加雙引號

其餘的和JS語法一致

JSON分類：

1. 對象 { }

2. 數組 [ ]
複製代碼

JSON中容許的值，

1. 字符串

2. 數值

3. 布爾值

4. null

5. 對象

6. 數組
複製代碼

將JSON字符串轉換爲JS中的對象

在JS中，爲咱們提供了一個工具類，就叫JSON

這個對象能夠幫助咱們將一個JSON轉換爲JS對象，也能夠將一個JS對象轉換爲JSON

JSON.parse（）

- 能夠將`JSON`字符串轉換爲`js`對象

- 它須要一個`JSON`字符串做爲參數，會將該字符串轉換爲`js`對象
複製代碼

JSON.stringify（）

- 能夠將一個`js`對象轉換爲`JSON`字符串

- 須要一個`js`對象做爲參數，會返回一個`JSON`字符串

`JSON`這個對象在IE7及如下的瀏覽器中不支持，因此在這些瀏覽器中調用時會報錯
複製代碼

eval（）

- 這個函數能夠用來執行一段字符串形式的js代碼，並將執行結果返回

- 若是使用`eval（）`執行的字符串中含有{ }，它會將{ }當成是代碼塊

若是不但願將其當成代碼塊解析，則須要在字符串先後各加一個（）

- 這個函數的功能很強大，能夠直接執行一個字符串中的js代碼，可是在開發中儘可能不要使用，首先是它的執行性能比較差，而後它還具備安全隱患。
複製代碼

若是須要兼容IE7及如下的JSON操做，則能夠經過引入一個外部的js文件來處理