一、選擇網頁元素
jQuery的基本設計和主要用法，就是"選擇某個網頁元素，然後對其進行某種操作"。這是它區別於其他函數庫的根本特徵。
使用jQuery的第一步，往往就是將一個選擇表達式，放進建構子jQuery()(簡寫為$)，然後得到被選取的元素。
選擇表達式可以是CSS選擇器：
$('#myId')//選擇ID為myId的網頁元素
$('div.myClass')//選擇class為myClass的div元素
$('input[name=first]')//選擇name屬性等於first的input元素
也可以是jQuery特有的表達式：
程式碼如下:
$('a:first')//選擇網頁中第一個a元素
$(' tr:odd')//選擇表格的奇數行
$('#myForm :input')//選擇表單中的input元素
$('div:visible') //選擇可見的div元素
$('div:gt(2)')//選出所有的div元素，除了前三個
$('div:animated')//選擇目前處於動畫狀態的div元素
二、改變結果集如果選取多個元素，jQuery提供篩選器，可以縮小結果集：
程式碼如下:
$('div').has('p'); //選取包含p元素的div元素
$(' div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素
有一些時候，我們需要從結果集出發，移動到附近的相關元素，jQuery也提供了在DOM樹上的移動方法：
程式碼如下:
$('div').next('p'); //選擇div元素後面的第一個p元素
$(' div').parent(); //選擇div元素的父元素
$('div').closest('form'); //選擇離div最近的form父元素
$(' div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
三、鏈式操作選取網頁元素以後，就可以對它做某種操作。
jQuery允許將所有操作連接在一起，以鏈條的形式寫出來，例如：
程式碼如下:
$('div').find('h3').eq(2).html('Hello');
我們可以這樣拆封開來，就是下面這樣：
程式碼如下:
$('div')//找到div元素
.find('h3')//選擇其中的h3元素
.eq(2)//選擇第3個h3元素
.html('Hello'); //將它的內容改為Hello
這是jQuery最令人稱道、最方便的特色。它的原理在於每一步的jQuery操作，返回的都是一個jQuery對象，所以不同操作可以連在一起。
jQuery也提供了.end() 方法，使得結果集可以後退一步：
程式碼如下:
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end()/ /退回到選取所有的h3元素的那一步
.eq(0)//選取第一個h3元素
.html('World'); //將它的內容改為World
四、元素的操作：取值與賦值
操作網頁元素，最常見的需求是取得它們的值，或是將它們賦值。
jQuery使用同一個函數，來完成取值 (getter) 和賦值 (setter)。 到底是取值還是賦值，由函數的參數決定。
$('h1').html(); //html()沒有參數，表示取出h1的值$('h1').html('Hello'); //html()有參數Hello，表示h1賦值
常見的取值與賦值函數如下：
複製程式碼
程式碼如下🎜>
.html() 取出或設定html內容
.text() 取出或設定text內容
.attr() 取出或設定某個屬性的值
.width() 取出或設定某個元素的寬度
.height() 取出或設定某個元素的高度
.val() 取出某個表單元素的值
需要注意的是，如果結果集包含多個元素，那麼賦值的時候，將對其中所有的元素賦值;取值的時候，則是只取出第一個元素的值(.text()例外，它取出所有元素的text內容) 。
五、元素的操作：移動
如果要移動選取的元素，有兩種方法：一種是直接移動該元素，另一種是移動其他元素，使得目標元素達到我們想要的位置。
假設我們選取了一個div元素，需要把它移到p元素後面。
第一個方法是使用.insertAfter() ，把div元素移動p元素後面：
複製程式碼
程式碼如下:
$('div').insertAfter('p');
第二種方法是使用.after() ，把p元素加到div元素前面：
程式碼如下:
$('p').after('div');
表面上看，這兩種方法的效果是一樣的，唯一的差異似乎只是操作視角的不同。但實際上，它們有一個重大差別，那就是返回的元素不一樣。第一種方法傳回div元素，第二種方法傳回p元素。你可以根據需要，選擇到底使用哪一種方法。
程式碼如下:
.insertAfter()和.after()：在現存元素的外部，從後面插入元素
.insertBefore()和.before()：在現存元素的外部，從前面插入元素
. appendTo()和.append()：在現存元素的內部，從後面插入元素 .prependTo()和.prepend()：在現存元素的內部，從前面插入元素
六、元素的操作：複製、刪除與建立
複製元素使用 .clone()。
刪除元素使用 .remove()和.detach()。 兩者的差別在於，前者不保留被刪除元素的事件，後者保留，有利於重新插入文件時使用。
清空元素內容(但是不刪除該元素)使用 .empty()。
建立新元素的方法很簡單，只要把新元素直接傳入jQuery的建構子就行了：
複製程式碼
$('
new list item
');
$('ul').append('list item
');
七、工具方法
複製程式碼 程式碼如下:
$.trim() 去除字串兩端的空格。
$.each() 遍歷一個陣列或物件。
$.inArray() 傳回一個值在陣列中的索引位置。如果該值不在數組中，則傳回-1。
$.grep() 傳回數組中符合某種標準的元素。
$.extend() 將多個對象，合併為第一個對象。
$.makeArray() 將物件轉換為陣列。
$.type() 判斷物件的類別（函數物件、日期物件、陣列物件、正規物件等等）。
$.isArray() 判斷某個參數是否為陣列。
$.isEmptyObject() 判斷某個物件是否為空（不含有任何屬性）。
$.isFunction() 判斷某個參數是否為函數。
$.isPlainObject() 判斷某參數是否為用"{}"或"new Object"建立的物件。
$.support() 判斷瀏覽器是否支援某個特性。
八、事件操作
jQuery可以對網頁元素綁定事件。根據不同的事件，運行相應的函數。
$('p').click(() {
alert('Hello');
});
目前，jQuery主要支援下列事件：
.blur() 表單元素失去焦點。
.change() 表單元素的值改變
.click() 滑鼠點選
.dblclick() 滑鼠雙擊
.focus() 表單元素取得焦點
.focusin()子元素獲得焦點
.focusout() 子元素失去焦點
.hover() 同時為mouseenter和mouseleave事件指定處理函數
.keydown() 按下鍵盤（長時間按鍵，只回傳一個事件)
.keypress() 按下鍵盤（長時間按鍵，將回傳多個事件）
.keyup() 放開鍵盤
.load() 元素載入完畢
.mousedown() 按下滑鼠
.mouseenter() 滑鼠離開（進入子元素不觸發）
.mouseleave() 滑鼠離開（離開子元素不觸發）
.mousemove() 滑鼠在元素內部移動
. mouseout() 滑鼠離開（離開子元素也觸發）
.mouseover() 滑鼠離開（離開子元素也觸發）
.mouseover() 滑鼠進入（進入子元素也觸發）
.mouseup() 放開滑鼠
.ready() DOM載入完成
.resize() 瀏覽器視窗的大小改變
.scroll() 捲軸的位置改變
.select() 使用者選取文字方塊中的內容
.submit() 使用者提交表單
.toggle() 依照滑鼠點選的次數，依序執行多個函數
.unload() 使用者離開頁面
以上這些事件在jQuery內部，都是.bind() 的便利方式。使用.bind() 可以更靈活地控制事件，例如為多個事件綁定同一個函數：
程式碼如下:
$('input').bind('click change'， //同時綁定click與change事件
function(){
') ;
}
);
如果你只想讓事件運作一次，這時可以使用 .one() 方法。
程式碼如下:
$("p").one("click" ， function(){
alert("Hello"); //只運作一次，以後的點擊不會運作
});
.unbind() 用來解除事件綁定。
程式碼如下:
$('p').unbind('click' );
所有的事件處理函數，都可以接受一個事件物件(event object) 作為參數，例如下面範例中的e：
程式碼如下:
$("p").click(function(e){
alert(e.type); //"click "
});
這個事件物件有一些很有用的屬性和方法：
程式碼如下:
程式碼如下:
event.pageX 事件發生時，滑鼠距離網頁左上角的水平距離event.pageY 事件發生時，滑鼠距離網頁左上角的垂直距離
event.type 事件的類型(例如click)
event.which 按下了哪一個鍵
複製程式碼
程式碼如下:
$('a').click(function(){
複製程式碼
程式碼如下:$('a').click();
$('a').trigger('click');
複製程式碼
程式碼如下:
.fadeIn() 淡入
.fadeOut() 淡出
.fadeTo() 調整透明度
.hide() 隱藏元素.show() 顯示元素
.slideDown() 向下展開
.slideUp() 向上捲起
.slideToggle() 依序展開或捲起某個元素.toggle() 依序展示或隱藏某個元素除了.show()和.hide()， 所有其他特效的預設執行時間都是400ms(毫秒)，但是你可以改變這個設定。
複製程式碼
程式碼如下:
複製程式碼
程式碼如下:
複製程式碼
程式碼如下:
$('div').animate(>
$('div').animate( > {
left : " =50"，//不斷右移
opacity : " =50"，//不斷右移
opacity : 0.2//指定透明度 },300,// 持續時間 function(){ alert(' done!'); }//回呼函數 );
.stop()和.delay()用來停止或延緩特效的執行。 $.fx.off若設定為true，則關閉所有網頁特效。
