7-常用內建物件

7.1-陣列常用方法

7.2-字串方法

7.3-Date日期物件

7.4-Math 內建物件

8-函式

8.1-第一步：函式的定義

function 函式名字(形參){
}

8.2-第二步：函式的呼叫

函式名字();

9-偽陣列 arguments

10-關於DOM的事件操作

10.1-JavaScript的組成

JavaScript基礎分為三個部分：

• ECMAScript：JavaScript的語法標準。包括變數、表示式、運算子、函式、if語句、for語句等。
• DOM：文件物件模型，操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
• BOM：瀏覽器物件模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。

10.2-事件

• JS是以事件驅動為核心的一門語言。
• 事件的三要素：事件源、事件、事件驅動程式。

程式碼書寫步驟如下：（重要）

-（1）獲取事件源：document.getElementById(“box”); //類似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
- （2）繫結事件： 事件源box.事件onclick = function(){ 事件驅動程式 };
-（3）書寫事件驅動程式：關於DOM的操作

常見事件如下

下面針對這事件的三要素，進行分別介紹：

10.2.1-獲取事件源的方式（DOM節點的獲取）

獲取事件源的常見方式如下：

var div1 = document.getElementById("box1");      //方式一：通過id獲取單個標籤

var arr1 = document.getElementsByTagName("div1");     //方式二：通過 標籤名 獲得 標籤陣列，所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三：通過 類名 獲得 標籤陣列，所以有s
 

10.2.2-繫結事件的方式

方式一：直接繫結匿名函式

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //繫結事件的第一種方式
    div1.onclick = function () {
        alert("我是彈出的內容");
    }
</script>

方式二：先單獨定義函式，再繫結

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //繫結事件的第二種方式
    div1.onclick = fn;   //注意，這裡是fn，不是fn()。fn()指的是返回值。
    //單獨定義函式
    function fn() {
        alert("我是彈出的內容");
    }
</script>

方式三：行內繫結

<!--行內繫結-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是彈出的內容");
    }

</script>

10.2.4-事件驅動程式

onload事件

• 當頁面載入（文字和圖片）完畢的時候，觸發onload事件。
• js的載入是和html同步載入的。因此，如果使用元素在定義元素之前，容易報錯。這個時候，onload事件就能派上用場了，我們可以把使用元素的程式碼放在onload裡，就能保證這段程式碼是最後執行。建議是：整個頁面上所有元素載入完畢在執行js內容。所以，window.onload可以預防使用標籤在定義標籤之前。

<script type="text/javascript">
    window.onload = function () {
        console.log("小馬哥");  //等頁面載入完畢時，列印字串
    }
</script>

11-DOM介紹

目的其實就是為了能讓js操作html元素而制定的一個規範。DOM就是由節點組成的。

解析過程

HTML載入完畢，渲染引擎會在記憶體中把HTML文件，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。然後操作的時候修改的是該元素的屬性。

DOM樹（一切都是節點）
DOM的資料結構如下：

• 上圖可知，在HTML當中，一切都是節點：（非常重要）
• 元素節點：HMTL標籤。
• 文字節點：標籤中的文字（比如標籤之間的空格、換行）
• 屬性節點：：標籤的屬性。
• 整個html文件就是一個文件節點。所有的節點都是Object。

DOM可以做什麼

• 找物件（元素節點）
• 設定元素的屬性值
• 設定元素的樣式
• 動態建立和刪除元素
• 事件的觸發響應：事件源、事件、事件的驅動程式

DOM訪問關係的獲取
DOM的節點並不是孤立的，因此可以通過DOM節點之間的相對關係對它們進行訪問。如下：

節點的訪問關係，是以屬性的方式存在的。
JS中的父子兄訪問關係：

這裡我們要重點知道parentNode和children這兩個屬性的用法。下面分別介紹。

獲取父節點
節點.parentNode

11.1-DOM節點操作（重要）

節點的操作都是函式（方法）

建立節點
格式如下：

新的標籤(元素節點) = document.createElement("標籤名");

插入節點
插入節點有兩種方式，它們的含義是不同的。

方式1：

父節點.appendChild(新的子節點);
解釋：父節點的最後插入一個新的子節點。

方式2：

父節點.insertBefore(新的子節點,作為參考的子節點);
解釋：

在參考節點前插入一個新的節點。
如果參考節點為null，那麼他將在父節點最後插入一個子節點。

刪除節點
格式如下：

父節點.removeChild(子節點);
解釋：用父節點刪除子節點。必須要指定是刪除哪個子節點。

如果我想刪除自己這個節點，可以這麼做：

node1.parentNode.removeChild(node1);

複製節點（克隆節點）
格式如下：

要複製的節點.cloneNode(); //括號裡不帶引數和帶引數false，效果是一樣的。

要複製的節點.cloneNode(true);
括號裡帶不帶引數，效果是不同的。解釋如下：

不帶引數/帶引數false：只複製節點本身，不復制子節點。

帶引數true：既複製節點本身，也複製其所有的子節點。