1、jQuery是一個快速，小巧，功能豐富的JavaScript庫。jQuery 使HTML文檔周遊和操作，事件處理和動畫等操作變得更加簡單。
var
jQuery的代碼将在所有主流浏覽器中運作完全相同，包括Internet Explorer 6！
2、可以從http://www.jquery.com下載下傳jQuery庫的副本，或者從CDN（内容分發網絡）（如BootCDN或百度CDN）中引入。 将使用BootCDN上的CDN。要開始使用jQuery，首先需要使用script标簽将其添加到我們的HTML文檔的頭部。
<!DOCTYPE html>
在使用HTML文檔之前等待HTML文檔完全加載并準備就緒是一種很好的做法。為此，我們使用 document(文檔) 對象的ready事件：
$
$ 用于通路jQuery。 從這裡開始，代碼通路document對象，并定義了當 document 的 ready 事件觸發時要調用的函數。 這樣可以防止任何jQuery代碼在文檔加載完成之前運作。我們有一個友善的快捷方式, 等價于上面的代碼：
$
3、現在，在我們head部分中引入了jQuery庫，并且已經定義了文檔就緒事件，我們可以開始我們的第一個jQuery操作！ 讓我們改變div元素的内容。
<!DOCTYPE html>
以上代碼, 在頁面文檔準備就緒後将 id ="start" 的元素的HTML更改為"出發吧,騷年!"。
4、jQuery用于選擇（查找）HTML元素并對其執行"操作"。
$
selector 是選擇器, 用于查找HTML元素。action 是要元素要執行的動作。
$
jQuery使用CSS選擇器文法來選擇元素。
5、選擇
jQuery選擇器以美元符号和圓括号開頭:$()。注意: jQuery中所有的符号都是英文符号。最基本的選擇器是元素選擇器，它根據元素名稱選擇所有元素。
$
接下來是id和類選擇器，它們通過id和類名來選擇元素：
$
還可以對選擇器使用以下文法：
$
選擇器比純JavaScript更容易通路HTML DOM元素。
6、常用選擇器
7、可以通過jQuery輕松的操作配置設定給HTML元素的屬性。比如元素的 href,src,id,class,style 屬性。attr()方法用于擷取屬性的值。
<
attr() 方法還允許我們通過第二個參數來給屬性設定一個值。
$
8、删除屬性
你還可以從HTML元素中删除屬性。removeAttr() 方法用于删除元素的任何屬性。
$
9、可以通過jQuery操作HTML元素的内容。html() 方法用于擷取所選元素的内容，包括HTML标記。
<
請注意，HTML标簽<b>也被傳回。如果你隻需要文本内容，不需要HTML标簽，可以使用 text() 方法：
$
html() 和 text() 方法可以用于包含内容的所有HTML元素。
設定内容-可以使用html()和text()方法來更改HTML元素的内容。
$
上面的代碼将 id="test" 的元素的内容更改為"hello!"。
如果你設定的内容包含HTML标記，則應使用 html() 方法而不是 text()。
10、val()方法
val方法允許我們擷取和設定表單字段的值，例如: 文本框(input)，下拉清單(select) 等。
$
類似地，你可以在val()方法傳入參數來設定該字段的值。當需要處理表單事件和驗證時，擷取和設定表單域的值非常有用。
11、總結如下：
12、添加内容
jQuery具有用于向所選元素添加新内容而不删除現有内容的方法：
還可以插入帶有HTML标簽的内容。
13、使用jQuery建立新HTML元素的最簡單方法如下：
var
上面的代碼建立一個新的<p>元素，其中包含文本Hi，并将其配置設定給一個名為txt的變量。
可以将該變量作為上述方法的參數添加到我們的HTML中
<
這将在#demo段落之後插入新建立的<p>元素。也可以通過使用逗号分隔來指定多個元素作為 before()，after()，append()，prepend()方法的參數例如：$("#demo").append(var1,var2,var3)。
上面提到的用于建立元素的文法可以用來建立任何新的HTML元素，例如$("<div></div>")可以建立一個新的div。
14、添加CSS
addClass()方法為標明的元素添加一個或多個類。
<
要在 addClass() 方法中指定多個類, 隻需使用空格分隔它們。 例如$("div").addClass("class1 class2 class3")。
15、删除CSS
removeClass()方法從所選元素中删除一個或多個類名。
$
上面的代碼從div元素中删除“red”類。同樣，可以通過使用空格分隔來指定删除多個類名。
16、切換CSS
toggleClass()方法從所選的元素添加/删除類之間切換，這意味着如果元素指定的類存在，則它将被删除，如果不存在，則會被添加。
$
17、CSS()方法
與html()方法類似，可以使用css()方法來擷取和設定CSS屬性值。
$
CSS()多屬性設定-css() 方法可以使用JSON文法設定多個CSS屬性。
css
文法由"屬性":"值" 對組成，以逗号分隔，并以大括号{}括起來。
$
這将設定段落的顔色和字型大小屬性。你可以使用此JSON文法指定任意數量的屬性。
18、外形尺寸
可以使用 width() 和 height() 方法來擷取和設定HTML元素的寬度和高度。下面代碼中将div的寬度和高度設定為100px，并為其設定背景顔色：
$
width() 和 height() 方法擷取并設定尺寸，而不包括填充，邊框和邊距。innerWidth()和innerHeight()方法包括填充部分的尺寸。outerWidth()和outerHeight()方法包括填充和邊框部分的尺寸。
19、文檔對象模型DOM
當您在浏覽器中打開任何網頁時，頁面的HTML将被加載并在螢幕上可視化呈現。為了實作這一點，浏覽器建構了該頁面的文檔對象模型(DOM)，它是其邏輯結構的面向對象的模型。
DOM表示文檔作為樹結構，其中HTML元素是樹中的相關節點。節點可以有子節點。 同一棵樹級别的節點稱為兄弟姐妹。jQuery周遊是用于描述移動DOM的過程，并根據其與其他元素的關系來查找（選擇）HTML元素的術語。
jQuery可以輕松地周遊DOM并使用HTML元素。
20、DOM周遊
考慮由以下結構表示的HTML：
<html>元素是<body>的父項，它是下一個元素的祖先。<body>元素是<h1>和<a>元素的父元素。<h1>和<a>元素是<body>元素和<html>的後代,稱為子元素。<h1>和<a>元素是兄弟姐妹（他們共享相同的父代）。
摘要:
祖先是指父母，祖父母，曾祖父母等等。後代是一個孩子，孫子，曾孫等等。兄弟姐妹同享同一個父母。
了解DOM元素之間的關系對于能夠正确周遊DOM很重要。
21、DOM周遊
jQuery有很多有用的DOM周遊方法。parent()方法傳回所選元素的直接父元素。 例如：
HTML
22、DOM周遊父類元素
parent()方法隻能周遊單個級别的DOM樹。要擷取所選元素的所有祖先，可以使用parents()方法。
$
上面的代碼為段落的所有父類設定了一個紅色邊框。下面是一些最常用的周遊方法如下：
eq() 方法可用于從多個標明元素中選擇特定元素。例如，如果頁面包含多個div元素，并且我們要選擇第三個元素：
$
索引号從0開始，是以第一個元素的索引号為0。
23、删除元素
使用remove()方法從DOM中删除標明的元素。
<
這将删除Green，第二個段落元素。可以在多個標明元素上使用remove()方法，例如$("p").remove()将删除所有段落。
jQuery remove()方法将删除所選元素及其子元素。
清空内容，empty()方法用于删除所選元素的子元素。
$
這将删除div的所有子元素。
25、事件處理
jQuery提供了一種處理事件的有效方式。 當使用者執行操作（例如單擊元素，移動滑鼠或送出表單）時，會發生事件。當目标元素發生事件時，執行處理函數。
var
可以使用jQuery與以下代碼來處理相同的事件：
$
提供的事件名稱沒有“on”字首（即在jQuery中單擊對應JavaScript中的onclick）。當觸發事件時執行的函數稱為事件處理程式。
26、
$
上面的代碼處理 id="name"的元素的keydown事件，并将id="name"擷取到的值賦給 id ="msg"的元素中。
27、on()方法綁定事件
在jQuery中處理事件的另一種方法是使用on()方法。on()方法用于将事件附加到所選元素。
$
你可以看到，事件名稱作為第一個參數傳遞給on()方法。 第二個參數是處理函數。
on()方法用于将相同的處理函數綁定到多個事件中的時候很有用。 你可以使用空格分隔多個事件名稱, 例如 你可以為點選和dblclick事件使用相同的事件處理程式。
$
off()解除事件綁定,你可以使用off()方法來删除事件處理程式。
$
off()方法的參數是要删除的事件名稱。
28、JQuery的事件對象
每個事件處理函數都可以接收一個事件對象，其中包含與該事件相關的屬性和方法：
- pageX，pageY 事件發生時相對于頁面左上角的滑鼠位置（X和Y坐标）。
- type 鍵入事件的類型（例如“點選”）。
- which 哪個按鈕或鍵被按下。
- data 資料綁定事件時傳入的任何資料。
- target 定位發起事件的DOM元素。
- preventDefault() 阻止事件的預設動作（例如，在連結之後）。
- stopPropagation() 停止冒泡到其他元素的事件。
$
事件對象作為參數(就是以上代碼中的 event 參數)傳遞給事件處理函數。
29、JQuery觸發事件
我們還可以使用trigger()方法以程式設計方式觸發事件。 例如，你可以觸發一個點選事件，而不需要使用者實際點選一個元素：
$
trigger()方法不能用來模仿本機浏覽器事件，比如點選一個檔案文本框。 隻能處理jQuery事件系統中的事件。
30、顯示/隐藏
jQuery有一些易于實作的效果來建立動畫。hide()和show()方法用于隐藏和顯示所選元素。
toggle()方法用于在隐藏和顯示元素之間切換。
$
hide / show / toggle方法可以帶一個速度參數,以毫秒為機關指定動畫速度。
$
hide / show / toggle 方法還有第二個可選參數可選，這是一個在動畫完成後執行回調的方法。
30、淡入/淡出
與 hide / show 方法類似，jQuery提供了 fadeIn / fadeOut 方法，它将一個元素淡入和淡出顯示。和 toggle() 方法在隐藏和顯示之間切換一樣，fadeToggle()方法可以在淡入淡出中進行切換。
$
和toggle()一樣，fadeToggle()也具有兩個可選參數：速度和回調函數。
用于淡入/淡出的另一種方法是fadeTo()，它将淡入/淡出到給定的不透明度（0和1之間的值）。 例如：$("div").fadeTo(1500,0.7);
31、向上/向下滑動
slideUp() 和 slideDown() 方法用于在元素上建立滑動效果。再次，類似于以前的切換方法，slideToggle() 方法提供在滑動效果之間切換，一樣也有兩個可選參數：速度和回調函數。
$
32、動畫
animate() 方法允許您将動畫設定為設定值或相對于目前值的值。你需要将CSS屬性定義為JSON格式的參數（"key":"value"）。第二個參數定義了動畫的速度。例如，以下代碼将div的width屬性在1秒内改變到250px：
$
請注意提供CSS參數的JSON格式。 在處理CSS屬性時，JSON文法也被用于以前的子產品。
你可以使用上述文法對任何CSS屬性進行動畫處理，但有一個重要的事情要記住：當與animate() 方法一起使用時，所有屬性名稱都必須是camel-cased（camelCase是寫複合詞或短語的做法， 每個單詞或縮寫以大寫字母開頭，第一個單詞以小寫形式顯示）。您将需要編寫paddingLeft而不是padding-left，marginRight，而不是margin-right等等。
33、多個動畫設定
多個屬性可以通過用逗号分隔來同時動畫化。
$
也可以定義相對值（該值相對于元素的目前值）。 通過将 += 或 -= 放在值的前面完成：
$
要在動畫完成之前停止動畫，jQuery提供了stop()方法。
34、動畫隊列
預設情況下，jQuery帶有動畫的隊列功能。這意味着如果你寫了多個animate()，則jQuery會為這些方法建立一個“内部”隊列。然後逐個運作動畫。
var
記住，要操縱元素的位置，你需要将元素的CSS位置屬性設定為relative，fixed 或absolute。
animate() 方法，就像 hide / show / fade / slide 方法一樣，可以使用可選的回調函數作為其參數，該參數在目前效果完成後執行。
35、下拉式菜單
讓我們建立一個簡單的下拉菜單，點選菜單項将打開。
<
js
$