jQuery簡明參考手冊——30分鐘快速入門jQuery

第一章 選擇器##

---

1、基本選擇器###

<code>$("#id")</code>：id選擇器，返回單個元素
<code>$(".class")</code>：class選擇器，返回集合元素
<code>$("element")</code>：選定指定的元素名匹配的元素，返回集合元素
<code>$("*")</code>：萬用字元選擇器，選擇所有元素，返回集合元素
<code>$("selector1,selector2")</code>：選擇所有選擇器匹配的元素，返回集合元素

2、層次選擇器###

<code>$("ancestor descendant")</code>：選擇ancestor元素的所有descendant後代元素，返回集合元素
<code>$("parent>child")</code>：選擇parent下的child子元素,
<code>$("prev+next")</code>：選擇緊接在prev後面的同輩next元素
<code>$("prev~siblings")</code>：獲取prev後面的所有同輩siblings元素
說明：
<code>$("prev+next")</code>與<code>$("prev").next()</code>效果相等
<code>$("prev~siblings")</code>與<code>$("prev").sibling()</code>效果相等

3、基本過濾選擇器###

<code>:first</code>：選取第一個元素，返回單個元素
<code>:last</code>：選取最後一個元素，返回單個元素
<code>:not(selector)</code>：去除所有給定選擇器所匹配的元素，返回集合元素
<code>:even</code>：選取索引為偶數的所有元素，索引號從0開始，返回集合元素
<code>:odd</code>：選取索引為奇數的所有元素，索引號從0開始，返回集合元素
<code>:ep(index)</code>：選取索引等於index的元素，index從0開始返回單個元素
<code>:gt(index)</code>：選取索引號大於index的所有元素,返回集合元素
<code>:lt(index)</code>：選取索引小於index的所有元素，返回集合元素
<code>:header</code>：選取所有的標題元素，返回集合元素
<code>:animated</code>：選取正在執行動畫的元素，返回集合元素
<code>:focus</code>：選取當前獲取焦點的元素，返回集合元素

4、內容過濾選擇器###

<code>:contains(text)</code>：選取含有文字內容為text的元素，返回集合元素
<code>:empty</code>：選取沒有子節點或者文字的空元素，返回集合元素
<code>:has(selector)</code>：選取含有選擇器所匹配的元素的元素，返回集合元素
<code>:parent</code>：選取含有子節點或者文字的元素，返回集合元素

5、可見性過濾選擇器###

<code>:hidden</code>：選取所有不可見的元素，返回集合元素
<code>:visible</code>：選取所有可見的元素，返回集合元素

6、屬性過濾選擇器###

<code>[attribute]</code>：選取含有此屬性的元素，返回集合元素
<code>:[attribute=value]</code>：選取屬性的值為value的元素，返回集合元素
<code>:[attribute!=value]</code>：選取屬性的值不為value的元素，返回集合元素
<code>:[attribute^=value]</code>：選取屬性的值以value開始的元素，返回集合元素
<code>:[attribute$=value]</code>：選取屬性的值以value結尾的元素，返回集合元素
<code>:[attribute*=value]</code>：選取屬性的值含有value的元素，返回集合元素
<code>:[attribute|=value]</code>：選取屬性的值等於value或者是以value為字首（即“value-”，value後面跟一個連字元）的元素，返回集合元素
<code>:[attribute~=value]</code>：選取屬性的值以空格分隔的值中含有value的元素，返回集合元素
<code>:[attribute1][attribute1]……[attributeN1]</code>：用多個屬性選擇器合併成一個複合屬性選擇器，返回集合元素

7、子元素過濾選擇器###

<code>:nth-child(index/even/odd)</code>：選取父元素下的第index個子元素，index值從1開始，或者選取奇偶子元素,返回集合元素
<code>:first-child</code>：選取父元素下的第一個元素，返回集合元素
<code>:last-child</code>：選取父元素下的最後一個子元素，返回集合元素
<code>:only-child</code>：如果元素是父元素的唯一的元素，則選擇，否則，不選擇，返回集合元素
另外<code>:nth-child()</code>還可以通過數學表示式選取一組特定的元素，如:
<code>:nth-child(3n)</code>：選取父元素下所有3的倍數的子元素（n從1開始，即選取第3，6，9，……個元素）

