jQuery選擇器
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改爲紅色：
由於 jQuery 是爲處理 HTML 事件而特別設計的，那麼當您遵循以下原則時，您的代碼會更恰當且更易維護：
- 把所有 jQuery 代碼置於事件處理函數中
- 把所有事件處理函數置於文檔就緒事件處理器中
- 把 jQuery 代碼置於單獨的 .js 文件中
- 如果存在名稱衝突，則重命名 jQuery 庫
| Event 函數 | 綁定函數至 |
|---|---|
| $(document).ready(function) | 將函數綁定到文檔的就緒事件（當文檔完成加載時） |
| $(selector).click(function) | 觸發或將函數綁定到被選元素的點擊事件 |
| $(selector).dblclick(function) | 觸發或將函數綁定到被選元素的雙擊事件 |
| $(selector).focus(function) | 觸發或將函數綁定到被選元素的獲得焦點事件 |
| $(selector).mouseover(function) | 觸發或將函數綁定到被選元素的鼠標懸停事件 |
jQuery 名稱衝突
jQuery 使用 $ 符號作爲 jQuery 的簡介方式。
某些其他 JavaScript 庫中的函數（比如 Prototype）同樣使用 $ 符號。
jQuery 使用名爲 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。
顯示隱藏
jQuery hide() 和 show()
$(selector).hide(speed,callback);$(selector).show(speed,callback);可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
jQuery toggle()
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，並隱藏已顯示的元素：
淡入淡出
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
語法：
$(selector).fadeToggle(speed,callback);可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 fading 完成後所執行的函數名稱。
jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變爲給定的不透明度（值介於 0 與 1 之間）。
語法：
$(selector).fadeTo(speed,opacity,callback);必需的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。
可選的 callback 參數是該函數完成後所執行的函數名稱。
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
$(selector).slideToggle(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。
動畫效果
停止動畫
jQuery 動畫 - animate() 方法
jQuery animate() 方法用於創建自定義動畫。
語法：
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。
提示：默認地，所有 HTML 元素都有一個靜態位置，且無法移動。
如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！
提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？
是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時，色彩動畫並不包含在覈心 jQuery 庫中。
如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。
也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：
默認地，jQuery 提供針對動畫的隊列功能。
這意味着如果您在彼此之後編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然後逐一運行這些 animate 調用。
實例 1
隱藏，如果您希望在彼此之後執行不同的動畫，那麼我們要利用隊列功能：
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });實例 2
下面的例子把 <div> 元素移動到右邊，然後增加文本的字號：
$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });
jQuery stop() 方法
jQuery stop() 方法用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。
語法
$(selector).stop(stopAll,goToEnd);可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
因此，默認地，stop() 會清除在被選元素上指定的當前動畫。
jQuery Callback 函數
當動畫 100% 完成後，即調用 Callback 函數。
典型的語法：
$(selector).hide(speed,callback)
callback 參數是一個在 hide 操作完成後被執行的函數。
Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。
提示：這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。
下面的例子把 css(), slideUp(), and slideDown() 鏈接在一起。"p1" 元素首先會變爲紅色，然後向上滑動，然後向下滑動：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);