從零開始學Web之jQuery（一）jQuery的概念，頁面載入事件

daotin發表於2018-07-04
WebjQuery事件

大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新……

在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

fgx.png

一、jQuery的概念

1、什麼是 JavaScript 庫？

JavaScript 開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。

把一些常用到的方法寫到一個單獨的 js 檔案，使用的時候直接去引用這js檔案就可以了，這個 js 檔案就是 JavaScript 庫。（比如我們自己寫的 common.js 就是一個 js 庫。）

2、常見的 JS 庫

常見的JavaScript 庫：jQuery、Prototype、MooTools。其中jQuery是最常用的一個。

3、什麼是 jQuery？

jQuery 就是一個 JavaScript 函式庫，沒有什麼特別的。裡面封裝了一大堆的方法方便我們的開發，其實就是一個加強版的 common.js。因此我們學習jQuery，其實就是學習jQuery這個 js 檔案中封裝的一大堆方法。

4、jQuery 能做什麼？

jQuery 本身就是一堆 JavaScript 函式，JavaScript 是做什麼的，jQuery 就是做什麼的。畢竟 jQuery 知識 JavaScript 編寫的函式庫而已，有些功能 jQuery 沒有封裝，則還需要通過自己寫原生 JavaScript 來實現。

5、為什麼要學 jQuery？

jQuery設計的宗旨是 ` Write Less，Do More `，即倡導寫更少的程式碼，做更多的事情。

它封裝JavaScript常用的功能程式碼，提供一種簡便的操作，優化 HTML 文件操作、事件處理、動畫設計和 Ajax 互動。

jQuery的核心特性可以總結為：

  • 具有獨特的鏈式語法和短小清晰的多功能介面；
  • 具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；
  • 擁有便捷的外掛擴充套件機制和豐富的外掛。
  • 相容各種主流瀏覽器。

極大地簡化了 JavaScript 程式設計。

6、jQuery下載

jQuery官網

二、jQuery 的頂級物件

jQuery 中的頂級物件是：jQuery，可以使用$ 代替。

jQuery中所有屬性和方法都可以使用$.屬性或方法 的方式來使用。

大多數情況下，jQuery 中幾乎都是方法，屬性很少。

三、jQuery物件和DOM物件互轉

注意：通過 DOM 方式和 jQuery 方法獲取的同一個元素，不是相同的物件。

存在的問題：DOM物件呼叫jQuery的方法不能實現，jQuery物件呼叫DOM的方法也不能實現。所以要將DOM物件和jQuery物件互轉。

DOM物件轉jQuery物件：$(DOM物件)

jQuery物件轉DOM物件：jQuery物件[0]

為什麼 DOM 和 jQuery 要互轉，最開始就用 jQuery不好嗎？

因為有一些相容或功能沒有封裝在 jQuery 裡面，必須通過原生 js 操作，所以需要 jQuery物件轉DOM物件。當這一步操作完之後，再次轉回 jQuery 物件，可以更方便的操作頁面元素。

1、案例：網頁開關燈（使用類選擇器方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls {
            background-color: #000;
        }
    </style>
</head>
<body>

<input type="button" value="開/關" id="btn">

<script src="common.js"></script>
<script src="jquery-1.12.4.js"></script>
<script>
    // DOM原生方式
    document.getElementById("btn").onclick = function (ev) {
        if(document.body.className !== "cls") {
            document.body.className = "cls";
        } else {
            document.body.className = "";
        }
    }

    // jQuery轉DOM方式
    $("#btn").click(function () {
        if ($("body")[0].className === "cls") {
            $("body")[0].className = "";
        } else {
            $("body")[0].className = "cls";
        }
    });

    // jQuery方式
    $("#btn").click(function () {
        if ($("body").hasClass("cls")) {
            $("body").removeClass("cls");
        } else {
            $("body").addClass("cls");
        }
    });

</script>
</body>
</html>

1、jQuery的方方式繫結事件沒有 on

2、className 是DOM物件的方法，jQuery不能呼叫。

3、hasClass 是否有某個類；removeClass 移除某個類；addClass 增加一個類。

2、案例：網頁開關燈（使用CSS方式）

$("#btn").click(function () {
  if($(this).val() === "關燈") {
    $("body").css("backgroundColor", "#000");
    $(this).val("開燈");
  } else {
    $("body").css("backgroundColor", "");
    $(this).val("關燈");
  }
});

1、this 是 DOM 的屬性，所以要轉成 jQuery 屬性。

2、jQuery 控制 css 樣式使用 css("屬性名字","屬性值")方法，屬性的名字可以是DOM中的寫法（比如：backgroundColor），可也以使用css樣式寫法（比如：background-color）。

3、jQuery物件.val();表示獲取該物件 value 屬性的值；

4、jQuery物件.val("值");表示設定該物件 value 屬性的值；

四、頁面載入事件

1、DOM中頁面載入事件

window.onload = function (ev) {
  console.log("1");
};
window.onload = function (ev) {
  console.log("2");
};

由於這是賦值的方式，所以只會列印第二個，第一個被覆蓋了。

特點：整個頁面的所有元素，文字，圖片等全部載入完才會執行。

2、jQuery中頁面載入事件

2.1、方式一：DOM轉jQuery方式

$(window).load(function () {
  console.log("load:1");
});
$(window).load(function () {
  console.log("load:2");
});

load:1 和 load:2 都會列印，因為這相當於方法呼叫，呼叫多少次執行多少次。

特點：整個頁面的所有元素，文字，圖片等全部載入完才會執行。

2.2、方式二：DOM轉jQuery方式

$(document).ready(function () {
  console.log("ready:1");
});
$(document).ready(function () {
  console.log("ready:2");
});

ready:1 和 ready:2 都會列印。

特點：不是整個頁面的所有元素，而是頁面中的基本元素載入完後就執行，所以比使用 load 的方式快一些。

2.3、方式三：jQuery方式（推薦）

$(function () {
  console.log("jQuery:1");
});
$(function () {
  console.log("jQuery:2");
});

jQuery:1 和 jQuery:2 都會列印。

$ 也可以換成 jQuery。

特點：不是整個頁面的所有元素，而是頁面中的基本元素載入完後就執行，所以比使用 load 的方式快一些。

fgx.png


相關文章