10、表單選擇器###

<code>:input</code>：選取所有的input、textarea、select、button元素，返回集合元素
<code>:text</code>：選取所有單行文字框，返回集合元素
<code>:password</code>：選取所有的密碼框，返回集合元素
<code>:radio</code>：選取所有的單選框，返回集合元素
<code>:checkbox</code>：選取所有的多選框，返回集合元素
<code>:submit</code>：選取所有提交按鈕，返回集合元素
<code>:image</code>：選取所有的影像按鈕，返回集合元素
<code>:reset</code>：選取所有的重置按鈕，返回集合元素
<code>:button</code>：選取所有的按鈕，返回集合元素
<code>:file</code>：選取所有的上傳域，返回集合元素

9、表單物件屬性過濾選擇器###

<code>:enabled</code>：選取所有可用元素，返回集合元素
<code>:disabled</code>：選取所有不可用元素，返回集合元素
<code>:checked</code>：選取所有被選中的元素（單選框和多選框），返回集合元素
<code>:selected</code>：選取所有被選中的元素（下拉選單），返回集合元素

第二章 DOM操作##

---

1、查詢、設定、刪除屬性###

1、attr()方法：接受一個或兩個引數，一個引數是獲取屬性值，兩個引數是設定屬性,需要設定多個屬性時，attr方法的引數可以是一個由屬性和屬性值組成的json資料格式

$("div").attr("background");//獲取屬性值
$("div").attr("background","blue");//設定屬性值
$("div").attr({"background":"blue","height":"200px"});//設定多個屬性值

2、css()方法：接受一個或兩個引數，當一個引數是屬性名時，獲取屬性值，當兩個引數時，設定屬性第一個引數為屬性名，第二個引數為屬性值，需要設定多個屬性時，css方法的引數可以是一個由屬性和屬性值組成的json資料格式

$("div").css("background");//獲取屬性值
$("div").css("background","blue");//設定屬性值
$("div").css({"background":"blue","height":"200px"});//設定多個屬性值

另外width()方法和height()方法可以直接獲取寬度和高度
3、addClass()：為元素新增class值，可批量新增屬性與值

$("div").addClass("myclass");

4、removeAttr()：刪除指定的屬性

$("div").removeAttr("background");

5、removeClass()：有引數時，刪除指定的class值，沒有引數時，刪除全部的class值

$("div").removeClass("myclass");
$("div").removeClass();

6、hasClass()：判斷匹配的元素是否有某個class值，有則返回true，沒有則返回false

$("div").hasClass("myclass");

2、建立元素、文字、屬性節點###

均可以直接將元素、文字、屬性新增到$()方法中，如：
<code>var p=$("<p title='mytitle'>假裝是標題</p>")</code>

3、插入節點###

1、append()：向元素內部新增節點，如：

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("p").append("<span>我是追加的內容</span>");
結果：
<p>我是內容<span>我是追加的內容</span></p>

2、appendTo()：將元素新增到指定元素內部，即將append方法中的鏈式操作的成員互換位置

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("<span>我是追加的內容</span>").appendTo("p");
結果：
<p>我是內容<span>我是追加的內容</span></p>

3、prepend()：向元素內部前置內容

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("p").prepend("<span>我是追加的內容</span>");
結果：
<p><span>我是追加的內容</span>我是內容</p>

4、prependTo()：將節點前置到指定元素中，即將prepend方法中的鏈式操作中的成員互換位置

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("<span>我是追加的內容</span>").prependTo("p");
結果：
<p><span>我是追加的內容</span>我是內容</p>

5、after()：在每個元素節點後新增節點

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("p").after("<span>我是追加的內容</span>");
結果：
<p>我是內容</p><span>我是追加的內容</span>

6、insertAfter()：講節點插入到指定節點之後，即將after方法中的鏈式操作中的成員互換位置

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("<span>我是追加的內容</span>").insertAfter("p");
結果：
<p>我是內容</p><span>我是追加的內容</span>

7、before()：再節點前面插入節點

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("p").before("<span>我是追加的內容</span>");
結果：
<span>我是追加的內容</span><p>我是內容</p>

8、insertBefore()：將節點插入到指定元素前面

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("<span>我是追加的內容</span>").insertBefore("p");
結果：
<span>我是追加的內容</span><p>我是內容</p>

