通过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 遍历参考手册。
