前端（八）

一散裝js知識點

js和java同樣也有封裝、繼承、多態的特性，關於這些特性咱們後邊再敘述。這裏先說一下關於js一些零散的知識點：

• js能夠遍歷json或者對象:

for (var 變量 in 對象) {
}複製代碼

• js方法調用不檢查參數類型，不檢查參數數量 ，返回值能夠是函數

• 屬性提高寫法： var a = 1; 不提高寫法 a= 1;方法提高寫法：function a(){} ;方法不提高 寫法：var a = function(){}
  

• this是誰？this關鍵字永遠指向函數（方法）運行時的全部者。

1. 以函數的形式調用時，this永遠都是window。好比fun();至關於window.fun();
2. 以方法的形式調用時，this是調用方法的那個對象

3. 以構造函數的形式調用時，this是新建立的那個對象
   
4. 使用call和apply調用時，this是指定的傳遞過來的那個對象
   

• js方法能夠當作構造函數，也同時是類名，類體就是構造方法的方法體
• 內置對象：Array、Math、Date等
• js經常使用事件：onclick 、onmouseover 、onmouseout
• 基本數據類型也有包裝類，和java同樣自動裝包和卸包

二DOM操做

節點分爲：標籤節點、屬性節點、文本節點。他們對應的nodeType 分別是一、二、3。

操做標籤節點

獲取標籤節點 ：

• 直接經過document提供的API獲取標籤節點

document.getElementById("box1")複製代碼

• 經過獲取到的節點內的屬性獲取其餘標籤節點

獲取父節點：節點.parentNode。還能夠獲取任意節點。複製代碼

建立標籤節點：

• 經過document提供的API建立標籤節點

document.createElement("標籤名");複製代碼

插入標籤節點：

父節點.appendChild(新的子節點);
複製代碼

父節點.insertBefore(新的子節點,做爲參考的子節點)複製代碼

刪除標籤節點：

父節點.removeChild(子節點);複製代碼

複製標籤節點：

要複製的節點.cloneNode();      

	要複製的節點.cloneNode(true);複製代碼

• 不帶參數/帶參數false：只複製節點自己，不復制子節點。

• 帶參數true：既複製節點自己，也複製其全部的子節點。

操做屬性節點

獲取屬性節點：

標籤節點.getAttributeNode("屬性名")複製代碼

獲取節點屬性值：

元素節點.屬性名;
	元素節點["屬性名"];複製代碼

元素節點.getAttribute("屬性名稱");複製代碼

修改、添加節點屬性值：

元素節點.屬性名=新值;
	元素節點["屬性名"] = 新值;複製代碼

元素節點.setAttribute(屬性名, 新的屬性值);複製代碼

刪除節點屬性：

元素節點.removeAttribute(屬性名);複製代碼

操做文本節點

獲取文本：

• innerHTML：雙閉合標籤裏面的內容（識別標籤）。

• innerText：雙閉合標籤裏面的內容（不識別標籤）。

document.getElementById("box11").innerHTML
document.getElementById("box21").innerText複製代碼

修改文本：

document.getElementById("box11").innerHTML = 新內容（識別標籤）
document.getElementById("box21").innerText = 新內容（不識別標籤）複製代碼

獲取css屬性方式

ele.style.width或者 ele.style["width"]；缺點是隻能獲取或者賦值行內樣式，若是像樣獲取class中寫的樣式怎麼獲取呢？

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

這個方法無論行內仍是class中的css樣式屬性值均可以獲取的到。

三DOM的事件傳遞過程

js事件傳遞分爲捕獲階段、目標階段、冒泡階段。

捕獲階段就是：從外向內傳遞的過程。

冒泡階段就是：內向外傳遞的過程。

目標階段：事件在點擊目標標籤的時間段。

而且他們若是同時設置調用順序是：先調用父標籤捕獲，再調用子標籤捕獲，先調用子標籤冒泡，後調用父標籤冒泡，特殊狀況是在目標階段：冒泡和捕獲，誰的代碼在前邊誰先執行。

Event是一個事件函數內置對象，他包含了點擊事件的全部信息，而且能夠調用Event.stopPropagation()對事件進行攔截。

四BOM

window對象是BOM的頂層(核心)對象，BOM中有一些開發者須要知道的屬性和方法以下：

方法：

window.alert();	//不一樣瀏覽器中的外觀是不同的彈窗複製代碼

window.open(url,target,param)//打開一個新窗口複製代碼

window.close()//關閉本身的窗口複製代碼

對象：

location對象：location.reload()從新加載

navigator對象：userAgent屬性：系統，瀏覽器

history對象：

後退：

• history.back()

• history.go(-1)：0是刷新

前進：

• history.forward()

• history.go(1)