4、刪除節點###

1、remove()：從DOM中刪除所有匹配的元素，同時該節點所包含的所有後代節點將同時被刪除，因為返回值是刪除節點的引用，因此可以在以後繼續使用這些元素，但是此時這些節點所繫結的事件也會刪除，如：

var $li=$("ul li:eq(1)").remove();//刪除節點
$li.appendTo("ul");//將節點新增回去

2、detach()：和remove()幾乎一樣，不同的是detach方法不會刪除節點所繫結的事件和附加的資料
3、empty()：清空所匹配的節點

$("ul li:eq(1)").empty();//此時第一個li標籤內無任何內容及節點了

5、複製節點###

clone()：複製節點，可以有引數true，當有true引數時，將同時複製節點所繫結的事件，如：

$("ul li:eq(1)").clone(true).apppendTo("ul");

6、替換節點###

1、replaceWith()：將匹配的節點替換成指定的節點

$("p").replaceWith("<ul><li></li></ul>");

2、replaceAll()：用指定的節點替換相應節點，即將replaceWith方法中的鏈式操作中的成員互換位置

$("<ul><li></li></ul>").replaceWith("p");

7、包裹節點###

1、wrap()：將匹配的節點用指定的節點單獨包裹起來

html程式碼：
<p>我是內容</p>
<p>我是另一個內容</p>
jQuery程式碼：
$("p").wrap("<span></span>");
結果：
<span><p>我是內容</p></span>
<span><p>我是另一個內容</p></span>

2、wrapAll()：將匹配的節點用指定的節點全部包裹起來

html程式碼：
<p>我是內容</p>
<p>我是另一個內容</p>
jQuery程式碼：
$("p").wrap("<span></span>");
結果：
<span>
      <p>我是內容</p>
      <p>我是另一個內容</p>
</span>

3、wrapInner()：將匹配的節點內部的節點或者文字內容用指定的節點包裹起來

html程式碼：
<p>我是內容</p>
jQuery程式碼：
$("p").wrapInner("<span></span>");
結果：
<p><span>我是內容</span></p>

8、設定、獲取文字、HTML和值###

1、html()：類似於原生JavaScript中的innerHTML屬性，不含引數時是獲取，包含元素節點和文字節點，當內有字串引數時，是重新設定節點內容和文字內容

$("p").html();

2、text()：類似於原生JavaScript中的innerText屬性，不含引數時是獲取文字節點，當內有字串引數時，是重新設定文字內容

$("p").text("我是內容");

3、val()：類似於原生JavaScript中的value屬性，可以用來獲取和設定元素的值，無論是元素或者文字框，下拉選單或者單選框，如果元素是多選，則返回一個包含所有選擇的值的陣列

9、遍歷節點###

1、children()：獲取所有的子元素集合，返回一個陣列，只考慮子元素，不考慮其他後代元素

html程式碼：
<div>
<p>我是內容
    <sapn>我是內嵌的內容</span>
</p>
<p>我是另一個內容</p>
</div>
jQuery程式碼：
var $div=$("div").children();
$div.length;//返回2

2、next()：獲取匹配元素後面緊鄰的同輩元素，效果類似於$("prev+next")

html程式碼：
<div>
<p>我是內容
</p>
<h1>我是另一個內容</h1>
</div>
jQuery程式碼：
var $h1=$("p").next();//返回h1元素節點

3、prev()：獲取匹配元素前面緊鄰的同輩元素

html程式碼：
<div>
<h1>我是另一個內容</h1>
<p>我是內容</p>
</div>
jQuery程式碼：
var $h1=$("p").next();//返回h1元素節點

4、siblings()：獲取匹配元素的前後所有的同輩元素，類似於$("prev~siblings")

html程式碼：
<div>
<h1>我是另一個內容</h1>
<p>我是內容</p>
<ul>我是列表</ul>
</div>
jQuery程式碼：
var $h1=$("p").next();//返回h1和ul元素節點

5、closest()：獲取最近的符合匹配的一個父元素

html程式碼：
<div>
<div class="div2">
<p>我是內容</p>
</div>
</div>
jQuery程式碼：
var $div=$("p").closest();//返回class為div2的div元素

6、parent()：獲取一個父元素

