警告
請(qǐng)使用 document.write() 僅僅向文檔輸出寫內(nèi)容杉辙。
如果在文檔已完成加載后執(zhí)行 document.write郎逃,整個(gè) HTML 頁(yè)面將被覆蓋:
.
jQuery 安裝
把 jQuery 添加到您的網(wǎng)頁(yè)
如需使用 jQuery缝左,您需要下載 jQuery 庫(kù)(會(huì)在下面為您講解)姑食,然后把它包含在希望使用的網(wǎng)頁(yè)中宰僧。
jQuery 庫(kù)是一個(gè) JavaScript 文件主巍,您可以使用 HTML 的 <script> 標(biāo)簽引用它:
<head><script src="jquery.js"></script></head>
請(qǐng)注意笋敞,<script> 標(biāo)簽應(yīng)該位于頁(yè)面的 <head> 部分碱蒙。
下載 jQuery
有兩個(gè)版本的 jQuery 可供下載:
Production version - 用于實(shí)際的網(wǎng)站中,已被精簡(jiǎn)和壓縮夯巷。
Development version - 用于測(cè)試和開(kāi)發(fā)(未壓縮赛惩,是可讀的代碼)
這兩個(gè)版本都可以從 jQuery.com 下載。
提示:您可以把下載文件放到與頁(yè)面相同的目錄中趁餐,這樣更方便使用喷兼。
替代方案
如果您不希望下載并存放 jQuery,那么也可以通過(guò) CDN(內(nèi)容分發(fā)網(wǎng)絡(luò)) 引用它后雷。
谷歌和微軟的服務(wù)器都存有 jQuery 季惯。
如需從谷歌或微軟引用 jQuery,請(qǐng)使用以下代碼之一:
-
Google CDN:
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script></head>
親自試一試
提示:通過(guò) Google CDN 來(lái)獲得最新可用的版本:
如果您觀察上什么的 Google URL - 在 URL 中規(guī)定了 jQuery 版本 (1.8.0)臀突。如果您希望使用最新版本的 jQuery勉抓,也可以從版本字符串的末尾(比如本例 1.8)刪除一個(gè)數(shù)字,谷歌會(huì)返回 1.8 系列中最新的可用版本(1.8.0候学、1.8.1 等等)藕筋,或者也可以只剩第一個(gè)數(shù)字,那么谷歌會(huì)返回 1 系列中最新的可用版本(從 1.1.0 到 1.9.9)梳码。
-
Microsoft CDN:
<head><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script></head>
親自試一試
提示:使用谷歌或微軟的 jQuery隐圾,有一個(gè)很大的優(yōu)勢(shì):
許多用戶在訪問(wèn)其他站點(diǎn)時(shí)伍掀,已經(jīng)從谷歌或微軟加載過(guò) jQuery。所有結(jié)果是暇藏,當(dāng)他們?cè)L問(wèn)您的站點(diǎn)時(shí)蜜笤,會(huì)從緩存中加載 jQuery,這樣可以減少加載時(shí)間盐碱。同時(shí)把兔,大多數(shù) CDN 都可以確保當(dāng)用戶向其請(qǐng)求文件時(shí),會(huì)從離用戶最近的服務(wù)器上返回響應(yīng)甸各,這樣也可以提高加載速度垛贤。
jQuery 語(yǔ)法
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()
- 美元符號(hào)定義 jQuery
- 選擇符(selector)“查詢”和“查找” HTML 元素
- jQuery 的 action() 執(zhí)行對(duì)元素的操作
示例
$(this).hide() - 隱藏當(dāng)前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
提示:jQuery 使用的語(yǔ)法是 XPath 與 CSS 選擇器語(yǔ)法的組合牧嫉。
文檔就緒函數(shù)
在實(shí)例中的所有 jQuery 函數(shù)位于一個(gè) document ready 函數(shù)中:
$(document).ready(function(){--- jQuery functions go here ----});
這是為了防止文檔在完全加載(就緒)之前運(yùn)行 jQuery 代碼剂跟。
如果在文檔沒(méi)有完全加載之前就運(yùn)行函數(shù),操作可能失敗酣藻。下面是兩個(gè)具體的例子:
- 試圖隱藏一個(gè)不存在的元素
- 獲得未完全加載的圖像的大小
jQuery 選擇器
在 HTML DOM 術(shù)語(yǔ)中:
選擇器允許您對(duì) DOM 元素組或單個(gè) DOM 節(jié)點(diǎn)進(jìn)行操作曹洽。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來(lái)選取 HTML 元素。
$("p") 選取 < p> 元素辽剧。
$("p.intro") 選取所有 class="intro" 的 < p> 元素送淆。
$("p#demo") 選取所有 id="demo" 的 < p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來(lái)選擇帶有給定屬性的元素怕轿。
$("[href]") 選取所有帶有 href 屬性的元素偷崩。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素撞羽。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素阐斜。
jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色:
實(shí)例
$("p").css("background-color","red");
親自試一試
更多的選擇器實(shí)例
jQuery 選擇器參考手冊(cè)
jQuery 事件
jQuery 是為事件處理特別設(shè)計(jì)的放吩。
jQuery 事件函數(shù)
jQuery 事件處理方法是 jQuery 中的核心函數(shù)智听。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法。術(shù)語(yǔ)由事件“觸發(fā)”(或“激發(fā)”)經(jīng)常會(huì)被使用渡紫。
通常會(huì)把 jQuery 代碼放到 <head>部分的事件處理方法中:
實(shí)例
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
親自試一試
在上面的例子中到推,當(dāng)按鈕的點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù):
$("button").click(function() {..some code... } )
該方法隱藏所有 < p> 元素:
$("p").hide();
單獨(dú)文件中的函數(shù)
如果您的網(wǎng)站包含許多頁(yè)面,并且您希望您的 jQuery 函數(shù)易于維護(hù)惕澎,那么請(qǐng)把您的 jQuery 函數(shù)放到獨(dú)立的 .js 文件中莉测。
當(dāng)我們?cè)诮坛讨醒菔?jQuery 時(shí),會(huì)將函數(shù)直接添加到 <head> 部分中唧喉。不過(guò)捣卤,把它們放到一個(gè)單獨(dú)的文件中會(huì)更好,就像這樣(通過(guò) src 屬性來(lái)引用文件):
實(shí)例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名稱沖突
jQuery 使用 $ 符號(hào)作為 jQuery 的簡(jiǎn)介方式八孝。
某些其他 JavaScript 庫(kù)中的函數(shù)(比如 Prototype)同樣使用 $ 符號(hào)董朝。
jQuery 使用名為 noConflict() 的方法來(lái)解決該問(wèn)題。
var jq=jQuery.noConflict()干跛,幫助您使用自己的名稱(比如 jq)來(lái)代替 $ 符號(hào)子姜。
親自試一試
結(jié)論
由于 jQuery 是為處理 HTML 事件而特別設(shè)計(jì)的,那么當(dāng)您遵循以下原則時(shí)楼入,您的代碼會(huì)更恰當(dāng)且更易維護(hù):
- 把所有 jQuery 代碼置于事件處理函數(shù)中
- 把所有事件處理函數(shù)置于文檔就緒事件處理器中
- 把 jQuery 代碼置于單獨(dú)的 .js 文件中
- 如果存在名稱沖突哥捕,則重命名 jQuery 庫(kù)
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
jQuery 事件參考手冊(cè)。
jQuery 隱藏/顯示
隱藏嘉熊、顯示遥赚、切換,滑動(dòng)阐肤,淡入淡出凫佛,以及動(dòng)畫,哇哦孕惜!
實(shí)例
jQuery hide()
演示一個(gè)簡(jiǎn)單的 jQuery hide() 方法愧薛。
jQuery hide()
另一個(gè) hide() 演示。如何隱藏部分文本诊赊。
jQuery hide() 和 show()
通過(guò) jQuery厚满,您可以使用 hide() 和 show() 方法來(lái)隱藏和顯示 HTML 元素:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
親自試一試
語(yǔ)法:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度,可以取以下值:"slow"碧磅、"fast" 或毫秒碘箍。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有 speed 參數(shù)的 hide() 方法:
實(shí)例
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle()
通過(guò) jQuery鲸郊,您可以使用 toggle() 方法來(lái)切換 hide() 和 show() 方法丰榴。
顯示被隱藏的元素,并隱藏已顯示的元素:
實(shí)例
$("button").click(function(){
$("p").toggle();
});
親自試一試
語(yǔ)法:
$(selector).toggle(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度秆撮,可以取以下值:"slow"四濒、"fast" 或毫秒。
可選的 callback 參數(shù)是 toggle() 方法完成后所執(zhí)行的函數(shù)名稱。
jQuery 淡入淡出
實(shí)例
jQuery fadeIn()
演示 jQuery fadeIn() 方法戈二。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法喳资。
jQuery fadeTo()
演示 jQuery fadeTo() 方法觉吭。
jQuery Fading 方法
通過(guò) jQuery,您可以實(shí)現(xiàn)元素的淡入淡出效果仆邓。
jQuery 擁有下面四種 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隱藏的元素鲜滩。
語(yǔ)法:
$(selector).fadeIn(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"节值、"fast" 或毫秒徙硅。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeIn() 方法:
實(shí)例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow")
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可見(jiàn)元素搞疗。
語(yǔ)法:
$(selector).fadeOut(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)嗓蘑。它可以取以下值:"slow"、"fast" 或毫秒贴汪。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱脐往。
下面的例子演示了帶有不同參數(shù)的 fadeOut() 方法:
實(shí)例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
如果元素已淡出扳埂,則 fadeToggle() 會(huì)向元素添加淡入效果业簿。
如果元素已淡入,則 fadeToggle() 會(huì)向元素添加淡出效果阳懂。
語(yǔ)法:
$(selector).fadeToggle(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)梅尤。它可以取以下值:"slow"、"fast" 或毫秒岩调。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱巷燥。
下面的例子演示了帶有不同參數(shù)的 fadeToggle() 方法:
實(shí)例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度(值介于 0 與 1 之間)。
語(yǔ)法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)号枕。它可以取以下值:"slow"缰揪、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度(值介于 0 與 1 之間)葱淳。
可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱钝腺。
下面的例子演示了帶有不同參數(shù)的 fadeTo() 方法:
實(shí)例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery 滑動(dòng)
jQuery 滑動(dòng)方法可使元素上下滑動(dòng)赞厕。
實(shí)例
jQuery slideDown()
演示 jQuery slideDown() 方法艳狐。
jQuery slideUp()
演示 jQuery slideUp() 方法。
jQuery slideToggle()
演示 jQuery slideToggle() 方法皿桑。
jQuery 滑動(dòng)方法
通過(guò) jQuery毫目,您可以在元素上創(chuàng)建滑動(dòng)效果蔬啡。
jQuery 擁有以下滑動(dòng)方法:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑動(dòng)元素。
語(yǔ)法:
$(selector).slideDown(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)镀虐。它可以取以下值:"slow"箱蟆、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱粉私。
下面的例子演示了 slideDown() 方法:
實(shí)例
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑動(dòng)元素顽腾。
語(yǔ)法:
$(selector).slideUp(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)近零。它可以取以下值:"slow"诺核、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱久信。
下面的例子演示了 slideUp() 方法:
實(shí)例
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換窖杀。
如果元素向下滑動(dòng),則 slideToggle() 可向上滑動(dòng)它們裙士。
如果元素向上滑動(dòng)入客,則 slideToggle() 可向下滑動(dòng)它們。
$(selector).slideToggle(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)腿椎。它可以取以下值:"slow"桌硫、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱啃炸。
下面的例子演示了 slideToggle() 方法:
實(shí)例
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery 動(dòng)畫
jQuery animate() 方法允許您創(chuàng)建自定義的動(dòng)畫。
jQuery 動(dòng)畫 - animate() 方法
jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫南用。
語(yǔ)法:
$(selector).animate({params},speed,callback);
必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性膀钠。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"裹虫、"fast" 或毫秒肿嘲。
可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示 animate() 方法的簡(jiǎn)單應(yīng)用筑公;它把 <div> 元素移動(dòng)到左邊雳窟,直到 left 屬性等于 250 像素為止:
實(shí)例
$("button").click(function(){
$("div").animate({left:'250px'});
});
親自試一試
提示:默認(rèn)地,所有 HTML 元素都有一個(gè)靜態(tài)位置匣屡,且無(wú)法移動(dòng)封救。
如需對(duì)位置進(jìn)行操作,要記得首先把元素的 CSS position 屬性 設(shè)置為 relative耸采、fixed 或 absolute兴泥!
jQuery animate() - 操作多個(gè)屬性
請(qǐng)注意,生成動(dòng)畫的過(guò)程中可同時(shí)使用多個(gè)屬性:
實(shí)例
$("button").click(function(){
$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });
});
親自試一試
提示:可以用 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 animate() - 使用相對(duì)值
也可以定義相對(duì)值(該值相對(duì)于元素的當(dāng)前值)肚吏。需要在值的前面加上 += 或 -=:
實(shí)例
$("button").click(function(){
$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
});
jQuery animate() - 使用預(yù)定義的值
您甚至可以把屬性的動(dòng)畫值設(shè)置為 "show"、"hide" 或 "toggle":
實(shí)例
$("button").click(function(){
$("div").animate({ height:'toggle' });
});
jQuery animate() - 使用隊(duì)列功能
默認(rèn)地狭魂,jQuery 提供針對(duì)動(dòng)畫的隊(duì)列功能罚攀。
這意味著如果您在彼此之后編寫多個(gè) animate() 調(diào)用,jQuery 會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列雌澄。然后逐一運(yùn)行這些 animate 調(diào)用斋泄。
實(shí)例 1
隱藏,如果您希望在彼此之后執(zhí)行不同的動(dòng)畫镐牺,那么我們要利用隊(duì)列功能:
$("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");
});
親自試一試
實(shí)例 2
下面的例子把 <div> 元素移動(dòng)到右邊炫掐,然后增加文本的字號(hào):
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery 停止動(dòng)畫
jQuery stop() 方法用于在動(dòng)畫或效果完成前對(duì)它們進(jìn)行停止。
實(shí)例
jQuery stop() 滑動(dòng)
演示 jQuery stop() 方法任柜。
jQuery stop() 動(dòng)畫(帶有參數(shù))
演示 jQuery stop() 方法卒废。
jQuery stop() 方法
jQuery stop() 方法用于停止動(dòng)畫或效果,在它們完成之前宙地。
stop() 方法適用于所有 jQuery 效果函數(shù)摔认,包括滑動(dòng)、淡入淡出和自定義動(dòng)畫宅粥。
語(yǔ)法
$(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)畫钞诡。
下面的例子演示 stop() 方法郑现,不帶參數(shù):
實(shí)例
$("#stop").click(function(){
$("#panel").stop();
});
jQuery 函數(shù)
Callback 函數(shù)在當(dāng)前動(dòng)畫 100% 完成之后執(zhí)行。
jQuery 動(dòng)畫的問(wèn)題
許多 jQuery 函數(shù)涉及動(dòng)畫接箫。這些函數(shù)也許會(huì)將 speed 或 duration 作為可選參數(shù)攒读。
例子:$("p").hide("slow")
speed 或 duration 參數(shù)可以設(shè)置許多不同的值,比如 "slow", "fast", "normal" 或毫秒辛友。
實(shí)例
$("button").click(function(){
$("p").hide(1000);
});
親自試一試
由于 JavaScript 語(yǔ)句(指令)是逐一執(zhí)行的 - 按照次序薄扁,動(dòng)畫之后的語(yǔ)句可能會(huì)產(chǎn)生錯(cuò)誤或頁(yè)面沖突,因?yàn)閯?dòng)畫還沒(méi)有完成废累。
為了避免這個(gè)情況邓梅,您可以以參數(shù)的形式添加 Callback 函數(shù)。
jQuery Callback 函數(shù)
當(dāng)動(dòng)畫 100% 完成后九默,即調(diào)用 Callback 函數(shù)震放。
典型的語(yǔ)法:
$(selector).hide(speed,callback)
callback 參數(shù)是一個(gè)在 hide 操作完成后被執(zhí)行的函數(shù)。
錯(cuò)誤(沒(méi)有 callback)
$("p").hide(1000);
alert("The paragraph is now hidden");
親自試一試
正確(有 callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
親自試一試
結(jié)論:如果您希望在一個(gè)涉及動(dòng)畫的函數(shù)之后來(lái)執(zhí)行語(yǔ)句驼修,請(qǐng)使用 callback 函數(shù)。
jQuery Chaining
通過(guò) jQuery诈铛,您可以把動(dòng)作/方法鏈接起來(lái)乙各。
Chaining 允許我們?cè)谝粭l語(yǔ)句中允許多個(gè) jQuery 方法(在相同的元素上)。
jQuery 方法鏈接
直到現(xiàn)在幢竹,我們都是一次寫一條 jQuery 語(yǔ)句(一條接著另一條)耳峦。
不過(guò),有一種名為鏈接(chaining)的技術(shù)焕毫,允許我們?cè)谙嗤脑厣线\(yùn)行多條 jQuery 命令蹲坷,一條接著另一條。
提示:這樣的話邑飒,瀏覽器就不必多次查找相同的元素循签。
如需鏈接一個(gè)動(dòng)作,您只需簡(jiǎn)單地把該動(dòng)作追加到之前的動(dòng)作上疙咸。
例子 1
下面的例子把 css(), slideUp(), and slideDown() 鏈接在一起县匠。"p1" 元素首先會(huì)變?yōu)榧t色,然后向上滑動(dòng)撒轮,然后向下滑動(dòng):
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
親自試一試
如果需要乞旦,我們也可以添加多個(gè)方法調(diào)用。
提示:當(dāng)進(jìn)行鏈接時(shí)题山,代碼行會(huì)變得很差兰粉。不過(guò),jQuery 在語(yǔ)法上不是很嚴(yán)格顶瞳;您可以按照希望的格式來(lái)寫玖姑,包含折行和縮進(jìn)崖蜜。
例子 2
這樣寫也可以運(yùn)行:
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);
親自試一試
jQuery 會(huì)拋掉多余的空格,并按照一行長(zhǎng)代碼來(lái)執(zhí)行上面的代碼行客峭。