通過jQuery，您可以選取（查詢，query）HTML元素，并對它們執行“操作”（actions）。
jQuery名稱沖突
jQuery使用$符號作為jQuery的簡介方式。
某些其他JavaScript庫中的函數（比如Prototype）同樣使用$符號。
jQuery使用名為noConflict()的方法來解決該問題。
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如jq）來代替$符號。
結論
由于jQuery是為處理HTML事件而特別設計的，那么當您遵循以下原則時，您的代碼會更恰當且更易維護：
?把所有jQuery代碼置于事件處理函數中
?把所有事件處理函數置于文檔就緒事件處理器中
?把jQuery代碼置于單獨的.js文件中
?如果存在名稱沖突，則重命名jQuery庫
jQuery事件
下面是jQuery中事件方法的一些例子：
Event函數
綁定函數至
$(document).ready(function)
將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function)
觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)
觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)
觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function)
觸發或將函數綁定到被選元素的鼠標懸停事件
如需完整的參考手冊，請訪問我們的jQuery 事件參考手冊。
jQuery效果-隱藏和顯示
隱藏、顯示、切換，滑動，淡入淡出，以及動畫，哇哦！
效果演示
點擊這里，隱藏/顯示面板
實例
演示一個簡單的jQuery hide()方法。
另一個hide()演示。如何隱藏部分文本。
jQuery hide()和show()
通過jQuery，您可以使用hide()和show()方法來隱藏和顯示HTML元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
語法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的speed參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是隱藏或顯示完成后所執行的函數名稱。
下面的例子演示了帶有speed參數的hide()方法：
實例
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle()
通過jQuery，您可以使用toggle()方法來切換hide()和show()方法。
顯示被隱藏的元素，并隱藏已顯示的元素：
實例
$("button").click(function(){
$("p").toggle();
});
語法：
$(selector).toggle(speed,callback);
可選的speed參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是toggle()方法完成后所執行的函數名稱。
jQuery效果參考手冊
如需全面查閱jQuery效果，請訪問我們的jQuery 效果參考手冊。
_-----------------
jQuery效果-淡入淡出
通過jQuery，您可以實現元素的淡入淡出效果。
效果演示
點擊這里，隱藏/顯示面板
實例
演示jQuery fadeIn()方法。
演示jQuery fadeOut()方法。
演示jQuery fadeToggle()方法。
演示jQuery fadeTo()方法。
jQuery Fading方法
通過jQuery，您可以實現元素的淡入淡出效果。
jQuery擁有下面四種fade方法：
?fadeIn()
?fadeOut()
?fadeToggle()
?fadeTo()
jQuery fadeIn()方法
jQuery fadeIn()用于淡入已隱藏的元素。
語法：
$(selector).fadeIn(speed,callback);
可選的speed參數規定效果的時長。它可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是fading完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的fadeIn()方法：
實例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut()方法
jQuery fadeOut()方法用于淡出可見元素。
語法：
$(selector).fadeOut(speed,callback);
可選的speed參數規定效果的時長。它可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是fading完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的fadeOut()方法：
實例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle()方法
jQuery fadeToggle()方法可以在fadeIn()與fadeOut()方法之間進行切換。
如果元素已淡出，則fadeToggle()會向元素添加淡入效果。
如果元素已淡入，則fadeToggle()會向元素添加淡出效果。
語法：
$(selector).fadeToggle(speed,callback);
可選的speed參數規定效果的時長。它可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是fading完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的fadeToggle()方法：
實例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo()方法
jQuery fadeTo()方法允許漸變為給定的不透明度（值介于0與1之間）。
語法：
$(selector).fadeTo(speed,opacity,callback);
必需的speed參數規定效果的時長。它可以取以下值："slow"、"fast"或毫秒。
fadeTo()方法中必需的opacity參數將淡入淡出效果設置為給定的不透明度（值介于0與1之間）。
可選的callback參數是該函數完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的fadeTo()方法：
實例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery效果參考手冊
如需全面查閱jQuery效果，請訪問我們的jQuery 效果參考手冊。
----------------
jQuery效果-滑動
jQuery滑動方法可使元素上下滑動。
效果演示
點擊這里，隱藏/顯示面板
實例
演示jQuery slideDown()方法。
演示jQuery slideUp()方法。
演示jQuery slideToggle()方法。
jQuery滑動方法
通過jQuery，您可以在元素上創建滑動效果。
jQuery擁有以下滑動方法：
?slideDown()
?slideUp()
?slideToggle()
jQuery slideDown()方法
jQuery slideDown()方法用于向下滑動元素。
語法：
$(selector).slideDown(speed,callback);
可選的speed參數規定效果的時長。它可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是滑動完成后所執行的函數名稱。
下面的例子演示了slideDown()方法：
實例
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp()方法
jQuery slideUp()方法用于向上滑動元素。
語法：
$(selector).slideUp(speed,callback);
可選的speed參數規定效果的時長。它可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是滑動完成后所執行的函數名稱。
下面的例子演示了slideUp()方法：
實例
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle()方法
jQuery slideToggle()方法可以在slideDown()與slideUp()方法之間進行切換。
如果元素向下滑動，則slideToggle()可向上滑動它們。
如果元素向上滑動，則slideToggle()可向下滑動它們。
$(selector).slideToggle(speed,callback);
可選的speed參數規定效果的時長。它可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是滑動完成后所執行的函數名稱。
下面的例子演示了slideToggle()方法：
實例
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery效果參考手冊
如需全面查閱jQuery效果，請訪問我們的jQuery 效果參考手冊。
__------------------------
jQuery效果-動畫
jQuery animate()方法允許您創建自定義的動畫。
效果演示
開始動畫
jQuery
jQuery動畫- animate()方法
jQuery animate()方法用于創建自定義動畫。
語法：
$(selector).animate({params},speed,callback);
必需的params參數定義形成動畫的CSS屬性。
可選的speed參數規定效果的時長。它可以取以下值："slow"、"fast"或毫秒。
可選的callback參數是動畫完成后所執行的函數名稱。
下面的例子演示animate()方法的簡單應用；它把
元素移動到左邊，直到left屬性等于250像素為止：
實例
$("button").click(function(){
$("div").animate({left:'250px'});
});
提示：默認地，所有HTML元素都有一個靜態位置，且無法移動。
如需對位置進行操作，要記得首先把元素的CSS position屬性設置為relative、fixed或absolute！
jQuery animate() -操作多個屬性
請注意，生成動畫的過程中可同時使用多個屬性：
實例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
提示：可以用animate()方法來操作所有CSS屬性嗎？
是的，幾乎可以！不過，需要記住一件重要的事情：當使用animate()時，必須使用Camel標記法書寫所有的屬性名，比如，必須使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。
同時，色彩動畫并不包含在核心jQuery庫中。
如果需要生成顏色動畫，您需要從jQuery.com下載Color Animations插件。
jQuery animate() -使用相對值
也可以定義相對值（該值相對于元素的當前值）。需要在值的前面加上+=或-=：
實例
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() -使用預定義的值
您甚至可以把屬性的動畫值設置為"show"、"hide"或"toggle"：
實例
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() -使用隊列功能
默認地，jQuery提供針對動畫的隊列功能。
這意味著如果您在彼此之后編寫多個animate()調用，jQuery會創建包含這些方法調用的“內部”隊列。然后逐一運行這些animate調用。
實例1
隱藏，如果您希望在彼此之后執行不同的動畫，那么我們要利用隊列功能：
$("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");
});
實例2
下面的例子把
元素移動到右邊，然后增加文本的字號：
$("button").click(function(){
vardiv=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery停止動畫
jQuery stop()方法用于在動畫或效果完成前對它們進行停止。
效果演示
停止滑動
點擊這里，向上/向下滑動面板
實例
演示jQuery stop()方法。
演示jQuery stop()方法。
jQuery stop()方法
jQuery stop()方法用于停止動畫或效果，在它們完成之前。
stop()方法適用于所有jQuery效果函數，包括滑動、淡入淡出和自定義動畫。
語法
$(selector).stop(stopAll,goToEnd);
可選的stopAll參數規定是否應該清除動畫隊列。默認是false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。
可選的goToEnd參數規定是否立即完成當前動畫。默認是false。
因此，默認地，stop()會清除在被選元素上指定的當前動畫。
下面的例子演示stop()方法，不帶參數：
實例
$("#stop").click(function(){
$("#panel").stop();
});
jQuery效果參考手冊
如需全面查閱jQuery效果，請訪問我們的jQuery 效果參考手冊。
jQuery Callback函數
Callback函數在當前動畫100%完成之后執行。
jQuery動畫的問題
許多jQuery函數涉及動畫。這些函數也許會將speed或duration作為可選參數。
例子：$("p").hide("slow")
speed或duration參數可以設置許多不同的值，比如"slow", "fast", "normal"或毫秒。
實例
$("button").click(function(){
$("p").hide(1000);
});
由于JavaScript語句（指令）是逐一執行的-按照次序，動畫之后的語句可能會產生錯誤或頁面沖突，因為動畫還沒有完成。
為了避免這個情況，您可以以參數的形式添加Callback函數。
jQuery Callback函數
當動畫100%完成后，即調用Callback函數。
典型的語法：
$(selector).hide(speed,callback)
callback參數是一個在hide操作完成后被執行的函數。
錯誤（沒有callback）
$("p").hide(1000);
alert("The paragraph is now hidden");
親自試一試13
正確（有callback）
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
結論：如果您希望在一個涉及動畫的函數之后來執行語句，請使用callback函數。
jQuery - Chaining
通過jQuery，您可以把動作/方法鏈接起來。
Chaining允許我們在一條語句中允許多個jQuery方法（在相同的元素上）。
jQuery方法鏈接
直到現在，我們都是一次寫一條jQuery語句（一條接著另一條）。
不過，有一種名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條jQuery命令，一條接著另一條。
提示：這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。
例子1
下面的例子把css(), slideUp(), and slideDown()鏈接在一起。"p1"元素首先會變為紅色，然后向上滑動，然后向下滑動：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
如果需要，我們也可以添加多個方法調用。
提示：當進行鏈接時，代碼行會變得很差。不過，jQuery在語法上不是很嚴格；您可以按照希望的格式來寫，包含折行和縮進。
例子2
這樣寫也可以運行：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery會拋掉多余的空格，并按照一行長代碼來執行上面的代碼行。
---0----------------------
jQuery -獲得內容和屬性
jQuery擁有可操作HTML元素和屬性的強大方法。
jQuery DOM操作
jQuery中非常重要的部分，就是操作DOM的能力。
jQuery提供一系列與DOM相關的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對象模型）
DOM定義訪問HTML和XML文檔的標準：
“W3C文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。”
獲得內容- text()、html()以及val()
三個簡單實用的用于DOM操作的jQuery方法：
?text() -設置或返回所選元素的文本內容
?html() -設置或返回所選元素的內容（包括HTML標記）
?val() -設置或返回表單字段的值
下面的例子演示如何通過jQuery text()和html()方法來獲得內容：
實例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML:" + $("#test").html());
});
下面的例子演示如何通過jQuery val()方法獲得輸入字段的值：
實例
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
獲取屬性- attr()
jQuery attr()方法用于獲取屬性值。
下面的例子演示如何獲得鏈接中href屬性的值：
實例
$("button").click(function(){
alert($("#w3s").attr("href"));
});
下一章會講解如何設置（改變）內容和屬性值。
jQuery HTML參考手冊
如需有關jQuery HTML方法的完整內容，請訪問以下參考手冊：
jQuery -設置內容和屬性
設置內容- text()、html()以及val()
我們將使用前一章中的三個相同的方法來設置內容：
?text() -設置或返回所選元素的文本內容
?html() -設置或返回所選元素的內容（包括HTML標記）
?val() -設置或返回表單字段的值
下面的例子演示如何通過text()、html()以及val()方法來設置內容：
實例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html()以及val()的回調函數
上面的三個jQuery方法：text()、html()以及val()，同樣擁有回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。
下面的例子演示帶有回調函數的text()和html()：
實例
$("#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 + ")";
});
});
設置屬性- attr()
jQuery attr()方法也用于設置/改變屬性值。
下面的例子演示如何改變（設置）鏈接中href屬性的值：
實例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr()方法也允許您同時設置多個屬性。
下面的例子演示如何同時設置href和title屬性：
實例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr()的回調函數
jQuery方法attr()，也提供回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。
下面的例子演示帶有回調函數的attr()方法：
實例
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
returnorigValue + "/jquery";
});
});
jQuery HTML參考手冊
如需有關jQuery HTML方法的完整內容，請訪問以下參考手冊：
jQuery -添加元素
通過jQuery，可以很容易地添加新元素/內容。
添加新的HTML內容
我們將學習用于添加新內容的四個jQuery方法：
?append() -在被選元素的結尾插入內容
?prepend() -在被選元素的開頭插入內容
?after() -在被選元素之后插入內容
?before() -在被選元素之前插入內容
jQuery append()方法
jQuery append()方法在被選元素的結尾插入內容。
實例
$("p").append("Some appended text.");
jQuery prepend()方法
jQuery prepend()方法在被選元素的開頭插入內容。
實例
$("p").prepend("Some prependedtext.");
通過append()和prepend()方法添加若干新元素
在上面的例子中，我們只在被選元素的開頭/結尾插入文本/HTML。
不過，append()和prepend()方法能夠通過參數接收無限數量的新元素。可以通過jQuery來生成文本/HTML（就像上面的例子那樣），或者通過JavaScript代碼和DOM元素。
在下面的例子中，我們創建若干個新元素。這些元素可以通過text/HTML、jQuery或者JavaScript/DOM來創建。然后我們通過append()方法把這些新元素追加到文本中（對prepend()同樣有效）：
實例
function appendText()
{
vartxt1="
Text.
";//以HTML創建新元素
vartxt2=$("").text("Text.");//以jQuery創建新元素
vartxt3=document.createElement("p");//以DOM創建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);//追加新元素
}
jQuery after()和before()方法
jQuery after()方法在被選元素之后插入內容。
jQuery before()方法在被選元素之前插入內容。
實例
$("img").after("Some textafter");
$("img").before("Some textbefore");
通過after()和before()方法添加若干新元素
after()和before()方法能夠通過參數接收無限數量的新元素。可以通過text/HTML、jQuery或者JavaScript/DOM來創建新元素。
在下面的例子中，我們創建若干新元素。這些元素可以通過text/HTML、jQuery或者JavaScript/DOM來創建。然后我們通過after()方法把這些新元素插到文本中（對before()同樣有效）：
實例
function afterText()
{
var txt1="I ";//以HTML創建新元素
vartxt2=$("").text("love ");//通過jQuery創建新元素
vartxt3=document.createElement("big");//通過DOM創建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);//在img之后插入新元素
}
jQuery HTML參考手冊
如需有關jQuery HTML方法的完整內容，請訪問以下參考手冊：
jQuery -刪除元素
通過jQuery，可以很容易地刪除已有的HTML元素。
刪除元素/內容
如需刪除元素和內容，一般可使用以下兩個jQuery方法：
?remove() -刪除被選元素（及其子元素）
?empty() -從被選元素中刪除子元素
jQuery remove()方法
jQuery remove()方法刪除被選元素及其子元素。
實例
$("#div1").remove();
jQuery empty()方法
jQuery empty()方法刪除被選元素的子元素。
實例
$("#div1").empty();
過濾被刪除的元素
jQuery remove()方法也可接受一個參數，允許您對被刪元素進行過濾。
該參數可以是任何jQuery選擇器的語法。
下面的例子刪除class="italic"的所有
元素：
實例
$("p").remove(".italic");
jQuery HTML參考手冊
如需有關jQuery HTML方法的完整內容，請訪問以下參考手冊：
jQuery -獲取并設置CSS類
通過jQuery，可以很容易地對CSS元素進行操作。
切換類
jQuery操作CSS
jQuery擁有若干進行CSS操作的方法。我們將學習下面這些：
?addClass() -向被選元素添加一個或多個類
?removeClass() -從被選元素刪除一個或多個類
?toggleClass() -對被選元素進行添加/刪除類的切換操作
?css() -設置或返回樣式屬性
實例樣式表
下面的樣式表將用于本頁的所有例子：
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
jQuery addClass()方法
下面的例子展示如何向不同的元素添加class屬性。當然，在添加類時，您也可以選取多個元素：
實例
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
您也可以在addClass()方法中規定多個類：
實例
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass()方法
下面的例子演示如何不同的元素中刪除指定的class屬性：
實例
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggleClass()方法
下面的例子將展示如何使用jQuery toggleClass()方法。該方法對被選元素進行添加/刪除類的切換操作：
實例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery css()方法
我們將在下一章講解jQuery css()方法。
jQuery HTML參考手冊
如需有關jQuery CSS方法的完整內容，請訪問我們的jQuery CSS 操作參考手冊
jQuery - css()方法
jQuery css()方法
css()方法設置或返回被選元素的一個或多個樣式屬性。
返回CSS屬性
如需返回指定的CSS屬性的值，請使用如下語法：
css("propertyname");
下面的例子將返回首個匹配元素的background-color值：
實例
$("p").css("background-color");
設置CSS屬性
如需設置指定的CSS屬性，請使用如下語法：
css("propertyname","value");
下面的例子將為所有匹配元素設置background-color值：
實例
$("p").css("background-color","yellow");
設置多個CSS屬性
如需設置多個CSS屬性，請使用如下語法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子將為所有匹配元素設置background-color和font-size：
實例
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery HTML參考手冊
如需有關jQuery CSS方法的完整內容，請訪問我們的jQuery CSS 操作參考手冊
jQuery -尺寸
通過jQuery，很容易處理元素和瀏覽器窗口的尺寸。
jQuery尺寸 方法
jQuery提供多個處理尺寸的重要方法：
?width()
?height()
?innerWidth()
?innerHeight()
?outerWidth()
?outerHeight()
jQuery width()和height()方法
width()方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height()方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
下面的例子返回指定的
元素的寬度和高度：
實例
$("button").click(function(){
vartxt="";
txt+="Width: " + $("#div1").width() +"
";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth()和innerHeight()方法
innerWidth()方法返回元素的寬度（包括內邊距）。
innerHeight()方法返回元素的高度（包括內邊距）。
下面的例子返回指定的
元素的inner-width/height：
實例
$("button").click(function(){
vartxt="";
txt+="Inner width: " + $("#div1").innerWidth() +"
";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth()和outerHeight()方法
outerWidth()方法返回元素的寬度（包括內邊距和邊框）。
outerHeight()方法返回元素的高度（包括內邊距和邊框）。
下面的例子返回指定的
元素的outer-width/height：
實例
$("button").click(function(){
vartxt="";
txt+="Outer width: " + $("#div1").outerWidth() +"
";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
outerWidth(true)方法返回元素的寬度（包括內邊距、邊框和外邊距）。
outerHeight(true)方法返回元素的高度（包括內邊距、邊框和外邊距）。
實例
$("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文檔）和窗口（瀏覽器視口）的寬度和高度：
實例
$("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);
});
下面的例子設置指定的
元素的寬度和高度：
實例
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery CSS參考手冊
如需關于jQuery Dimensions的完整參考，請訪問我們的jQuery尺寸參考手冊。
jQuery遍歷
什么是遍歷？
jQuery遍歷，意為“移動”，用于根據其相對于其他元素的關系來“查找”（或選取）HTML元素。以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止。
下圖展示了一個家族樹。通過jQuery遍歷，您能夠從被選（當前的）元素開始，輕松地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對DOM進行遍歷。
圖示解釋：
?
元素是
的父元素，同時是其中所有內容的祖先。
?
元素是
元素的父元素，同時是
?左邊的
元素是的父元素，
的子元素，同時是
?元素是
的子元素，同時是
和
?兩個
元素是同胞（擁有相同的父元素）。
?右邊的
元素是
的父元素，
的子元素，同時是
?元素是右邊的
的子元素，同時是
和
提示：祖先是父、祖父、曾祖父等等。后代是子、孫、曾孫等等。同胞擁有相同的父。
遍歷DOM
jQuery提供了多種遍歷DOM的方法。
遍歷方法中最大的種類是樹遍歷（tree-traversal）。
下一章會講解如何在DOM樹中向上、下以及同級移動。
jQuery遍歷參考手冊
如需了解所有的jQuery遍歷方法，請訪問我們的jQuery 遍歷參考手冊。
jQuery遍歷-祖先
祖先是父、祖父或曾祖父等等。
通過jQuery，您能夠向上遍歷DOM樹，以查找元素的祖先。
向上遍歷DOM樹
這些jQuery方法很有用，它們用于向上遍歷DOM樹：
?parent()
?parents()
?parentsUntil()
jQuery parent()方法
parent()方法返回被選元素的直接父元素。
該方法只會向上一級對DOM樹進行遍歷。
下面的例子返回每個元素的的直接父元素：
實例
$(document).ready(function(){
$("span").parent();
});
jQuery parents()方法
parents()方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素()。
下面的例子返回所有元素的所有祖先：
實例
$(document).ready(function(){
$("span").parents();
});
您也可以使用可選參數來過濾對祖先元素的搜索。
下面的例子返回所有元素的所有祖先，并且它是
元素：
實例
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil()方法
parentsUntil()方法返回介于兩個給定元素之間的所有祖先元素。
下面的例子返回介于與
元素之間的所有祖先元素：
實例
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery遍歷參考手冊
如需了解所有的jQuery遍歷方法，請訪問我們的jQuery 遍歷參考手冊。
jQuery遍歷-后代
后代是子、孫、曾孫等等。
通過jQuery，您能夠向下遍歷DOM樹，以查找元素的后代。
向下遍歷DOM樹
下面是兩個用于向下遍歷DOM樹的jQuery方法：
?children()
?find()
jQuery children()方法
children()方法返回被選元素的所有直接子元素。
該方法只會向下一級對DOM樹進行遍歷。
下面的例子返回每個
元素的所有直接子元素：
實例
$(document).ready(function(){
$("div").children();
});
您也可以使用可選參數來過濾對子元素的搜索。
下面的例子返回類名為"1"的所有
元素，并且它們是
的直接子元素：
實例
$(document).ready(function(){
$("div").children("p.1");
});
jQuery find()方法
find()方法返回被選元素的后代元素，一路向下直到最后一個后代。
下面的例子返回屬于
后代的所有元素：
實例
$(document).ready(function(){
$("div").find("span");
});
下面的例子返回
的所有后代：
實例
$(document).ready(function(){
$("div").find("*");
});
jQuery遍歷參考手冊
如需了解所有的jQuery遍歷方法，請訪問我們的jQuery 遍歷參考手冊。
jQuery遍歷-同胞
同胞擁有相同的父元素。
通過jQuery，您能夠在DOM樹中遍歷元素的同胞元素。
在DOM樹中水平遍歷
有許多有用的方法讓我們在DOM樹進行水平遍歷：
?siblings()
?next()
?nextAll()
?nextUntil()
?prev()
?prevAll()
?prevUntil()
jQuery siblings()方法
siblings()方法返回被選元素的所有同胞元素。
下面的例子返回
的所有同胞元素：
實例
$(document).ready(function(){
$("h2").siblings();
});
您也可以使用可選參數來過濾對同胞元素的搜索。
下面的例子返回屬于
的同胞元素的所有
元素：
實例
$(document).ready(function(){
$("h2").siblings("p");
});
jQuery next()方法
next()方法返回被選元素的下一個同胞元素。
該方法只返回一個元素。
下面的例子返回
的下一個同胞元素：
實例
$(document).ready(function(){
$("h2").next();
});
jQuery nextAll()方法
nextAll()方法返回被選元素的所有跟隨的同胞元素。
下面的例子返回
的所有跟隨的同胞元素：
實例
$(document).ready(function(){
$("h2").nextAll();
});
jQuery nextUntil()方法
nextUntil()方法返回介于兩個給定參數之間的所有跟隨的同胞元素。
下面的例子返回介于
與
元素之間的所有同胞元素：
實例
$(document).ready(function(){
$("h2").nextUntil("h6");
});
jQuery prev(), prevAll() &
prevUntil()方法
prev(), prevAll()以及prevUntil()方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在DOM樹中沿著同胞元素向后遍歷，而不是向前）。
jQuery遍歷參考手冊
如需了解所有的jQuery遍歷方法，請訪問我們的jQuery 遍歷參考手冊。
jQuery遍歷-過濾
縮寫搜索元素的范圍
三個最基本的過濾方法是：first(), last()和eq()，它們允許您基于其在一組元素中的位置來選擇一個特定的元素。
其他過濾方法，比如filter()和not()允許您選取匹配或不匹配某項指定標準的元素。
jQuery first()方法
first()方法返回被選元素的首個元素。
下面的例子選取首個
元素內部的第一個
元素：
實例
$(document).ready(function(){
$("div p").first();
});
jQuery last()方法
last()方法返回被選元素的最后一個元素。
下面的例子選擇最后一個
元素中的最后一個
元素：
實例
$(document).ready(function(){
$("div p").last();
});
jQuery eq()方法
eq()方法返回被選元素中帶有指定索引號的元素。
索引號從0開始，因此首個元素的索引號是0而不是1。下面的例子選取第二個
元素（索引號1）：
實例
$(document).ready(function(){
$("p").eq(1);
});
jQuery filter()方法
filter()方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
下面的例子返回帶有類名"intro"的所有
元素：
實例
$(document).ready(function(){
$("p").filter(".intro");
});
jQuery not()方法
not()方法返回不匹配標準的所有元素。
提示：not()方法與filter()相反。
下面的例子返回不帶有類名"intro"的所有
元素：
實例
$(document).ready(function(){
$("p").not(".intro");
});
jQuery遍歷參考手冊
如需了解所有的jQuery遍歷方法，請訪問我們的jQuery 遍歷參考手冊。
