jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。對於網頁開發者來說，學會jQuery是必要的。因為它讓你了解業界最通用的技術，為將來學習更高級的庫打下基礎，並且確實可以很輕松地做出許多復雜的效果。
一、選擇網頁元素jQuery的基本設計和主要用法，就是"選擇某個網頁元素，然後對其進行某種操作"。這是它區別於其他函數庫的根本特點。
使用jQuery的第一步，往往就是將一個選擇表達式，放進構造函數jQuery()(簡寫為$)，然後得到被選中的元素。
選擇表達式可以是CSS選擇器：
1 $(document)//選擇整個文檔對象
2 $('#myId')//選擇ID為myId的網頁元素
3 $('div.myClass')//選擇class為myClass的div元素
4 $('input[name=first]')//選擇name屬性等於first的input元素
也可以是jQuery特有的表達式：
1 $('a:first')//選擇網頁中第一個a元素
2 $('tr:odd')//選擇表格的奇數行
3 $('#myForm :input')//選擇表單中的input元素
4 $('div:visible') //選擇可見的div元素
5 $('div:gt(2)')//選擇所有的div元素，除了前三個
6 $('div:animated')//選擇當前處於動畫狀態的div元素
二、改變結果集
如果選中多個元素，jQuery提供過濾器，可以縮小結果集：
1 $('div').has('p'); //選擇包含p元素的div元素
2 $('div').not('.myClass'); //選擇class不等於myClass的div元素
3 $('div').filter('.myClass'); //選擇class等於myClass的div元素
4 $('div').first(); //選擇第1個div元素
5 $('div').eq(5); //選擇第6個div元素
有一些時候，我們需要從結果集出發，移動到附近的相關元素，jQuery也提供了在DOM樹上的移動方法：
1 $('div').next('p'); //選擇div元素後面的第一個p元素
2 $('div').parent(); //選擇div元素的父元素
3 $('div').closest('form'); //選擇離div最近的那個form父元素
4 $('div').children(); //選擇div的所有子元素
5 $('div').siblings(); //選擇div的同級元素
三、鏈式操作
選中網頁元素以後，就可以對它進行某種操作。
jQuery允許將所有操作連接在一起，以鏈條的形式寫出來，比如：
1 $('div').find('h3').eq(2).html('Hello');
我們可以這樣拆封開來，就是下面這樣：
1 $('div')//找到div元素
2 .find('h3')//選擇其中的h3元素
3 .eq(2)//選擇第3個h3元素
4 .html('Hello'); //將它的內容改為Hello
這是jQuery最令人稱道、最方便的特點。它的原理在於每一步的jQuery操作，返回的都是一個jQuery對象，所以不同操作可以連在一起。
jQuery還提供了.end()方法，使得結果集可以後退一步：
1 $('div')
2 .find('h3')
3 .eq(2)
4 .html('Hello')
5 .end()//退回到選中所有的h3元素的那一步
6 .eq(0)//選中第一個h3元素
7 .html('World'); //將它的內容改為World
四、元素的操作：取值和賦值
操作網頁元素，最常見的需求是取得它們的值，或者對它們進行賦值。
jQuery使用同一個函數，來完成取值(getter)和賦值(setter)。到底是取值還是賦值，由函數的參數決定。
View Code
$('h1').html(); //html()沒有參數，表示取出h1的值 $('h1').html('Hello'); //html()有參數Hello，表示對h1進行賦值
常見的取值和賦值函數如下：
.html()
.text() 取出或設置text內容
.attr() 取出或設置某個屬性的值
.width() 取出或設置某個元素的寬度
.height() 取出或設置某個元素的高度
.val()
取出或設置html內容 取出某個表單元素的值
取出或設置html內容 取出某個表單元素的值
需要注意的是，如果結果集包含多個元素，那麼賦值的時候，將對其中所有的元素賦值;取值的時候，則是只取出第一個元素的值(.text()例外，它取出所有元素的text內容)。
五、元素的操作：移動
如果要移動選中的元素，有兩種方法：一種是直接移動該元素，另一種是移動其他元素，使得目標元素達到我們想要的位置。
假定我們選中了一個div元素，需要把它移動到p元素後面。
第一種方法是使用.insertAfter()，把div元素移動p元素後面：
$('div').insertAfter('p');
第二種方法是使用.after()，把p元素加到div元素前面：
$('p').after('div');
表面上看，這兩種方法的效果是一樣的，唯一的不同似乎只是操作視角的不同。但是實際上，它們有一個重大差別，那就是返回的元素不一樣。第一種方法返回div元素，第二種方法返回p元素。你可以根據需要，選擇到底使用哪一種方法。
使用這種模式的操作方法，一共有四對
1 .insertAfter()和.after()：在現存元素的外部，從後面插入元素
2 .insertBefore()和.before()：在現存元素的外部，從前面插入元素
3 .appendTo()和.append()：在現存元素的內部，從後面插入元素
4 .prependTo()和.prepend()
5 ：在現存元素的內部，從前面插入元素
六、元素的操作：復制、刪除和創建
復制元素使用.clone()。
刪除元素使用.remove()和.detach()。兩者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於重新插入文檔時使用。
清空元素內容(但是不刪除該元素)使用.empty()。
創建新元素的方法非常簡單，只要把新元素直接傳入jQuery的構造函數就行了：
1 $('<p>Hello</p>');
2 $('<li class="new">new list item</li>');
3 $('ul').append('<li>list item</li>');
七、工具方法
除了對選中的元素進行操作以外，jQuery還提供一些工具方法(utility)，不必選中元素，就可以直接使用。
如果你懂得Javascript語言的繼承原理，那麼就能理解工具方法的實質。它是定義在jQuery構造函數上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定義在構造函數的prototype對象上的方法，即jQuery.prototype.method()，所以必須生成實例(即選中元素)後使用。如果不理解這種區別，問題也不大，只要把工具方法理解成，是像javascript原生函數那樣，可以直接使用的方法就行了。
常用的工具方法有以下幾種：
1 $.trim() 去除字符串兩端的空格。
2 $.each() 遍歷一個數組或對象。
3 $.inArray() 返回一個值在數組中的索引位置。如果該值不在數組中，則返回-1。
4 $.grep() 返回數組中符合某種標准的元素。
5 $.extend() 將多個對象，合並到第一個對象。
6 $.makeArray() 將對象轉化為數組。
7 $.type() 判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。
8 $.isArray() 判斷某個參數是否為數組。
9 $.isEmptyObject() 判斷某個對象是否為空（不含有任何屬性）。
10 $.isFunction() 判斷某個參數是否為函數。
11 $.isPlainObject() 判斷某個參數是否為用"{}"或"new Object"建立的對象。
12 $.support() 判斷浏覽器是否支持某個特性。
八、事件操作
jQuery可以對網頁元素綁定事件。根據不同的事件，運行相應的函數。
1 $('p').click(function(){
2 alert('Hello');
3 });
目前，jQuery主要支持以下事件：
1 .blur() 表單元素失去焦點。
2 .change() 表單元素的值發生變化
3 .click() 鼠標單擊
4 .dblclick() 鼠標雙擊
5 .focus() 表單元素獲得焦點
6 .focusin() 子元素獲得焦點
7 .focusout() 子元素失去焦點
8 .hover() 同時為mouseenter和mousele