通過(guò)jQuery，您可以選嚷字摇（查詢固以，query）HTML元素，并對(duì)它們執(zhí)行“操作”（actions）豌熄。
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中事件方法的一些例子：
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)懸停事件
如需完整的參考手冊(cè)崖咨，請(qǐng)?jiān)L問(wèn)我們的jQuery 事件參考手冊(cè)锻拘。
jQuery效果-隱藏和顯示
隱藏、顯示击蹲、切換署拟，滑動(dòng)，淡入淡出歌豺，以及動(dòng)畫(huà)推穷，哇哦！
效果演示
點(diǎn)擊這里世曾，隱藏/顯示面板
實(shí)例
演示一個(gè)簡(jiǎn)單的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效果參考手冊(cè)
如需全面查閱jQuery效果波附，請(qǐng)?jiān)L問(wèn)我們的jQuery 效果參考手冊(cè)。
_-----------------
jQuery效果-淡入淡出
通過(guò)jQuery，您可以實(shí)現(xiàn)元素的淡入淡出效果掸屡。
效果演示
點(diǎn)擊這里封寞，隱藏/顯示面板
實(shí)例
演示jQuery fadeIn()方法。
演示jQuery fadeOut()方法仅财。
演示jQuery fadeToggle()方法狈究。
演示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效果參考手冊(cè)
如需全面查閱jQuery效果波丰，請(qǐng)?jiān)L問(wèn)我們的jQuery 效果參考手冊(cè)壳坪。
----------------
jQuery效果-滑動(dòng)
jQuery滑動(dòng)方法可使元素上下滑動(dòng)。
效果演示
點(diǎn)擊這里掰烟，隱藏/顯示面板
實(shí)例
演示jQuery slideDown()方法爽蝴。
演示jQuery slideUp()方法扩灯。
演示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效果參考手冊(cè)
如需全面查閱jQuery效果辣苏，請(qǐng)?jiān)L問(wèn)我們的jQuery 效果參考手冊(cè)。
__------------------------
jQuery效果-動(dòng)畫(huà)
jQuery animate()方法允許您創(chuàng)建自定義的動(dòng)畫(huà)哄褒。
效果演示
開(kāi)始動(dòng)畫(huà)
jQuery
jQuery動(dòng)畫(huà)- animate()方法
jQuery animate()方法用于創(chuàng)建自定義動(dòng)畫(huà)稀蟋。
語(yǔ)法：
$(selector).animate({params},speed,callback);
必需的params參數(shù)定義形成動(dòng)畫(huà)的CSS屬性。
可選的speed參數(shù)規(guī)定效果的時(shí)長(zhǎng)呐赡。它可以取以下值："slow"糊治、"fast"或毫秒。
可選的callback參數(shù)是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)名稱罚舱。
下面的例子演示animate()方法的簡(jiǎn)單應(yīng)用井辜；它把
元素移動(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)畫(huà)的過(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)記法書(shū)寫(xiě)所有的屬性名，比如像寒，必須使用paddingLeft而不是padding-left烘豹，使用marginRight而不是margin-right，等等诺祸。
同時(shí)觉阅，色彩動(dòng)畫(huà)并不包含在核心jQuery庫(kù)中计贰。
如果需要生成顏色動(dòng)畫(huà)漠酿，您需要從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)畫(huà)值設(shè)置為"show"胃夏、"hide"或"toggle"：
實(shí)例
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() -使用隊(duì)列功能
默認(rèn)地逊彭，jQuery提供針對(duì)動(dòng)畫(huà)的隊(duì)列功能。
這意味著如果您在彼此之后編寫(xiě)多個(gè)animate()調(diào)用构订，jQuery會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列侮叮。然后逐一運(yùn)行這些animate調(diào)用。
實(shí)例1
隱藏悼瘾，如果您希望在彼此之后執(zhí)行不同的動(dòng)畫(huà)囊榜，那么我們要利用隊(duì)列功能：
$("button").click(function(){
vardiv=$("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
下面的例子把
元素移動(dòng)到右邊，然后增加文本的字號(hào)：
$("button").click(function(){
vardiv=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery停止動(dòng)畫(huà)
jQuery stop()方法用于在動(dòng)畫(huà)或效果完成前對(duì)它們進(jìn)行停止亥宿。
效果演示
停止滑動(dòng)
點(diǎn)擊這里卸勺，向上/向下滑動(dòng)面板
實(shí)例
演示jQuery stop()方法。
jQuery stop() 動(dòng)畫(huà)（帶有參數(shù)）
演示jQuery stop()方法烫扼。
jQuery stop()方法
jQuery stop()方法用于停止動(dòng)畫(huà)或效果曙求，在它們完成之前。
stop()方法適用于所有jQuery效果函數(shù)映企，包括滑動(dòng)悟狱、淡入淡出和自定義動(dòng)畫(huà)。
語(yǔ)法
$(selector).stop(stopAll,goToEnd);
可選的stopAll參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列堰氓。默認(rèn)是false挤渐，即僅停止活動(dòng)的動(dòng)畫(huà)，允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行双絮。
可選的goToEnd參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)浴麻。默認(rèn)是false得问。
因此，默認(rèn)地软免，stop()會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫(huà)宫纬。
下面的例子演示stop()方法，不帶參數(shù)：
實(shí)例
$("#stop").click(function(){
$("#panel").stop();
});
jQuery效果參考手冊(cè)
如需全面查閱jQuery效果膏萧，請(qǐng)?jiān)L問(wèn)我們的jQuery 效果參考手冊(cè)漓骚。
jQuery Callback函數(shù)
Callback函數(shù)在當(dāng)前動(dòng)畫(huà)100%完成之后執(zhí)行。
jQuery動(dòng)畫(huà)的問(wèn)題
許多jQuery函數(shù)涉及動(dòng)畫(huà)向抢。這些函數(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)畫(huà)之后的語(yǔ)句可能會(huì)產(chǎn)生錯(cuò)誤或頁(yè)面沖突亩冬，因?yàn)閯?dòng)畫(huà)還沒(méi)有完成艘希。
為了避免這個(gè)情況，您可以以參數(shù)的形式添加Callback函數(shù)硅急。
jQuery Callback函數(shù)
當(dāng)動(dòng)畫(huà)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");
親自試一試13
正確（有callback）
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
結(jié)論：如果您希望在一個(gè)涉及動(dòng)畫(huà)的函數(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)在跪另，我們都是一次寫(xiě)一條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)寫(xiě)壁晒，包含折行和縮進(jìn)瓷们。
例子2
這樣寫(xiě)也可以運(yùn)行：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery會(huì)拋掉多余的空格，并按照一行長(zhǎng)代碼來(lái)執(zhí)行上面的代碼行秒咐。
---0----------------------
jQuery -獲得內(nèi)容和屬性
jQuery擁有可操作HTML元素和屬性的強(qiáng)大方法谬晕。
jQuery DOM操作
jQuery中非常重要的部分，就是操作DOM的能力携取。
jQuery提供一系列與DOM相關(guān)的方法攒钳，這使訪問(wèn)和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對(duì)象模型）
DOM定義訪問(wèn)HTML和XML文檔的標(biāo)準(zhǔn)：
“W3C文檔對(duì)象模型獨(dú)立于平臺(tái)和語(yǔ)言的界面雷滋，允許程序和腳本動(dòng)態(tài)訪問(wèn)和更新文檔的內(nèi)容不撑、結(jié)構(gòu)以及樣式∥钫叮”
獲得內(nèi)容- text()焕檬、html()以及val()
三個(gè)簡(jiǎn)單實(shí)用的用于DOM操作的jQuery方法：
?text() -設(shè)置或返回所選元素的文本內(nèi)容
?html() -設(shè)置或返回所選元素的內(nèi)容（包括HTML標(biāo)記）
?val() -設(shè)置或返回表單字段的值
下面的例子演示如何通過(guò)jQuery text()和html()方法來(lái)獲得內(nèi)容：
實(shí)例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML:" + $("#test").html());
});
下面的例子演示如何通過(guò)jQuery val()方法獲得輸入字段的值：
實(shí)例
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
獲取屬性- attr()
jQuery attr()方法用于獲取屬性值。
下面的例子演示如何獲得鏈接中href屬性的值：
實(shí)例
$("button").click(function(){
alert($("#w3s").attr("href"));
});
下一章會(huì)講解如何設(shè)置（改變）內(nèi)容和屬性值澳泵。
jQuery HTML參考手冊(cè)
如需有關(guān)jQuery HTML方法的完整內(nèi)容实愚，請(qǐng)?jiān)L問(wèn)以下參考手冊(cè)：
jQuery -設(shè)置內(nèi)容和屬性
設(shè)置內(nèi)容- text()、html()以及val()
我們將使用前一章中的三個(gè)相同的方法來(lái)設(shè)置內(nèi)容：
?text() -設(shè)置或返回所選元素的文本內(nèi)容
?html() -設(shè)置或返回所選元素的內(nèi)容（包括HTML標(biāo)記）
?val() -設(shè)置或返回表單字段的值
下面的例子演示如何通過(guò)text()兔辅、html()以及val()方法來(lái)設(shè)置內(nèi)容：
實(shí)例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()爆侣、html()以及val()的回調(diào)函數(shù)
上面的三個(gè)jQuery方法：text()、html()以及val()幢妄，同樣擁有回調(diào)函數(shù)兔仰。回調(diào)函數(shù)由兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)蕉鸳，以及原始（舊的）值乎赴。然后以函數(shù)新值返回您希望使用的字符串。
下面的例子演示帶有回調(diào)函數(shù)的text()和html()：
實(shí)例
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return"Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return"Old html: " + origText + " New html: Helloworld!
(index: " + i + ")";
});
});
設(shè)置屬性- attr()
jQuery attr()方法也用于設(shè)置/改變屬性值潮尝。
下面的例子演示如何改變（設(shè)置）鏈接中href屬性的值：
實(shí)例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr()方法也允許您同時(shí)設(shè)置多個(gè)屬性榕吼。
下面的例子演示如何同時(shí)設(shè)置href和title屬性：
實(shí)例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr()的回調(diào)函數(shù)
jQuery方法attr()，也提供回調(diào)函數(shù)勉失「迹回調(diào)函數(shù)由兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值乱凿。然后以函數(shù)新值返回您希望使用的字符串顽素。
下面的例子演示帶有回調(diào)函數(shù)的attr()方法：
實(shí)例
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
returnorigValue + "/jquery";
});
});
jQuery HTML參考手冊(cè)
如需有關(guān)jQuery HTML方法的完整內(nèi)容咽弦，請(qǐng)?jiān)L問(wèn)以下參考手冊(cè)：
jQuery -添加元素
通過(guò)jQuery，可以很容易地添加新元素/內(nèi)容胁出。
添加新的HTML內(nèi)容
我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè)jQuery方法：
?append() -在被選元素的結(jié)尾插入內(nèi)容
?prepend() -在被選元素的開(kāi)頭插入內(nèi)容
?after() -在被選元素之后插入內(nèi)容
?before() -在被選元素之前插入內(nèi)容
jQuery append()方法
jQuery append()方法在被選元素的結(jié)尾插入內(nèi)容型型。
實(shí)例
$("p").append("Some appended text.");
jQuery prepend()方法
jQuery prepend()方法在被選元素的開(kāi)頭插入內(nèi)容。
實(shí)例
$("p").prepend("Some prependedtext.");
通過(guò)append()和prepend()方法添加若干新元素
在上面的例子中全蝶，我們只在被選元素的開(kāi)頭/結(jié)尾插入文本/HTML闹蒜。
不過(guò)，append()和prepend()方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素抑淫”谅洌可以通過(guò)jQuery來(lái)生成文本/HTML（就像上面的例子那樣），或者通過(guò)JavaScript代碼和DOM元素始苇。
在下面的例子中砌烁，我們創(chuàng)建若干個(gè)新元素。這些元素可以通過(guò)text/HTML埂蕊、jQuery或者JavaScript/DOM來(lái)創(chuàng)建往弓。然后我們通過(guò)append()方法把這些新元素追加到文本中（對(duì)prepend()同樣有效）：
實(shí)例
function appendText()
{
vartxt1="
Text.
";//以HTML創(chuàng)建新元素
vartxt2=$("").text("Text.");//以jQuery創(chuàng)建新元素
vartxt3=document.createElement("p");//以DOM創(chuàng)建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);//追加新元素
}
jQuery after()和before()方法
jQuery after()方法在被選元素之后插入內(nèi)容疏唾。
jQuery before()方法在被選元素之前插入內(nèi)容蓄氧。
實(shí)例
$("img").after("Some textafter");
$("img").before("Some textbefore");
通過(guò)after()和before()方法添加若干新元素
after()和before()方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素』痹啵可以通過(guò)text/HTML喉童、jQuery或者JavaScript/DOM來(lái)創(chuàng)建新元素。
在下面的例子中顿天，我們創(chuàng)建若干新元素堂氯。這些元素可以通過(guò)text/HTML、jQuery或者JavaScript/DOM來(lái)創(chuàng)建牌废。然后我們通過(guò)after()方法把這些新元素插到文本中（對(duì)before()同樣有效）：
實(shí)例
function afterText()
{
var txt1="I ";//以HTML創(chuàng)建新元素
vartxt2=$("").text("love ");//通過(guò)jQuery創(chuàng)建新元素
vartxt3=document.createElement("big");//通過(guò)DOM創(chuàng)建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);//在img之后插入新元素
}
jQuery HTML參考手冊(cè)
如需有關(guān)jQuery HTML方法的完整內(nèi)容咽白，請(qǐng)?jiān)L問(wèn)以下參考手冊(cè)：
jQuery -刪除元素
通過(guò)jQuery，可以很容易地刪除已有的HTML元素鸟缕。
刪除元素/內(nèi)容
如需刪除元素和內(nèi)容晶框，一般可使用以下兩個(gè)jQuery方法：
?remove() -刪除被選元素（及其子元素）
?empty() -從被選元素中刪除子元素
jQuery remove()方法
jQuery remove()方法刪除被選元素及其子元素。
實(shí)例
$("#div1").remove();
jQuery empty()方法
jQuery empty()方法刪除被選元素的子元素懂从。
實(shí)例
$("#div1").empty();
過(guò)濾被刪除的元素
jQuery remove()方法也可接受一個(gè)參數(shù)授段，允許您對(duì)被刪元素進(jìn)行過(guò)濾。
該參數(shù)可以是任何jQuery選擇器的語(yǔ)法番甩。
下面的例子刪除class="italic"的所有
元素：
實(shí)例
$("p").remove(".italic");
jQuery HTML參考手冊(cè)
如需有關(guān)jQuery HTML方法的完整內(nèi)容侵贵，請(qǐng)?jiān)L問(wèn)以下參考手冊(cè)：
jQuery -獲取并設(shè)置CSS類
通過(guò)jQuery，可以很容易地對(duì)CSS元素進(jìn)行操作缘薛。
切換類
jQuery操作CSS
jQuery擁有若干進(jìn)行CSS操作的方法窍育。我們將學(xué)習(xí)下面這些：
?addClass() -向被選元素添加一個(gè)或多個(gè)類
?removeClass() -從被選元素刪除一個(gè)或多個(gè)類
?toggleClass() -對(duì)被選元素進(jìn)行添加/刪除類的切換操作
?css() -設(shè)置或返回樣式屬性
實(shí)例樣式表
下面的樣式表將用于本頁(yè)的所有例子：
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
jQuery addClass()方法
下面的例子展示如何向不同的元素添加class屬性卡睦。當(dāng)然，在添加類時(shí)蔫骂，您也可以選取多個(gè)元素：
實(shí)例
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
您也可以在addClass()方法中規(guī)定多個(gè)類：
實(shí)例
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass()方法
下面的例子演示如何不同的元素中刪除指定的class屬性：
實(shí)例
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggleClass()方法
下面的例子將展示如何使用jQuery toggleClass()方法么翰。該方法對(duì)被選元素進(jìn)行添加/刪除類的切換操作：
實(shí)例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery css()方法
我們將在下一章講解jQuery css()方法。
jQuery HTML參考手冊(cè)
如需有關(guān)jQuery CSS方法的完整內(nèi)容辽旋，請(qǐng)?jiān)L問(wèn)我們的jQuery CSS 操作參考手冊(cè)
jQuery - css()方法
jQuery css()方法
css()方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性浩嫌。
返回CSS屬性
如需返回指定的CSS屬性的值，請(qǐng)使用如下語(yǔ)法：
css("propertyname");
下面的例子將返回首個(gè)匹配元素的background-color值：
實(shí)例
$("p").css("background-color");
設(shè)置CSS屬性
如需設(shè)置指定的CSS屬性补胚，請(qǐng)使用如下語(yǔ)法：
css("propertyname","value");
下面的例子將為所有匹配元素設(shè)置background-color值：
實(shí)例
$("p").css("background-color","yellow");
設(shè)置多個(gè)CSS屬性
如需設(shè)置多個(gè)CSS屬性码耐，請(qǐng)使用如下語(yǔ)法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子將為所有匹配元素設(shè)置background-color和font-size：
實(shí)例
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery HTML參考手冊(cè)
如需有關(guān)jQuery CSS方法的完整內(nèi)容，請(qǐng)?jiān)L問(wèn)我們的jQuery CSS 操作參考手冊(cè)
jQuery -尺寸
通過(guò)jQuery溶其，很容易處理元素和瀏覽器窗口的尺寸骚腥。
jQuery尺寸 方法
jQuery提供多個(gè)處理尺寸的重要方法：
?width()
?height()
?innerWidth()
?innerHeight()
?outerWidth()
?outerHeight()
jQuery width()和height()方法
width()方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）瓶逃。
height()方法設(shè)置或返回元素的高度（不包括內(nèi)邊距束铭、邊框或外邊距）。
下面的例子返回指定的
元素的寬度和高度：
實(shí)例
$("button").click(function(){
vartxt="";
txt+="Width: " + $("#div1").width() +"
";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth()和innerHeight()方法
innerWidth()方法返回元素的寬度（包括內(nèi)邊距）厢绝。
innerHeight()方法返回元素的高度（包括內(nèi)邊距）契沫。
下面的例子返回指定的
元素的inner-width/height：
實(shí)例
$("button").click(function(){
vartxt="";
txt+="Inner width: " + $("#div1").innerWidth() +"
";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth()和outerHeight()方法
outerWidth()方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight()方法返回元素的高度（包括內(nèi)邊距和邊框）昔汉。
下面的例子返回指定的
元素的outer-width/height：
實(shí)例
$("button").click(function(){
vartxt="";
txt+="Outer width: " + $("#div1").outerWidth() +"
";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
outerWidth(true)方法返回元素的寬度（包括內(nèi)邊距懈万、邊框和外邊距）。
outerHeight(true)方法返回元素的高度（包括內(nèi)邊距靶病、邊框和外邊距）会通。
實(shí)例
$("button").click(function(){
vartxt="";
txt+="Outer width (+margin): " +$("#div1").outerWidth(true) + "
";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery -更多的width()和height()
下面的例子返回文檔（HTML文檔）和窗口（瀏覽器視口）的寬度和高度：
實(shí)例
$("button").click(function(){
vartxt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
下面的例子設(shè)置指定的
元素的寬度和高度：
實(shí)例
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery CSS參考手冊(cè)
如需關(guān)于jQuery Dimensions的完整參考，請(qǐng)?jiān)L問(wèn)我們的jQuery尺寸參考手冊(cè)娄周。
jQuery遍歷
什么是遍歷涕侈？
jQuery遍歷，意為“移動(dòng)”煤辨，用于根據(jù)其相對(duì)于其他元素的關(guān)系來(lái)“查找”（或選壬烟巍）HTML元素。以某項(xiàng)選擇開(kāi)始掷酗，并沿著這個(gè)選擇移動(dòng)调违，直到抵達(dá)您期望的元素為止。
下圖展示了一個(gè)家族樹(shù)泻轰。通過(guò)jQuery遍歷技肩，您能夠從被選（當(dāng)前的）元素開(kāi)始，輕松地在家族樹(shù)中向上移動(dòng)（祖先），向下移動(dòng)（子孫）虚婿，水平移動(dòng)（同胞）旋奢。這種移動(dòng)被稱為對(duì)DOM進(jìn)行遍歷。
圖示解釋：
?
元素是
的父元素然痊，同時(shí)是其中所有內(nèi)容的祖先至朗。
?
元素是
元素的父元素，同時(shí)是
?左邊的
元素是的父元素剧浸，
的子元素锹引，同時(shí)是
?元素是
的子元素唆香，同時(shí)是
和
?兩個(gè)
元素是同胞（擁有相同的父元素）。
?右邊的
元素是
的父元素躬它，
的子元素腾啥，同時(shí)是
?元素是右邊的
的子元素冯吓，同時(shí)是
和
提示：祖先是父、祖父组贺、曾祖父等等凸舵。后代是子、孫锣披、曾孫等等贞间。同胞擁有相同的父贿条。
遍歷DOM
jQuery提供了多種遍歷DOM的方法雹仿。
遍歷方法中最大的種類是樹(shù)遍歷（tree-traversal）。
下一章會(huì)講解如何在DOM樹(shù)中向上整以、下以及同級(jí)移動(dòng)胧辽。
jQuery遍歷參考手冊(cè)
如需了解所有的jQuery遍歷方法，請(qǐng)?jiān)L問(wèn)我們的jQuery 遍歷參考手冊(cè)公黑。
jQuery遍歷-祖先
祖先是父邑商、祖父或曾祖父等等。
通過(guò)jQuery凡蚜，您能夠向上遍歷DOM樹(shù)人断，以查找元素的祖先。
向上遍歷DOM樹(shù)
這些jQuery方法很有用朝蜘，它們用于向上遍歷DOM樹(shù)：
?parent()
?parents()
?parentsUntil()
jQuery parent()方法
parent()方法返回被選元素的直接父元素恶迈。
該方法只會(huì)向上一級(jí)對(duì)DOM樹(shù)進(jìn)行遍歷。
下面的例子返回每個(gè)元素的的直接父元素：
實(shí)例
$(document).ready(function(){
$("span").parent();
});
jQuery parents()方法
parents()方法返回被選元素的所有祖先元素谱醇，它一路向上直到文檔的根元素()暇仲。
下面的例子返回所有元素的所有祖先：
實(shí)例
$(document).ready(function(){
$("span").parents();
});
您也可以使用可選參數(shù)來(lái)過(guò)濾對(duì)祖先元素的搜索步做。
下面的例子返回所有元素的所有祖先，并且它是
元素：
實(shí)例
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil()方法
parentsUntil()方法返回介于兩個(gè)給定元素之間的所有祖先元素奈附。
下面的例子返回介于與
元素之間的所有祖先元素：
實(shí)例
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery遍歷參考手冊(cè)
如需了解所有的jQuery遍歷方法全度，請(qǐng)?jiān)L問(wèn)我們的jQuery 遍歷參考手冊(cè)。
jQuery遍歷-后代
后代是子斥滤、孫将鸵、曾孫等等。
通過(guò)jQuery佑颇，您能夠向下遍歷DOM樹(shù)咨堤，以查找元素的后代。
向下遍歷DOM樹(shù)
下面是兩個(gè)用于向下遍歷DOM樹(shù)的jQuery方法：
?children()
?find()
jQuery children()方法
children()方法返回被選元素的所有直接子元素漩符。
該方法只會(huì)向下一級(jí)對(duì)DOM樹(shù)進(jìn)行遍歷一喘。
下面的例子返回每個(gè)
元素的所有直接子元素：
實(shí)例
$(document).ready(function(){
$("div").children();
});
您也可以使用可選參數(shù)來(lái)過(guò)濾對(duì)子元素的搜索。
下面的例子返回類名為"1"的所有
元素嗜暴，并且它們是
的直接子元素：
實(shí)例
$(document).ready(function(){
$("div").children("p.1");
});
jQuery find()方法
find()方法返回被選元素的后代元素凸克，一路向下直到最后一個(gè)后代。
下面的例子返回屬于
后代的所有元素：
實(shí)例
$(document).ready(function(){
$("div").find("span");
});
下面的例子返回
的所有后代：
實(shí)例
$(document).ready(function(){
$("div").find("*");
});
jQuery遍歷參考手冊(cè)
如需了解所有的jQuery遍歷方法闷沥，請(qǐng)?jiān)L問(wèn)我們的jQuery 遍歷參考手冊(cè)萎战。
jQuery遍歷-同胞
同胞擁有相同的父元素。
通過(guò)jQuery舆逃，您能夠在DOM樹(shù)中遍歷元素的同胞元素蚂维。
在DOM樹(shù)中水平遍歷
有許多有用的方法讓我們?cè)贒OM樹(shù)進(jìn)行水平遍歷：
?siblings()
?next()
?nextAll()
?nextUntil()
?prev()
?prevAll()
?prevUntil()
jQuery siblings()方法
siblings()方法返回被選元素的所有同胞元素。
下面的例子返回
的所有同胞元素：
實(shí)例
$(document).ready(function(){
$("h2").siblings();
});
您也可以使用可選參數(shù)來(lái)過(guò)濾對(duì)同胞元素的搜索路狮。
下面的例子返回屬于
的同胞元素的所有
元素：
實(shí)例
$(document).ready(function(){
$("h2").siblings("p");
});
jQuery next()方法
next()方法返回被選元素的下一個(gè)同胞元素虫啥。
該方法只返回一個(gè)元素。
下面的例子返回
的下一個(gè)同胞元素：
實(shí)例
$(document).ready(function(){
$("h2").next();
});
jQuery nextAll()方法
nextAll()方法返回被選元素的所有跟隨的同胞元素奄妨。
下面的例子返回
的所有跟隨的同胞元素：
實(shí)例
$(document).ready(function(){
$("h2").nextAll();
});
jQuery nextUntil()方法
nextUntil()方法返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素涂籽。
下面的例子返回介于
與
元素之間的所有同胞元素：
實(shí)例
$(document).ready(function(){
$("h2").nextUntil("h6");
});
jQuery prev(), prevAll() &
prevUntil()方法
prev(), prevAll()以及prevUntil()方法的工作方式與上面的方法類似，只不過(guò)方向相反而已：它們返回的是前面的同胞元素（在DOM樹(shù)中沿著同胞元素向后遍歷砸抛，而不是向前）评雌。
jQuery遍歷參考手冊(cè)
如需了解所有的jQuery遍歷方法，請(qǐng)?jiān)L問(wèn)我們的jQuery 遍歷參考手冊(cè)直焙。
jQuery遍歷-過(guò)濾
縮寫(xiě)搜索元素的范圍
三個(gè)最基本的過(guò)濾方法是：first(), last()和eq()景东，它們?cè)试S您基于其在一組元素中的位置來(lái)選擇一個(gè)特定的元素。
其他過(guò)濾方法奔誓，比如filter()和not()允許您選取匹配或不匹配某項(xiàng)指定標(biāo)準(zhǔn)的元素斤吐。
jQuery first()方法
first()方法返回被選元素的首個(gè)元素。
下面的例子選取首個(gè)
元素內(nèi)部的第一個(gè)
元素：
實(shí)例
$(document).ready(function(){
$("div p").first();
});
jQuery last()方法
last()方法返回被選元素的最后一個(gè)元素。
下面的例子選擇最后一個(gè)
元素中的最后一個(gè)
元素：
實(shí)例
$(document).ready(function(){
$("div p").last();
});
jQuery eq()方法
eq()方法返回被選元素中帶有指定索引號(hào)的元素曲初。
索引號(hào)從0開(kāi)始体谒，因此首個(gè)元素的索引號(hào)是0而不是1。下面的例子選取第二個(gè)
元素（索引號(hào)1）：
實(shí)例
$(document).ready(function(){
$("p").eq(1);
});
jQuery filter()方法
filter()方法允許您規(guī)定一個(gè)標(biāo)準(zhǔn)臼婆。不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除抒痒，匹配的元素會(huì)被返回。
下面的例子返回帶有類名"intro"的所有
元素：
實(shí)例
$(document).ready(function(){
$("p").filter(".intro");
});
jQuery not()方法
not()方法返回不匹配標(biāo)準(zhǔn)的所有元素颁褂。
提示：not()方法與filter()相反故响。
下面的例子返回不帶有類名"intro"的所有
元素：
實(shí)例
$(document).ready(function(){
$("p").not(".intro");
});
jQuery遍歷參考手冊(cè)
如需了解所有的jQuery遍歷方法，請(qǐng)?jiān)L問(wèn)我們的jQuery 遍歷參考手冊(cè)颁独。
