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

時間 2019-11-17

標籤開始 web jquery 概念頁面加載事件欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！css

1、jQuery的概念

一、什麼是 JavaScript 庫？

JavaScript 開發的過程當中，處理瀏覽器的兼容很複雜並且很耗時，因而一些封裝了這些操做的庫應運而生。這些庫還會把一些經常使用的代碼進行封裝。html

把一些經常使用到的方法寫到一個單獨的 js 文件，使用的時候直接去引用這js文件就能夠了，這個 js 文件就是 JavaScript 庫。（好比咱們本身寫的 common.js 就是一個 js 庫。）前端

二、常見的 JS 庫

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

三、什麼是 jQuery？

jQuery 就是一個 JavaScript 函數庫，沒有什麼特別的。裏面封裝了一大堆的方法方便咱們的開發，其實就是一個增強版的 common.js。所以咱們學習jQuery，其實就是學習jQuery這個 js 文件中封裝的一大堆方法。jquery

四、jQuery 能作什麼？

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

五、爲何要學 jQuery？

jQuery設計的宗旨是 ' Write Less，Do More '，即倡導寫更少的代碼，作更多的事情。github

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

jQuery的核心特性能夠總結爲：瀏覽器

具備獨特的鏈式語法和短小清晰的多功能接口；
具備高效靈活的css選擇器，而且可對CSS選擇器進行擴展；
擁有便捷的插件擴展機制和豐富的插件。
兼容各類主流瀏覽器。

極大地簡化了 JavaScript 編程。

六、jQuery下載

jQuery官網

2、jQuery 的頂級對象

jQuery 中的頂級對象是：jQuery，可使用$ 代替。

jQuery中全部屬性和方法均可以使用$.屬性或方法 的方式來使用。

大多數狀況下，jQuery 中幾乎都是方法，屬性不多。

3、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 對象，能夠更方便的操做頁面元素。

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

<!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>

一、jQuery的方方式綁定事件沒有 on

二、className 是DOM對象的方法，jQuery不能調用。

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

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

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

一、this 是 DOM 的屬性，因此要轉成 jQuery 屬性。

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

三、jQuery對象.val();表示獲取該對象 value 屬性的值；

四、jQuery對象.val("值");表示設置該對象 value 屬性的值；

4、頁面加載事件

一、DOM中頁面加載事件

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

因爲這是賦值的方式，因此只會打印第二個，第一個被覆蓋了。

特色：整個頁面的全部元素，文本，圖片等所有加載完纔會執行。

二、jQuery中頁面加載事件

2.一、方式一：DOM轉jQuery方式

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

load:1 和 load:2 都會打印，由於這至關於方法調用，調用多少次執行多少次。

特色：整個頁面的全部元素，文本，圖片等所有加載完纔會執行。

2.二、方式二：DOM轉jQuery方式

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

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

特色：不是整個頁面的全部元素，而是頁面中的基本元素加載完後就執行，因此比使用 load 的方式快一些。

2.三、方式三：jQuery方式（推薦）

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

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

$ 也能夠換成 jQuery。

特色：不是整個頁面的全部元素，而是頁面中的基本元素加載完後就執行，因此比使用 load 的方式快一些。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。