JavaScript基本知識點整理（超實用）

  絮叨絮叨

                 

　今天給大家分享一下這兩天自己整理的JavaScript部分的筆記，下麵都是我覺得比較常用的，希望能幫助到大家！

①在HTML標簽中，直接內嵌JS。<button onclick=”func()”></button>

②在HTML頁面中使用<script></script>包裹JS代碼。<script> JS代碼 </ script >

③引入外部的JS文件。<script  language=”javascript” src=”JS路徑”></ script >

String 字元串 “str” ‘str’

Boolean true/false   

Number 數值   

Object 對象

Null 特殊的空值          

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

isNaN()：檢測是一個變數，是否是非數值。先用Number()函數嘗試轉換，如果不能轉為數值，則為NaN

Number():

　　轉換任何數據類型，為數值。  字元串含有其他字元，不能轉。  null -> 0

　　True=1 false=0    純數值字元串=相應的數字  空字元串=0。   Undefined -> NaN

ParseInt():將字元串轉為整數類型。

　　純數值=數值，會抹掉小數點   空字元串 = NaN

　　包含其他字元的字元串，會截取第一個非數值字元串前面的部分

　　ParseInt只能轉字元串，轉其他類型，全是NaN

Boolean：false假  true真

String：空字元串為假 一切非空為真

Number： 0為假  一切非0為真

Null、Undefined、NaN： 全為假  Object：全為真

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

GetAttribute(“屬性名”);  setAttribute(“屬性名”,”屬性值”); // 取到、設置屬性節點

InnerText[=“文本”] : 取到/設置 文本節點

InnerHTML[=”html代碼”]: 取到/設置 元素內部的html代碼

tagName： 取到當前節點的標簽名

【修改樣式系列】

.style.樣式 = “樣式值”    .style.cssText = “多個CSS鍵值對”  .className=”class名”

【層次節點系列】

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

　　2 .firstChild：獲取元素的第一個子節點； firstElementChild

　　3 .lastChild:獲取元素的最後一個子節點； lastElementChild

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

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

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

　　7 . attributes:取到所有屬性節點[數組]。

【創建新增節點】

1. .createElement(“標簽名”) 創建一個節點  .setAttribute(“”,””)給新節點設置屬性
2. 父節點.appendChild(node) 父節點最後追加新節點；
3. 父節點.insertBefore(newNode,oldNode) 在父節點的oldNode之前插入newNode
4. 需克隆節點.cloneNode(true/false);預設false：只克隆當前節點，而不克隆子節點；true：克隆所有子節點。

【刪除替換節點】

1. 父節點.removeChild(childNode); 從父節點刪除子節點
2. 父節點.replaceChild(newNode,oldNode); 用newNode替換掉oldNode；

【HTML-DOM 操作表格】

1、表格對象

①Rows: 取到所有行對象，數組格式；

②InsertRow(index); 在index後面插入一個新行

③DeleteRow(index); 刪除表格第index+1行；

2、行對象

①Cells: 取到所有單元格對象，數組格式； rowIndex:返回當前行索引；

②InsertCell(index): 在index個單元格後，插入一個新單元格；

③DeleteCell(index): 刪除index+1個單元格；

3、單元格對象

①cellIndex: 返回當前單元格索引；

②InnerText、InnerHTML：設置單元文字內容。

1、鍵盤事件：keyDownàkeyPressàkeyUp

2、長按時：不斷的執行keyDownàkeyPress

　　有keyDown，不一定有keyUp(當按鍵時，滑鼠將焦點點走，就沒有keyUp事件)

3、確認一個按鍵的方法

Dom.keyDown = function(e){
         Var evn = e||window.event;
      Var code = evn.keyCode||evn.charCode||evn.which;
      If(code==13){  回車  }}

4、判斷組合鍵原理：聲明多個組合鍵對應的標誌變數(全局變數，預設為0)，當按鍵keyDown時，對應的標誌變數為1；當按鍵Up時，對應的標誌變數置0；通過判斷多個標誌變數，是否同時為1，進而判斷按鍵是否同時按下。

【事件冒泡】

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

>>> 如何添加事件，會導致事件冒泡：

DOM0模型，均為事件冒泡；

IE中使用.attachEvent()添加的事件，均為冒泡；

其他瀏覽器，.addEventListener添加的事件，當第三個參數為false時，為冒泡；

