大家好，這里是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這里我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、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 的方式快一些。