jQuery 是一種框架， jQuery 利用選擇器查找要操作的節點（DOM 對象），然後將這些節點封裝成一個 jQuery 對象（封裝的目的有兩個：1、是爲了兼容不同的瀏覽器。2、也爲了簡化代碼）。通過調用 jQuery 對象的方法或者屬性來實現對底層的 DOM 對象的操作。
一、jQuery編程步驟
1、引入 jQuery 框架（ www.jquery.org 下載）， min 爲去掉所有格式的壓縮版
<script language="javascript" src="js/jquery-1.11.3.min.js"></script>
2、使用選擇器查找要操作的節點，該節點會被封裝成一個 jQuery 對象，並返回
var $obj=$('#d1');//ID 選擇器，查找的節點 ID 爲 d1
3、調用 jQuery 對象的方法或者屬性
$obj.css('font-size','60px');//調用 jQuery 的 css()方法，jQuery 是一個大的匿名函數，且內部有很多函數（類似 Java 中的內部類），它的大部分函數返回對象都是 jQuery 對象（它自己），所以可以繼續“．”，例如：
function f1(){
var $obj=$('#d1');
$obj.css('font-size','60px').css('font-style','Microsoft YaHei');
二、jQuery 對象與 DOM 對象相互轉換
1、dom 對象轉化爲 jQuery 對象
使用函數： $(dom 對象)即可，例如：
function f(){
var obj=document.getElementById('d1');
var $obj=$(obj);//將 dom 節點封裝成 jQuery 對象
$obj.html('hello java');
}2、jQuery 對象轉化爲 dom 對象
方式一： $obj.get(0);
方式二： $obj.get()[0];
三、選擇器
jQuery 的選擇器是模仿 CSS 選擇器的語法提供了一種用來方便查找要操作的節點的語法規則。
1、基本選擇器
（1） #id： ID 選擇器，如： $('#d1').css('color','red');
（2） .class：類選擇器，如： $('.s1').css('font-size','60px');
（3） element：元素選擇器，如： $('div').css('font-size','60px');
（4） selector1,selector2...selectorn：選擇器合併，如： $('#d1,p').css('font-size','60px');
（5） *：所有選擇器，如： $('*').css('font-size','60px');
當 jQuery 選擇器查找到了多個 DOM 節點時，仍然是封裝成“一個”jQuery對象，在調用 jQuery 對象的屬性或者方法時，默認情況下，會作用於底層所有的DOM 節點之上。
2、層次選擇器
（1） select1 select2：所有後代（需符合 select2 的要求）。
例： $('#d1 div').css('font-size','60px');
（2） select1>select2：只考慮子節點（需符合 select2 的要求），孫子不管
例： $('#d1>div').css('font-size','60px');
（3） select1+select2：下一個兄弟（需符合 select2 的要求），兒子不管
例： $('#d3+div').css('font-size','60px');
（4） select1~select2：下面所有的兄弟（需符合 select2 的要求），上面的兄弟不管，兄弟中的兒子也不管
例： $('#d2~div').css('background-color','yellow');
3、基本過濾選擇器（過濾器前不能有空格）
（1） :first：第一行。
（2） :last：最後一行。
（3） :not(selector)：把滿足要求的選擇器排除在外。
（4） :even：偶數行，下標從 0 開始。
（5） :odd：奇數行，下標從 0 開始。
（6） :eq(index)：等於下標的元素，下標從 0 開始。
（7） :gt(index)：大於下標的元素，下標從 0 開始。
（8） :lt(index)：小於下標的元素，下標從 0 開始。
4、內容過濾選擇器
（1） :contains(text)：匹配包含給定文本的元素。
（2） :empty：匹配所有不包含子元素或者文本的空元素。
（3） :has(selector)：匹配含有選擇器所匹配的元素的元素。
（4） :parent：匹配含有子元素或者文本的元素（與 empty 正好相反）。
5、可見性過濾選擇器
（1） :hidden 匹配所有不可見元素，或者 type 爲 hidden 的元素。
（2） :visible 匹配所有的可見元素。
6、表單對象屬性過濾選擇器
（1） :enabled：沒有被禁用。
例： $('#form1 input:enabled').attr('disabled',true);//設置屬性，可見元素爲不可見
（2） :disabled：被禁用。
例： $('#form1 input:disabled').css('border','1px dotted red');//設置不可見元素的樣式
$('#form1 input:disabled').attr('disabled',false);//設置屬性，不可見元素爲可見
（3） :checked：單選框、多選框中被選中的選項。
例： alert($('#form2 input:checked').val());//把值輸出，類似於 value 屬性
（4） :selected：下拉列表中被選中的選項。
例： alert($('#form3 option:selected').val());
7、常用表單選擇器
（1） :input： input 元素。（2） :text：文本框。（3） :pasword：密碼框。（4） :radio：單選。
（5） :checkbox：多選。 （6） :submit：提交按鈕。（7） :image：圖片。 （8） :reset：重置按鈕。
（9） :button：普通按鈕。（10） :file：文件。 （11） :hidden：隱藏域。
四、DOM操作
1、查詢
利用選擇器找到要操作的節點之後，獲得節點的值、屬性值、文本以及 html 內容。
（1） html()： html 內容，如： alert($('#d1').html())，相當於 innerHTML 屬性，下例中也會把 span 輸出（輸出標記中的所有內容），即<span>hello jQuery</span>。
（2） text()：文本，如： alert($('#d1').text())，相當於 innerText 屬性。
（3） val()：節點的值，如： alert($('#username').val())，結果爲文本框中輸入的值。
（4） attr()：屬性值，如： alert($('#d1').attr('id'))，結果爲 d1。
此外，這幾個方法也可以用來修改節點的內容、值、文本內容、屬性值。
2、創建
$(html);//直接寫 html 語句即可，如： var $obj=$('<div>hang</div>');
3、插入節點
（1） append()：向每個匹配的元素內部最後追加內容，添加的元素作爲最後一個
例： var $obj=$('<div>123456</div>'); $('body').append($obj);
（2） prepend()：向每個匹配的元素內部最前添加內容，添加的元素作爲第一個
例： var $obj=$('<div>123456</div>'); $('body').prepend($obj);
（3） after()：向每個匹配的元素之後插入內容，在該元素之後添加兄弟節點
例： $('ul').after('<p>hello</p>');
（4） before()：向每個匹配的元素之前插入內容，在該元素之前添加兄弟節點
例： $('ul').before('<p>hello</p>');
4、刪除節點
（1） remove()：刪除節點，如： $('ul').remove();
（2） remove(selector)：刪除滿足 selector 的節點，如： $('ul li').remove('#l2');
（3） empty()： 清空節點，相當於 innerHTML=""，如： $('ul li').empty();
5、屬性
（1） attr('attrName')：讀取屬性。
（2） attr('attrName','value')：設置一個屬性。
（3） attr({"attrName1":"value1","attrName2":"value2"})：設置多個屬性。
（4） removeAttr('attrName')：刪除屬性
6、樣式操作
（1） attr('class','')或者 attr('style','')：讀取和設置。
例：讀取樣式： alert($('#d1').attr('class'));
（2） addClass('')：追加。
例： $('#d1').addClass('s1 s2');//追加 s1 和 s2 兩種樣式
（3） removeClass('') ：移除。
例： $('#d1').removeClass('s1');//移除樣式 s1
（4） removeClass('s1 s2 ...sn') ：移除多個樣式
例： $('#d1').removeClass('s1 s2');//移除樣式 s1 和 s2
（5） removeClass()：刪除所有樣式。
（6） toggleClass('')：樣式來回切換，有該樣式就刪除，沒有就添加。
例： $('#d1').toggleClass('s3');//樣式 s3 來回切換
（7） hasClass('')：是否有某個樣式。
例： alert($('#d1').hasClass('s3'));//返回值 true 或 false
（8） css('')：讀取 style 樣式裏某個屬性的值。
（9） css('','')：設置一個 CSS 樣式。
例： $('#d1').css('border','1px solid red');
（10） css({'':'','':''})：設置多個樣式。
例： $('#d1').css({'border':'1px solid red','font-size':'50px'});
7、遍歷節點
（1） children()：只考慮子元素，不考慮其它後代元素
（2） children(selector)：只考慮子元素，不考慮其它後代元素，還要滿足 selector 的要求（再次過濾）
（3） next()：下一個兄弟
（4） next(selector)：下一個兄弟，還要滿足 selector 的要求（再次過濾）
（5） prev()：上一個兄弟
（6） prev(selector)：上一個兄弟，還要滿足 selector 的要求（再次過濾）
（7） siblings()：兄弟元素
（8） siblings(selector)：兄弟元素，還要滿足 selector 的要求（再次過濾）
（9） find(selector)：從某一種節點開始查找所有符合 selector 要求的後代
（10） parent()：父節點
五、事件
1、事件綁定
方式一： bind( type,function(){} )
例： $('#d1').bind('click',function(){$(this).html('hello java'); });
方式二： click( function(){} );
例如： $('#d1').click(function(){$(this).html('hello java'); });
2、合成事件
（1） hover(enter,leave)：模擬光標懸停事件。
（2）不使用合成事件的方式。
（3） toggle(function1(){},function2(){},...)：模擬光標連續單擊事件。
3、jQuery中事件處理
（1）獲得事件對象
click(function(e){ //e：對底層的事件對象做了一個封裝 });
（2）事件對象的屬性
①event.type：事件類型
②event.target：返回事件源（是 DOM 對象）
③event.pageX/pageY：返回點擊的座標
例：
$(function(){
$('a').click(function(e){//對兩個對象都綁定了 click
//依據事件對象獲得事件源， e 是 jQuery 對象（封裝了底層的事件對象）
var obj=e.target;//target 屬性返回的是一個 dom 對象
alert(obj.innerHTML);
alert(e.pageX+","+e.pageY);//通過事件對象獲得光標點擊的 X、 Y 座標
alert(e.type); }); });
<a href="javascript:;">Cilck 1</a><a href="javascript:;">Cilck 2</a>例：
$(function(){//e 是 Query 封裝後的對象，不能再用底層的 cancelBubble 屬性
$('a').click(function(e){ alert('點擊的是連接');
e.stopPropagation();//停止冒泡 });
$('div').click(function(e){ alert('點擊的是 div'); }); });
<div id="d1"><a href="javascript:;">Cilck Me</a></div>例：
$(function(){
$('a').click(function(e){ var flag=confirm('確定刪除嗎？ ');
if(!flag){ //阻止瀏覽器的默認行爲，即不再向連接地址發請求
e.preventDefault(); } }); });
<a href="del.do">刪除</a>$(function(){
$('#b1').click(function(){
//模擬用戶點擊了 username 文本框，即讓 username 文本框產生焦點獲得事件
$('#username').trigger('focus');
//$('#username').focus();//簡寫形式，模擬獲得焦點
//$('#username').click();//模擬點擊 }); });4、動畫
（1） show()/hide()
①作用：通過同時改變元素的“寬度”和“高度”來實現顯示或隱藏。
②用法： show(速度,[回調函數]);hide 同理
A.回調函數：整個動畫執行完畢之後，會執行該函數。
B.速度： 'slow'， 'fast'， 'normal' 或者使用毫秒數。
（2） slideUp()/slideDown()
①作用：通過同時改變元素的“高度”來實現顯示或隱藏。
②用法：同上。
（3） fadeIn()/fadeOut()
①作用：通過改變元素的不透明度來實現顯示或隱藏。 0 透明 0.5 半透明 1 不透明
②用法：同上。
（4）自定義動畫 animate(params,speed,[callback])
①params：是一個 JavaScript 對象，描述動畫執行結束之後元素的樣式
②speed：速度，只能用毫秒數。
③callback：回調函數。
5、類數組的操作
jQuery 對象裏面可能包含多個 DOM 對象，所謂類數組，指的就是這些 DOM 對象。
（1） each(function(i))：循環遍歷每一個元素， this 代表被遍歷的 DOM 對象， $(this)代表被迭代的 jQuery 對象， i 代表正在被遍歷的那個對象的下標。下標從 0 開始。
例：
$('#b1').click(function(){ var $obj=$('ul li');
$obj.each(function(i){//i：表示正在被遍歷的那個節點的下標，下標從 0 開始
if(i==0){//this：表示正在被遍歷的那個 DOM 對象
$(this).css('font-size','50px');
}else if(i==1){ $(this).css('font-style','italic');
}else{ $(this).css('color','red'); } }); });例：
$('#b1').click(function(){ var $obj=$('ul li');
//eq：取下標對應處的 DOM 對象，然後將這個 DOM 對象封裝成一個 jQuery 對象
var $o=$obj.eq(1); $o.css('font-size','50px');//item2 變 });例：
$('#b1').click(function(){ var $obj=$('ul li');
var $o=$obj.eq(1);//item2
var index=$obj.index($o);//index：返回節點在類數組中的下標
alert(index);//1 });例： $('#b1').click(function(){ var $obj=$('ul li'); alert($obj.length);//3 });
（5） get()：返回 DOM 對象組成的數組。
例： $('#b1').click(function(){ var $obj=$('ul li'); var arr=$obj.get(); arr[2].innerHTML='hello';});
6） get(index)：返回第 index 個 DOM 對象。
例：
$('#b1').click(function(){
var $obj=$('ul li');
var obj=$obj.get(1);//get(index)：取 index 對應處的 DOM 對象
obj.innerHTML='hello jQuery'; });六、jQuery 對 Ajax 編程的支持
1、load()方法
（1） 作用：將服務器返回的數據直接插入到符合要求的節點之上，相當於：obj.innerHTML=服務器返回的數據。
（2）用法： $obj.load(url,[data]);
①url：請求地址，服務器上的某個組件的地址。
②data：請求參數，有兩種形式：
A.請求字符串形式： "name=hang&&age=24"
B.對象形式： {'name':'hang','age':24}
load 方法：當沒有請求參數時，會使用 get 方式向服務器發請求，如果有請求參數，會使用 post 方式向服務器發請求。不支持異步
2、$.get()方法
（1）作用：使用 get 方式向服務器發請求。
（2）用法： $.get(url,[data],[callback],[type]);
①url：請求地址。
②data：請求參數。
③callback：是一個回調函數，格式： function(data,statusText)，data 是服務器返回的數據，statusText是服務器處理的狀態。
④type：服務器返回的數據的類型，有五種：
A、html：返回的是一個 html 文檔。
B、text：返回的是純文本。
C、json：返回的是 json 字符串。
D、xml：返回的是一個 Xml 文檔。
E、script：返回的是一個 javascript 腳本。
3、$.post()方法
（1）作用：使用 post 方式向服務器發請求。
（2）用法：與$.get()方法相同
4、$.ajax()方法
（1）用法： $.ajax( { ... } )，參數順序無所謂。
（2）參數如下：
①url(string)：請求地址。
②type(string)： GET/POST。
③data(object/string)：請求參數。
④dataType(string)：預期服務器返回的數據類型。
⑤success(function)：請求成功後調用的回調函數，有兩個參數 function(data,textStatus)，其中 data 是服務器返回的數據， textStatus 描述狀態的字符串。
⑥error(function)：請求失敗時調用的函數，有三個參數function(xhr,textStatus,errorThrown)：
A.xhr：底層的 XMLHttpRequest 對象。
B.textStatus：錯誤的描述。
C.errorThrown：一般爲 null。
⑦async： true（缺省，異步） /false（同步）。
5、jQuery 的自定義方法
語法： $.fn.funName=function(){...}
6、$.param()方法
語法：var obj={表單的名字:"表單的值"};//組成一個對象
$.param(obj);