html程式碼：
<div>
<div class="div2">
<p>我是內容</p>
</div>
</div>
jQuery程式碼：
var $div=$("p").parent();//返回class為div2的div元素

7、parents()：獲取所有匹配的一個祖先元素

html程式碼：
<div>
<div class="div2">
<p>我是內容</p>
</div>
</div>
jQuery程式碼：
var $div=$("p").parents();//返回兩個div元素組成的陣列

10、元素定位###

1、offset()：獲取元素在當前視窗的相對偏移，返回一個物件，物件包含top和left兩個屬性

html程式碼：
<div>
我是內容
</div>
jQuery程式碼：
var $offset=$("div").offset();
var left=$offset.left;
var top=$offset.top;

2、position()：獲取元素相對於最近的一個position樣式屬性設定為relative或者absolute的祖父節點的相對偏移，返回一個物件，物件包含top和left兩個屬性

html程式碼：
<div style="position:relative">
      <div><p>我是內容</p></div>
</div>
jQuery程式碼：
var $position=$("p").position();
var left=$position.left;
var top=$position.top;

3、scrollTop()：獲取元素的滾動條距離頂端的距離
4、scrollLeft()：獲取元素的滾動條距離左側的距離

第三章 事件與動畫##

---

1、載入DOM###

$(document).ready()：和原生的JavaScript的window.onload()方法有類似的功能，window.onload()方法是在網頁中所有的元素（包括元素的所有關聯檔案）完全載入到瀏覽器後才執行，而$(docuemnt).ready()在DOM完全就緒時就可以被呼叫，此時並不意味著這些關聯檔案都已經下載完畢；另外，$(document).ready()可多次使用，而window.onload()只能用一次，多次使用時會出現覆蓋的現象，另外其可以簡寫成$().ready();

2、事件繫結###

bind()：可以有三個引數，第一個引數是事件型別，第二個引數可選，作為event.data屬性值傳給事件物件的額外資料物件，第三個引數是處理函式

bind(type data fn);

常見的事件型別：

blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、
mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keyup、error

另外，像click、mouseover、mouseout這類常用的事件，可以簡寫，如下：

$(function(){
      $("h1").mouseover(function(){
            $(this).next().show()
      }).mouseout(function(){
            $(this).next().hide()
      })
})

3、合成事件###

jQuery中有兩個合成事件——hover()和toggle()方法
1、hover()：用於模擬游標懸停事件，語法

hover(enter,leave);

當游標移動到元素時，會觸發第一個函式，離開時觸發第二個函式
2、toggle()：用於模擬滑鼠連續點選事件，語法

toggle(fn1,fn2,……,fn);

4、阻止事件之外的額外問題##

1、停止事件冒泡
用stopPropagation()方法來停止事件冒泡，如：

$("span").bind("click",function(event){
      //事件處理程式
      event.stopPropagation()
})

2、阻止預設行為
用preventDafault()方法來阻止預設行為，當然也可以用原生JavaScript中的return false如：

$(a").bind("click",function(event){
      //事件處理程式
      event.preventDafault();
      //或者return false;
})

3、事件捕獲
事件捕獲與事件冒泡是剛好兩個相反的過程，jQuery不支援事件捕獲。

5、事件物件##

新增事件物件非常簡單，只需要為函式新增一個引數，一般會用event

$(a").bind("click",function(event){
      //事件處理程式
})

1、事件物件的屬性
(1)event.type：獲取事件的型別

$(a").bind("click",function(event){
      alert(event.type);
})

(2)event.target：獲取觸發事件的物件元素

$(a").bind("click",function(event){
      alert(event.target.href);
})

(3)event.pageX和event.pageY：獲取游標相對於頁面的x座標和y座標

$(a").bind("click",function(event){
      alert(event.pageX);
      alert(event.pageY);
})

(4)event.which：在滑鼠單擊時獲取到滑鼠的左、中、右鍵；在鍵盤事件中獲取到鍵盤的按鍵

$(a").mousedown(function(event){
      alert(event.which);
})

$(a").keyup(function(event){
      alert(event.which);
})

(5)event.metaKey：在鍵盤事件中獲取ctrl按鍵
2、事件物件的方法
(1)event.preventDefault()：阻止預設事件
(2)event.stopPropagation()：阻止事件冒泡

6、移除事件##