>>> 如何阻止事件冒泡：

IE瀏覽器中：將e.cancelBubble屬性設為true；

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

【事件捕獲】

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

>>> 如何產生事件捕獲：

使用addEventListner()添加事件，並且將第三個參數設置為true

【阻止各種標簽的預設事件】

IE瀏覽器中：將e.returnValue屬性設為false；

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

.splice(index,num)：從index開始，刪除num個元素； 

push(n):數組最後插入一個元素  pop():刪除數組最後一個元素

unshift(n):在數組第0位插入一個元素  shift():刪除數組第一個元素 

sort([functuion]): 預設按照ASCII碼值排序，可以傳入回調函數進行排序；

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

Reverse: 數組反轉

Join([‘分隔符’])：將數組以指定分隔符鏈接為字元串，不填預設用“,”

Concat(arr1,arr2,[arr3,[arr4,[……]]]):鏈接多個數組(如果數組為多維數組，只拆第一層[])

indexOf(n):查詢元素在數組的第一個下標 lasrIndexOf(n):查詢元素在數組最後一個下標

slice(begin,end); 截取數組從begin開始，到end的子數組，左閉右開。

.toString():轉為字元串 ， 相當於num+””

.toFixed(n):將數字轉為字元串，保留n位小數，四捨五入

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

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

.indexof(char): 查詢某個字元，在字元串的下標；  

.charAt(index): 截取字元串的第index個字元

. substring(begin,end):截取字元串從begin開始，到end的子串。左閉右開

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

.toLowerCase() 所有字元轉為小寫；

.toUpperCase() 所有字元轉為大寫;

.getFullYear(): 獲取4位年份

.getMonth(): 獲取月份 0~11

.getDate(): 獲取一月中的某一天 1~31

.getDay(): 獲取一周中的某一天 0~6

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

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

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

① 字面量聲明：  /[正則表達式]/[表達式模式g/i/m]

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

[表達式模式]：

　　g:全局匹配。預設只匹配第一項符合要求；

　　i: 忽略大小寫。預設要求大小寫一致；

　　m:多行匹配。(當字元串分為多行時，多行匹配預設，會有多個開頭結尾。預設，一個字元串不管分多少行，只有一個開頭一個結尾。)

匹配的數據：

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

　　/w 字母、數組、下劃線 [0-9a-zA-z_]  /W 非字母、數字、下劃線 [^0-9a-zA-z_]

　　/s  任何空字元   /S 非空字元  . 除了換行符的任意字元

特殊符號：

　　[] 需要匹配的數據  () 分組，使用|的時候進行分組

　　| 或，兩邊都可以。預設從頭到尾分兩塊，如果用(a|b)，則只匹配()裡面部分

　　^ 在[]內部，表示整個[]內部取非；在正則表達式開頭，表示整個字元串的開始；

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

匹配次數：

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

　　？ 匹配前面部分0-1次   +： 1或多次  *：匹配任意次數

面向過程是指專註於如何去解決一個問題的過程步驟。

面向對象是指專註於由哪一個對象來解決這個問題。

繼承、封裝、多態

封裝分為方法的封裝和屬性的封裝

方法的封裝是指將類內部的函數進行私有化處理，不對外提供調用介面，無法在類外部使用

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

總的來說，就是誰最終調用函數，this就指向誰！

This指向的規律:

　　①通過函數名()調用的，this永遠指向window

　　②通過對象.方法調用的，this指向這個對象

　　③函數作為數組的一個元素，用數組下標調用的，this指向這個數組

　　④函數作為window內置函數的回調函數(setTimeout,setInterval)使用，this指向window

　　⑤函數作為構造函數，使用new關鍵字聲明，this指向新new出的對象

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

①通過擴展object實現繼承

②使用原型實現繼承

③使用call、apply、bind實現繼承

通過擴展object實現繼承:

通過迴圈，將父類對象的所有屬性和方法，全部賦給子類對象。關鍵點在於for-in迴圈，及時不擴展object，也能通過簡單的迴圈實現操作

使用原型實現繼承:

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

使用call、apply、bind實現繼承:

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

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

今天就給大家分享到這兒吧~~~JS中常用的知識點基本都概括了，大家如果覺得寫的不詳細的話，可以查看菜鳥教程或者查看幫助文檔，有什麼不足的地方請大家留言~~~謝謝大家了~~