jQuery 基礎效果①

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