JavaScript 基本知識點整理

JavaScript 基本知識點整理

1.導入JS的三種方式:

a) 在HTML標籤中,直接內嵌JS,如:<button οnclick=”func()”></button>;

b) 在HTML頁面中使用<script></script>包裹JS代碼,如:<script>JS代碼</script>

c) 引入外部的JS文件,如<script  language=”javascript”  src=”js路徑”></script>

2.JS常用的數據類型:

a) String字符串  ”str”  ’str’;

b) Boolean 布爾類型  true / false

c) Number  數值

d) Object  對象

e) Null  特殊的空值

f) Undefined  未定義(var聲明瞭,但未賦值)

3.常用的數值函數:

a) isNaN(): 檢測一個變量是否是非數值.先用Number()函數嘗試轉換,如果不能轉爲數值,則爲NaN

b) Number(): 轉換任何數據類型爲數值, 字符串含有其它字符,不能轉:null->0  true->1  false->0  純數值字符串=相應的數字  空字符串=0  undefined->NaN

c) parseInt(): 將字符串轉爲整數類型: 純數值=數值(會抹去小數點)  空字符串=NaN  包含其它字符的字符串,會截取第一個非數值字符串前面的部分;  parseInt()只能轉字符串,轉其它類型,全是NaN;

d) parseFloat(): 將字符串轉爲浮點數類型,不抹除小數點,其它作用類同於parseInt();

4.JS中運算符的優先級:

()	小括號最高
!  ++  --	單目運算符
*  /  %
+  -
>  <  >=  <=
==  !=
&&	&&和||同時存在,&&比||高
||
=  +=  -=  *=  /=	最低的是各種賦值

5.if結構  循環結構  支持的判斷結果:

a) Boolean:  false假;  true真;

b) String: 空字符串爲假;  一切非空字符串爲真;

c) Number:  0爲假;  一切非0爲真;

d) Null / Undefined / NaN : 全爲假;

e) Object: 全爲真;

6.JS中的DOM:

a) Document.getElementById/Name/TagName/ClassName(); // 取元素的節點;

b) GetAttribute(“屬性名”); // 獲得屬性節點;

c) SetAttribute(“屬性名”,”屬性值”); // 設置屬性節點;

d) InnerText[=”文本”]; // 獲得/設置 文本節點;

e) InnerHTML[=”html代碼”]; // 獲得/設置 元素內部的html代碼;

f) tagName: 獲得當前節點的標籤名;

6.1修改樣式系列:

.style.樣式 = “樣式值”;

.style.cssText = “多個CSS鍵值對”;

.className = “class名稱”;

6.2 層次節點系列:

1.childNodes: (數組)獲取元素的所有子節點; (.children);

2.firstChild: 獲取元素的第一個子節點; (firstElementChild);

3.lastChild: 獲取語速的最後一個子節點; (lastElementChild);

4.parentNode: 獲取當前節點的父節點;

5.previousSibling: 獲取當前節點的前一個兄弟節點;

6.nextSibling: 獲取當前節點的後一個兄弟節點;

7.Attributes: 取到所有屬性節點[數組];

6.3 創建新增節點:

1..createElement("標籤名”); 創建一個節點;

2..setAttribute(“ ”,” ”); 給新節點設置屬性;

3.父節點.appendChild(node); 父節點最後追加新節點;

4.父節點.insertBefore(newNode,oldNode); 在父節點的oldNode之前插入newNode;

5.需克隆的節點.cloneNode(true/false); 默認爲false: 只克隆當前節點,不克隆子節點; true: 克隆所有子節點.

6.4 刪除替換節點:

1.父節點.removeChild(childNode); 從父節點刪除子節點;

2.父節點.replaceChild(newNode,oldNode); 用newNode 替換掉oldNode;

6.5 HTML-DOM 操作表格

1.表格對象:

a) Rows: 獲取到所有行對象,數組格式;

b) insertRow(index); 在index後面插入一個新行;

c) deleteRow(index); 刪除表格第index+1行;

2.行對象:

a) Cells: 獲取到所有的單元格對象,數據格式;

b) rowIndex: 返回當前行的索引值;

c) insertCell(index); 在index個單元格後,插入一個新單元格;

d) deleteCell(index): 刪除index+1個單元格;

