1. jQuery優點
查找元素的方法多種多樣，非常靈活；擁有隱式迭代的特性，不需手寫for循環；完全沒有兼容性問題；實現動畫非常簡單，而且功能強大；代碼簡單粗暴。
2. 關於壓縮版和未壓縮版
jquery-1.12.4.min.js：壓縮版本，適用於生產環境，因爲文件比較小，去除了註釋、換行。
jquery-1.12.4.js：未壓縮版本，適用於學習與開發環境，源碼清晰，易閱讀。
3. 入口函數
<script>
// js的入口函數執行要比jQuery的入口函數執行得晚一些
// jQuery的入口函數會等待頁面的加載完成才執行，但是不會等待圖片的加載，js會等待頁面和圖片都加載完成纔開始執行
window.onload = function() {
console.log("這是js的入口函數");
};
// $其實是一個函數，後跟()，參數可以是function，表示入口函數；可以是dom對象，轉換成jQuery對象；可以是表示選擇器的字符串，用來找對象
console.log( $ === jQuery ); // true
$(document).ready(function() {
console.log("這是jQuery入口函數第一種寫法");
});
$(function() {
console.log("這是jQuery入口函數第二種寫法");
});
</script>
4. jQuery對象和js對象
使用js的方式獲取到的元素就是js對象（DOM對象），使用jQuery的方式獲取到的元素就是jQuery對象，jQuery對象就是js對象的一個集合，僞數組，裏面存放了衆多的js對象，js對象和jQuery對象的方法不能混用，但可以互相轉換。
<script type="text/javascript">
$(document).ready(function(){
var $Karry = document.getElementById("Karry");
console.log($($Karry)); // DOM對象轉換成jQuery對象
var $li = $("#Karry");
console.log($li[0]);
console.log($li.get(0));
})
</script>
5. 選擇器
（1）基本選擇器：ID選擇器$("#id")、類選擇器$(".class")、標籤選擇器$("div")、並集選擇器$("div, p, li")、交集選擇器$("div.redClass")。
（2）層級選擇器：後代選擇器$("s1 s2")、子代（兒子）選擇器$("s1 > s2")。
（3）過濾選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| :eq( index ) | $("li:eq(2)").css("color","red"); | 獲取到的li元素中，選擇索引號爲2的元素，索引號index從0開始 |
| :odd | $("li:odd").css("color","red"); | 獲取到的li元素中，選擇索引號爲奇數的元素 |
| :even | $("li:even").css("color","red"); | 獲取到的li元素中，選擇索引號爲偶數的元素 |
| :first | $("div p").first(); | 首個 <div> 元素內部的第一個 <p> 元素 |
| :last | $("div p").last(); | 最後一個 <div> 元素中的最後一個 <p> 元素 |
| :gt | $("ul li:gt(3)"); | 列舉 index 大於 3 的元素 |
| :lt | $("ul li:lt(3)"); | 列舉 index 小於 3 的元素 |
（4）篩選選擇器（方法）：注意區分與前面選擇器的區別，一般用於函數/事件內部$(this)調用。
PS ：$(this).index()返回當前元素在所有兄弟元素裏面的索引。
| 名稱 | 用法 | 描述 |
|---|---|---|
| children(selector) | $("ul").children("li") | 相當於$("ul>li")，子類選擇器，無參數則是所有子類 |
| find（selector） | $("ul").find("li") | 相當於$("ul li")，後代選擇器 |
| siblings(selector) | $("#first").siblings("li") | 查找兄弟節點，不包括自己本身 |
| parent() | $("#first").parent() | 查找父親 |
| eq(index) | $("li").eq(2) | 相當於$("li:eq(2)")，index從0開始，$("li").get(2)返回js對象 |
| next() | $("li").next() | 找下一個兄弟 |
| nextAll() | $("li").nextAll() | 查找後面所有兄弟 |
| prev() | $("li").prev() | 找上一個兄弟 |
| prevAll() | $("li").prevAll() | 查找之前的所有兄弟 |
6. 基本操作
（1）css操作
| $("li").css("backgroundColor", "pink"); | 修改單個樣式 |
| $("li").css( { backgroundColor: "pink", color: "red" } ); | 修改多個樣式 |
| $("li").css("backgroundColor"); | 獲取樣式（默認第一個元素的樣式） |
（2）class操作
| $("li").addClass("basic"); | 添加一個類 |
| $("li").removeClass("basic"); | 移除一個類 |
| $("li").hasClass("basic"); | 判斷是否有某個類，返回true或false |
| $("li").toggleClass("basic"); | 如果有該類，則移除，如果沒有，則添加該樣式 |
（3）屬性操作
| $("img").attr("title", "標題"); | 設置單個屬性 |
| $("img").attr( { title: "標題", alt: "可選" } ); | 設置多個屬性 |
| $("img").attr("title"); | 獲取屬性值 |
| $("img").removeAttr("title); | 移除屬性 |
（4）prop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// 對於布爾類型的屬性checked、selected、disabled，.attr()在該屬性沒有設置的情況下返回undefined
// 因此不要attr方法，應該用prop方法，返回true或者false
$(function() {
$("input").eq(0).click(function() {
$("#ck").prop("checked", true);
});
$("input").eq(1).click(function() {
$("#ck").prop("checked", false);
});
})
</script>
</head>
<body>
<input type="button" value="選中">
<input type="button" value="不選中">
<input type="checkbox" id="ck">
</body>
</html>
（5）特殊屬性操作
| $("#btn").val(); | 獲取內容 | $("#btn").val("hahaha"); | 設置內容 |
| $("div").html(); | 獲取內容，包含標籤，例如：<h3>我是標題</h3> | $("div").html("<p>文本</p>"); | 設置內容，自動解析html標籤，結果：文本 |
| $("div").text(); | 獲取內容，不包含標籤，例如：我是標題 | $("div").text("<p>文本</p>"); | 設置內容，不解析html標籤，結果：<p>文本</p> |
| $("div").width(); | 獲取元素的width值，直接獲取到的是數字；$("div").css("width");獲取到的是帶單位的數字 | $("div").height(); | 獲取元素的height值 |
| $("div").width(400); | 設置元素width的值 | $("div").height(400); | 設置元素height的值 |
| $("div").innerWidth(); | padding + width | $("div").innerHeight(); | padding + height |
| $("div").outerWidth(); | padding + width + border | $("div").outerHeight(); | padding + height + border |
| $("div").outerWidth(true); | padding + width + border + margin | $("div").outerHeight(true); | padding + height + border + margin |
| $(window).scrollTop(); | 向上滾動的距離，返回一個數值 | $(window).srcollLeft(); | 向左滾動的距離 |
| $("div).offset(); | 獲取元素相對於document的位置，返回一個對象，可通過.left和.top獲取值 | $("div").position(); | 獲取元素相對於有定位的父元素的位置，其餘特性同左 |