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);

最后是一個廣告貼，最近新開了一個分享技術的公眾號，歡迎大家關注??

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 國家電網公司企業標準（Q/GDW）- 面向對象的用電信息數據交換協議 - 報批稿：20170802 前言： 排版 ...
    庭說閱讀 11,145評論 6贊 13
  • 一、樣式篇 第1章 初識jQuery （1）環境搭建 進入官方網站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,451評論 0贊 44
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具（例如配置管理，服務發現，斷路器，智...
    卡卡羅2017閱讀 134,915評論 18贊 139
  • 沒有什么比殺死自己更決絕的 可我還是還是殺死了我 三個人 一個肉體 擁擠和猶豫 戰爭要換來和平 死亡得到永生 你在...
    關馨仁閱讀 340評論 0贊 1
  • 我們程序員作為一個長期從事編程活動的程序員都期望在一個相對短的時間能爬到一個足夠高的職位，或者能順利的退休。 但是...
    Picasso0710閱讀 323評論 0贊 3