3.單元格對象:

a) cellIndex: 返回當前單元格索引;

b) innerText / innerHTML: 設置單元位置內容

7.鍵盤事件 & 確定鍵盤按鍵

a) 鍵盤事件: keyDown / keyPress / keyUp ;

b) 長按時: 不斷的執行keyDown / keyPress,  有keyDown,不一定有keyUp, 當按鍵時,鼠標將焦點點走,就沒有keyUp事件

c) 確認一個按鍵的方法:

Dom.keyDown = function(e) {

Var evn = e || window.event;

Var code = evn.keyCode || evn.charCode || evn.which;

If (code == 13){ 回車 }};

d)  判斷組合鍵原理: 聲明多個組合鍵對應的標誌變量(全局變量,默認爲0),當按鍵keyDown時,對應的標誌變量爲1; 當按鍵keyUp時,對應的標誌變量置0; 通過判斷多個標誌變量是否同時爲1,進而判斷按鍵是否同時按下;

8. 事件冒泡 & 事件捕獲 & 阻止默認事件

8.1 事件冒泡:

當觸發某DOM元素的事件時,如果祖先元素存在同類型事件, 則事件會從當前元素開始,逐個往上觸發所有祖先元素的同類型事件;

8.1.1 如何添加事件,會導致事件冒泡:

DOM0模型,均爲事件冒泡;

IE中使用.attachEvent()添加的事件,均爲冒泡;

其它瀏覽器,.addEventListener()添加的事件,當第三個參數爲false時,爲冒泡;

8.1.2 如何阻止事件冒泡:

IE瀏覽器中: 將e.cancelBubble屬性設爲true;

其他瀏覽器: 調用e.stopPropagation()方法;

8.2 事件捕獲:

與冒泡相反,當觸發某個元素事件時,會從根節點開始,逐個向下觸發祖先元素的同類型事件,直到當前DOM爲止;

8.2.1 如何產生事件捕獲:

使用addEventListener()添加事件,並且將第三個參數設置爲true;

8.3 阻止各種標籤的默認事件:

IE瀏覽器: 將e.returnValue屬性設爲false;

其他瀏覽器: 調用e.preventDefault();方法;

9. JS中數組的常用方法:

a) .splice(index,num); 從index開始,刪除num個元素;

b) .push(n); 數組最後插入一個元素;

c) .pop(); 刪除數組最後一個元素;

d) .unshift(); 在數組第0位插入一個元素

e) .shift(); 刪除數組最後一個元素;

f) .sort([function]); 默認按照ASCII碼值排序,可以傳入回調函數進行排序;

g) 升序降序排列: function(a,b){return a-b;//升序 return b-a;//降序}

h) Reverse: 數組反轉;

i) Join([‘分隔符’]); 將數組以指定的分隔符連接爲字符串,不填默認爲” , ”;

j) Concat(arr1,arr2,[arr3,[arr4,[......]]]); 連接多個數組,如果數組爲多維數組,只拆第一層[  ];

k) indexOf(n); 查詢元素在數組的第一個下標;

l) lastIndexOf(n); 查詢元素在數組的最後一個下標;

m) Slice(begin,end); 截取數組,從begin開始,到end數組,左閉右開;

10. Number類常用方法:

a) .toString(); 轉爲字符串,相當於num + ””;

b) .toFixed(n); 將數字轉爲字符串,保留n位小數,四捨五入;

c) .valueOf(): 返回Number對象的基本數字值;

11. String類常用方法:

a) .split(“char”); 將字符串通過指定字符分割爲數組; 如果傳入””,則將所有字符放入數組;

b) .indexOf(char); 查詢某個字符在字符串的下標;

c) .charAt(index); 截取字符串的第index個字符;

d) .substring(begin,end); 截取字符串從begin開始到end的子串;左閉右開;

e) .replace(old,new); 將字符串的old部分子串,替換爲new(如果old是字符串,只替換第一個符合要求的子串; 如果old是正則,則按照正則要求替換 //g,替換全局);

f) toLowerCase(); 所有字符轉爲小寫;

g) ToUpperCase(); 所有字符轉爲大寫;

12. Date類常用方法:

a) .getFullYear(); 獲取4位年份;

