jQuery 語(yǔ)法實(shí)例

• $(this).hide()
  演示 jQuery hide() 函數(shù)，隱藏當(dāng)前的 HTML 元素。
• $("#test").hide()
  演示 jQuery hide() 函數(shù)，隱藏 id="test" 的元素。
• $("p").hide()
  演示 jQuery hide() 函數(shù)，隱藏所有 <p> 元素。
• $(".test").hide()
  演示 jQuery hide() 函數(shù)，隱藏所有 class="test" 的元素。

Jquery 語(yǔ)法

jquery 語(yǔ)法是為HTML元素的選取編制的，可以對(duì)元素執(zhí)行某些操作。
基礎(chǔ)語(yǔ)法就是：$(selector).action()

• $ = jQuery
• 選擇符（selector） HTML 元素
• jQuery 的action（）執(zhí)行對(duì)元素的操作。

為什么所有 jQuery 函數(shù)位于一個(gè) document ready 函數(shù)中？

$(document).ready(function(){

--- jQuery functions go here ----

});

答：這是為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼。
如果在文檔沒(méi)有完全加載之前就運(yùn)行函數(shù)，操作可能失敗。下面是兩個(gè)具體的例子：

• 試圖隱藏一個(gè)不存在的元素
• 獲得未完全加載的圖像的大小

JQuery選擇器

選擇器須臾對(duì)元素組或單個(gè)元素進(jìn)行操作。

jQuery 元素選擇器

jQuery使用css選擇器來(lái)選取HTNL元素。

• $("p") 選取<p>元素
• $("p.intro")選取所有 class = "intro"的<p>元素。
• $("p#intro")選取所有 id = "intro"的p元素

JQuery屬性選擇器

JQuery使用Xpath表達(dá)式來(lái)選擇帶有給定屬性的元素。

• $("[href]") 選取所有帶有 href 屬性的元素。
• $("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
• $("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
• $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。

JQuery CSS 選擇器

• $("p").css("background-color","red");

• $(this) 當(dāng)前 HTML 元素
• $("p") 所有 <p> 元素
• $("p.intro") 所有 class="intro" 的 <p> 元素
• $(".intro") 所有 class="intro" 的元素
• $("#intro") id="intro" 的元素
• $("ul li:first") 每個(gè) <ul> 的第一個(gè) <li> 元素
• $("[href$='.jpg']") 所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性
• $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

Event 函數(shù) 綁定函數(shù)至

• $(document).ready(function) 將函數(shù)綁定到文檔的就緒事件（當(dāng)文檔完成加載時(shí)）
• $(selector).click(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點(diǎn)擊事件
• $(selector).dblclick(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
• $(selector).focus(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點(diǎn)事件
• $(selector).mouseover(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件

jQuery toggle()

通過(guò) jQuery，您可以使用 toggle() 方法來(lái)切換 hide() 和 show() 方法。
顯示被隱藏的元素，并隱藏已顯示的元素
$(selector).toggle(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 toggle() 方法完成后所執(zhí)行的函數(shù)名稱。

jQuery 效果 - 淡入淡出

通過(guò) jQuery，您可以實(shí)現(xiàn)元素的淡入淡出效果。

• jQuery fadeIn()用于淡入已隱藏的元素。
  $(selector).fadeIn(speed,callback);
  可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
  可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

演示 jQuery fadeIn() 方法。

• jQuery fadeOut()方法用于淡出可見(jiàn)元素。
  $(selector).fadeOut(speed,callback);
  可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
  可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

演示 jQuery fadeOut() 方法。

• jQuery fadeToggle()方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
  演示 jQuery fadeToggle() 方法。
  如果元素已淡出，則 fadeToggle() 會(huì)向元素添加淡入效果。
  如果元素已淡入，則 fadeToggle() 會(huì)向元素添加淡出效果。
  $(selector).fadeToggle(speed,callback);
  可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
  可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

• jQuery fadeTo()方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。
  $(selector).fadeTo(speed,opacity,callback);
  必需的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
  fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。
  可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

演示 jQuery fadeTo() 方法。

jQuery 效果 - 滑動(dòng)

• jQuery slideDown() 用于向下滑動(dòng)元素
  $(selector).slideDown(speed,callback)
  可選的speed參數(shù)規(guī)定效果的時(shí)長(zhǎng)，它可以取以下值：slow，fast，毫秒
  可選的callback參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱

$("#flip").click(function(){
  $("#panel").slideDown();
  })

• jQuery slideUp() 用于向上滑動(dòng)元素
  $(selector).slideUp(speed,callback)

• jQuery slideToggle() 方法
  jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。
  如果元素向下滑動(dòng)，則 slideToggle() 可向上滑動(dòng)它們。
  如果元素向上滑動(dòng)，則 slideToggle() 可向下滑動(dòng)它們。
  $(selector).slideToggle(speed,callback);

jQuery效果 - 動(dòng)畫

• jQuery animate() 允許創(chuàng)建自定義的動(dòng)畫
  $(selector).animate({params},speed,callback);
  必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
  可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
  可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。

$("button").click(function(){
  $("div").animate({left:'250px'});
});

可以用 animate() 方法來(lái)操作所有 CSS 屬性嗎？

是的，幾乎可以！不過(guò)，需要記住一件重要的事情：當(dāng)使用 animate() 時(shí)，必須使用 Camel 標(biāo)記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時(shí)，色彩動(dòng)畫并不包含在核心 jQuery 庫(kù)中。
如果需要生成顏色動(dòng)畫，您需要從 jQuery.com 下載 Color Animations 插件。

jQuery 停止動(dòng)畫

• jQuery stop() 方法
  jQuery stop() 方法用于停止動(dòng)畫或效果，在它們完成之前。
  stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫。
  $(selector).stop(stopAll,goToEnd);
  可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是 false，即僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行。
  可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是 false。
  因此，默認(rèn)地，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫。

jQuery Callback 函數(shù)

Callback 函數(shù)在當(dāng)前動(dòng)畫 100% 完成之后執(zhí)行。
許多 jQuery 函數(shù)涉及動(dòng)畫。這些函數(shù)也許會(huì)將 speed 或 duration 作為可選參數(shù)。
例子：$("p").hide("slow")
speed 或 duration 參數(shù)可以設(shè)置許多不同的值，比如 "slow", "fast", "normal" 或毫秒。

$("button").click(function(){
$("p").hide(1000);
});

(待更新)