從零開始學 Web 之 jQuery（一）jQuery的概念，頁面載入事件
一、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物件和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 的方式快一些。
相關推薦
從零開始學 Web 之 CSS3（一）CSS3概述，選擇器
https 兼容問題 3.1 線性 web前端 不同 錨點 splay lock 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
從零開始學 Web 之 HTML5（一）HTML5概述，語義化標籤
一、HTML5簡介 1、什麼是html5 html5 不是一門新的語言，而是我們之前學習的 html 的第五次重大修改版本。 2、html的發展歷史 超文字標記語言（第一版，不叫 HTML 1.0）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）； HTML 2.0——19
從零開始學 Web 之 Ajax（六）jQuery中的Ajax
var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，
從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手
lan 技術分享 php 概述 由於 val asc logs 更新 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性
器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 CSS（一）選擇器
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 W
從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影
一、顏色模式 顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)） 紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。
從零開始學 Web 之 CSS3（六）動畫animation，Web字型
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/
從零開始學 Web 之 DOM（一）DOM的概念，對標籤操作
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、DOM概念 D
從零開始學 Web 之 BOM（一）BOM的概念，一些BOM物件
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 HTML（一）認識前端
大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、什麼是前端 前端對於網站來說，
從零開始學 Web 之 JavaScript（一）JavaScript概述
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、JavaScr
從零開始學 Web 之 Ajax（一）伺服器相關概念
一、伺服器和客戶端 伺服器和客戶端都是電腦，在硬體層面上沒有明顯的劃分，配置很差的個人電腦任然可以作為伺服器。 伺服器如果想對外提供服務，必須安裝相應的軟體，所以不是伺服器這臺電腦可以提供服務，而是其安裝的軟體提供的服務。比如： HTTP網頁服務：Apache，Tomcat，IIS等 檔案上傳下載服務：V
從零開始學 Web 之 ES6（一）ES5嚴格模式
一、ECMAScript 5 嚴格模式 1、概述 除了正常執行模式，ECMAscript 5添加了第二種執行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。 2、目的 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
從零開始學 Web 之 CSS3（四）邊框圖片，過渡
一、邊框圖片 邊框圖片：就是給邊框加圖片背景。 我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？ 原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。 並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。 語法： /* bord
從零開始學 Web 之 DOM（四）節點
def clas scrip while p標簽 設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相
從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數
樣式 清理 java mar dde sof mov har width 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：
從零開始學 Web 之 Ajax（五）同步異步請求，數據格式
遊記 document 空閑 name center 20px 實現 resp 也會 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 ES6（三）ES6基礎語法一
arr 方法 foreach reac 公眾 存在 lock 數組名 回調函數 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博