b) .getMonth(); 獲取月份0~11;

c) .getDate(); 獲取一個月中的某一天 1~31;

d) .getDay(); 獲取一週中的某一天 0~6;

e) .getHours(); 返回Date對象的小時(0~23);

f) .getMinutes(); 返回Date對象的分鐘(0~59);

g) .getSeconds(); 返回Date對象的秒數(0~59);

13. 正則表達式的聲明:

a) 字面量聲明: /[正則表達式]/[表達式模式g/i/m];

b) new關鍵字實現: var reg = new regExp(“正則表達式”,”表達式模式”);

c) [表達式模式]: g: 全局匹配; 默認只匹配第一項符合要求;

i: 忽略大小寫; 默認要求大小寫一致;

M:多行匹配; 當字符串分爲多行時,多行匹配默認,會有多個開頭結尾; 默認, 一個字符串不管分多少行,只有一個開頭一個結尾;

14.正則表達式的常用規則:

a) 匹配的數據:

/d 數字0-9 相當於[0-9]

/D 非數字0-9 相當於[^0-9]

/w 字母,數組,下劃線 [0-9a-zA-Z_]

/W 非字母,數組,下劃線 [^0-9a-zA-Z_]

/s 任何空字符

/S 非空字符

.  除了換行符的任意字符

b)  特殊符號

[]需要匹配的數據

()分組,使用|的時候進行分組

| 或,兩邊都可以.默認從頭到尾分兩塊,如果用(a|b),則只匹配()裏面部分;

^ 在[]內部,表示整個[]內部取非; 在正則表達式開頭,表示整個字符串的開始;

$ 表示整個正則模式的結束;

C)  匹配次數

{} 表示匹配前面部分的次數.如{3,5}表示3-5次, {3,}表示3或多次,{3} 匹配3次;

? 表示匹配前面部分0-1次;

+:  1或多次;

*:  匹配任意次數;

15. JS中的面向對象和麪向過程:

a) 面向過程是指專注於如何去解決一個問題的過程步驟;

b) 面向對象是指專注於由哪一個對象來解決這個問題;

16. 面向對象的三大特徵:

a) 繼承

b) 封裝

c) 多態

17.什麼叫封裝?

a) 封裝分爲方法的封裝和屬性的封裝:

b) 方法的封裝: 是指將類內部的函數進行私有化處理,不對外提供調用接口,無法在類外部使用

c) 屬性的封裝: 是指將類中的屬性進行私有化處理,對外不能直接使用對象名訪問,而是提供set/get方法,讓外部使用set/get方法,來對屬性進行操作;

18.JS中this指向問題:

a) 總的來說,就是誰最終調用函數,this就指向誰!

b) This指向的規律:

i. 通過函數名()調用的,this永遠指向window;

ii. 通過對象方法調用的,this指向這個對象;

iii. 函數作爲數組的一個元素,用數組下標調用的,this指向這個數組;

iv. 函數作爲window內置函數的回調函數(setTimeout,setInterval)使用,this指向window;

v. 函數作爲構造函數,使用new關鍵字聲明,this指向新new出的對象;

19.什麼叫繼承?實現繼承的幾種方法?

a) 繼承: 使用一個子類,繼承另外一個父類,那麼子類就可以自動擁有父類的所有屬性和方法

i. 1. 通過擴展object實現繼承;

ii. 2. 使用原型實現繼承

iii. 3. 使用call  apply  bind 實現繼承

19.1 通過擴展object實現繼承:

通過循環,將父類對象的所有屬性和方法,全部賦給子類對象; 關鍵點在於for-in循環,即使不擴展object,也能通過簡單的循環實現操作;

19.2 使用原型實現繼承:

將父類對象,賦值給子類的prototype,那麼父類對象的屬性和方法就會出現在子類的prototype中,那麼,實例化子類時,子類的prototype又會到子類對象的_proto_中,最終,父類對象的屬性和方法,會出現在子類對象的_proto_對象中;

19.3 使用call  apply  bind  實現繼承:

通過函數名調用這三個函數,可以強行將函數中的this指定爲某個對象.

20. 閉包初級理解:

a) 在函數內部,定義一個子函數,子函數可以訪問父函數的私有變量.可以在子函數中進行操作,最後將子函數return返回.