unbind()：沒有引數時，刪除所有的繫結事件，可以有兩個引數，第一個引數是事件型別，第二個引數是將要移除的函式，提供了事件型別，則只刪除該事件型別，提供了事件處理函式，則只有這個事件處理函式會被刪除，語法結構如下

unbind(type,data)

$("a").click(function(){
      $("#btn").unbind("click",fn1);
}

另外，對於只需要觸發一次隨後就立即解除繫結的情況，jQuery提供了一種簡寫方法——one()方法，這個方法可以為元素繫結處理函式，當函式觸發一次後，立即被刪除；

7、事件的其他用法##

1、模擬操作
trigger()：此方法可以模擬操作，例如

$("#btn").triggle("click")；

這段程式碼可以觸發id為btn的按鈕的click事件
trigger()方法會觸發瀏覽器的預設事件，如果不想執行瀏覽器的預設操作，可以使用jQuery中的另一個方法triggerHandler()方法
2、繫結多個事件型別
bind可以為元素繫結多個事件型別

$(function(){
      $("div").bind("mouseover mouseout",function(){
            $(this).toggleClass("over");});
})

這段程式碼效果和下方程式碼一樣

$(function(){
      $("div").bind("mouseover",function(){
            $(this).toggleClass("over");
      }).bind("mouseout",function(){
            $(this).toggleClass("over")；
      });
})

8、動畫##

1、show()和hide()：這兩個是jQuery中的最基本的動畫，當這兩個方法不含引數時，效果類似於直接將元素的display屬性分別改為block和none，這兩個方法當有引數時，可以使元素慢慢顯示出來，速度關鍵字有slow、normal、fast，此外，還可以直接指定一個數字作為顯示的時間引數，單位為毫秒，其中slow的顯示時間為600毫秒，normal的顯示時間為400毫秒，fast的顯示時間為200毫秒，這兩個方法是同時改變元素的高度、寬度和不透明度

$("p").toggle(function(){
      $(this).next().hide(600);
},function(){
      $(this).next().show(600);
})

2、fadeIn()和fadeOut()：這兩個函式只改變元素的不透明度，同樣可以有以上的速度引數

$("p").toggle(function(){
      $(this).next().fadeOut();
},function(){
      $(this).next().fadeIn(600);
})

3、slideUp()和slideDown()：這兩個方法只改變元素的高度，slideDown()方法使元素由上到下延伸展示，而slideUp()方法使元素從下到上縮短隱藏，同樣有上述的時間引數

$("p").toggle(function(){
      $(this).next().slideUp();
},function(){
      $(this).next().slideDown(600);
})

4、toggle()：切換元素的可見狀態，如果元素可見，則切換為隱藏，如果元素隱藏，則切換為可見，語法結構

toggle(speed,callback);

$(this).next().toggle();

效果和hide()和show()方法類似
5、slideToggle()：通過高度來切換元素的可見性，語法結構

slideToggle(speed,easing,callback);

6、fadeTo()：把元素的不透明度以漸進的方式調整到指定的值，這個動畫只調整元素的不透明度，語法結構

fadeTo(speed,opacity,callback)

$(this).fadeTo(100,0.3);

7、fadeToggle()：通過不透明度來切換元素的可見性，語法結構

fadeToggle(speed,easing,callback);

8、animate()：自定義動畫，語法結構

animate(params,speed,callback);

params：一個包含樣式屬性及值的對映，如：{left:"400px",height:"500px"}
speed：速度引數，可選
callback：在動畫完成後執行的函式，可選
另外animate可以新增累加與累減動畫，如：

$(function(){
      $("p").click(function(){
            $(this).animate({left:"+=500px"},300)
      });
});

利用animate中的第一個引數很容易實現同時執行多個動畫的效果，而需要按順序執行動畫，只需要順序寫animate動畫即可，另外也可以使用鏈式操作

$(this).animate({left:"500px"},300);
$(this).animate({height:"500px"},300);

等效於

$(this).animate({left:"500px"},300).animate({height:"500px"},300);

9、判斷元素是否處於動畫狀態

if(!$("p").is(":animated")){
      //沒有處於動畫狀態時執行的程式
}

10、延遲動畫
延遲動畫利用delay()方法

$(this).animate({left:"500px"},200).delay(1000);