一. jQuery的概念
jQuery是 John Resig 於2006創建的javascript開源函數庫，憑藉着簡潔的語法和跨平臺的兼容性（ie6），jQuery極大的簡化了js的開發。jQuery的優勢：
- 強大的選擇器：jquery繼承了css中選擇器機制，避免了傳統js中循環遍歷節點獲取DOM元素對象的過程
- 出色的DOM對象封裝：jquery可以動態更新元素節點（element）以及元素節點的屬性（attribute）
- 可靠的事件處理機制：在jquery中爲元素對象綁定事件非常容易
- 完善的Ajax操作：jquery將js中的原生Ajax操作封裝到了
$.ajax()函數中，使得開發者只需要專注於業務邏輯，無需關心瀏覽器的兼容性以及XMLHttpRequest對象的創建和使用過程
要使用jquery只需要在頁面的公共位置引入jquery庫即可：
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery!</title>
<!-- 使用公共CDN加載jQuery函數庫 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
// jQuery函數庫中，$代表jQuery
// ready()方法相當於傳統javascript中的window.onload()方法，當時read()方法在DOM結構
// 加載完畢之後就執行了，onload()方法必須等網頁所有相關元素（圖片）加載完畢才執行
$(document).ready(function(){
alert("Hello jQuery!");
});
</script>
</body>
</html>
$(document).ready() 方法可以簡寫爲：
// 使用匿名函數作爲參數傳遞給jQuery函數$()
$(function(){
alert("Hello jQuery!");
});
jQuery對象和DOM對象的區別：
DOM對象是指通過原生js中通過getElementById() 等方法獲取的元素對象，jQuery對象是指通過jquery方法封裝後的元素對象，只有jQuery對象才能使用jquery庫中的方法，例如$("#foo").innerHTML是錯誤的
/* dom對象和jquery對象的互換 */
var $variable = $("#foo"); // 獲取jquery對象，返回的是一個jquery對象數組
var variable = $variable[0]; // 轉爲dom對象
var variable = document.getElementById("foo") // dom對象的獲取
var $variable = $(variable); // 將dom對象包裝爲jquery對象
二. jQuery中的選擇器
選擇器是jquery的基礎，在jquery中對於事件處理、DOM遍歷、ajax操作都依賴於選擇器，其核心思想是先要找到頁面中的dom元素，然後改變dom元素的內容或者綁定效果。jquery的選擇器技術繼承自css，使用jquery選擇器可以非常方便地找出頁面中指定的jquery元素對象，添加相應的行爲，避免了原生js的複雜遍歷獲取對象的過程。jquery選擇器的優勢是非常的簡潔，$(#idName)就可以替代js中document.getElementById()函數。
jQuery中的選擇器：jquery中的選擇器種類非常多，主要分爲獲取jquery元素對象和過濾jquery元素對象。最常用的選擇器是按dom元素的id屬性或class屬性來獲取jquery對象，因爲頁面的中dom元素的id屬性具有唯一性，所以這是最常用的。
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<span class="myClass">span class="myClass"</span>
<script type="text/javascript">
$("#myDiv"); // 根據dom的id元素匹配獲取jquery對象
$(".myClass"); // 根據dom元素的class元素匹配獲取jquery對象
</script>
jquery中還提供了很多輔助的選擇器，這些選擇器主要是用來過濾jquery對象的：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<script type="text/javascript">
$("li:first"); // $("li")根據標籤獲取的是一個jquery對象數組，該選擇器過濾出第一個元素
$("tr:eq(1)"); // 根據給定的索引獲取元素
</script>
除此之外，還有諸如子類選擇器，屬性匹配選擇器，表單元素選擇器…需要的時候可以參考文檔
三. jQuery中的DOM操作
每個html頁面都能使用dom樹表示出來，而js又能動態地改變這個dom結構，再使用jquery操作dom元素的時候往往會動態地創建html內容，使得dom文檔在瀏覽器中呈現效果發生變化（dom結構或元素節點發生變化）
元素節點查找：使用jquery選擇器
<p class="myClass" title="shoppinglist">購物列表：</p>
<ul>
<li title="牛肉">牛肉</li>
<li title="洋蔥">洋蔥</li>
<li title="蘋果">蘋果</li>
</ul>
<script type="text/javascript">
// 元素節點查找
var $li = $("ul li:eq(1)"); // 獲取<ul>中的第二個節點元素
var $li_txt = $li.text(); // 獲取節點元素的文本內容
alert($li_txt);
</script>
查找元素節點的屬性值：使用attr()方法可以獲取元素節點的屬性值
// 獲取元素節點的屬性值
var $para = $("p");
var p_txt = $para.attr("title");
alert(p_txt);
創建節點：在dom操作中，常常要動態地創建html內容，append()方法用於將元素節點添加到dom樹上
// 創建<li>元素節點，並將它作爲<ul>元素的子節點添加到dom節點樹上
var $li = $("<li title='雞蛋'>雞蛋</li>"); // 創建一個包含文本內容和屬性的元素節點
$("ul").append($li); // 將新創建的元素節點出入到dom文檔樹上
刪除節點：romove()方法可以將文檔中某個多餘的元素節點刪除，包括該節點所包含的所有後代元素，方法的返回值是指向該刪除的節點的引用
var $li = $("ul li:eq(1)").remove();
$li.appendTo($li); // 洋蔥跑到蘋果後面了，dom文檔結構發生了變化
節點的替換：使用replaceWith()方法將所有匹配的元素都替換成指定的dom元素，如果被替換的元素節點綁定了事件也一起刪除
$("li:eq(1)").replaceWith("<li title='橘子'>橘子</li>");
節點屬性的操作：attr()方法可以用來獲取和設置元素屬性，removeAttr()方法用於刪除元素屬性
var $p = $("p");
var p_txt = $p.attr("title"); // 獲取節點指定屬性的屬性值
console.log(p_txt);
// 設置節點的屬性，attr()方法可以同時設置多個屬性
$p.attr({"title":"購物清單", "name":"shopping!!!"});
console.log($p.attr("name")); // 在控制檯查看效果
操作節點的樣式：class屬性也是節點的屬性，可以使用attr()方法來操作屬性值，樣式文件定義在css文件中，jquery中還提供了addClass()方法來追加樣式，removeClass()用於移除指定樣式
設置和獲取html、文本和值：html()，text()，val()
// html()方法用於獲取某個節點的html內容，類似js中的innerHTML屬性
var p_html = $("p").html();
alert(p_html);
// text()方法用於讀取和設置某個元素中的文本內容
var p_text = $("p").text();
console.log(p_text);
$("p").text("今天買點啥？"); // 設置節點的文本內容
val()方法：
<input type="text" id="address" value="請輸入郵箱地址">
<input type="text" id="password" value="請輸入郵箱密碼">
<script type="text/javascript">
// value()方法用於獲取和設置文本框、下拉菜單、單選框的值
$("#address").focus(function(){
var txt_value = $(this).val(); // 獲取節點的值
if(txt_value == "請輸入郵箱地址"){
$(this).val(""); // 設置節點的值爲空
}
});
$("#address").blur(function(){
var txt_value = $(this).val(); // 獲取節點的值
if(txt_value == ""){
$(this).val("請輸入郵箱地址");
}
});
</script>