通过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 事件
•jQuery 淡入淡出
隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！
效果演示
点击这里，隐藏/显示面板
实例
jQuery hide()
演示一个简单的jQuery hide()方法。
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 滑动
通过jQuery，您可以实现元素的淡入淡出效果。
效果演示
点击这里，隐藏/显示面板
实例
jQuery fadeIn()
演示jQuery fadeIn()方法。
jQuery fadeOut()
演示jQuery fadeOut()方法。
jQuery fadeToggle()
演示jQuery fadeToggle()方法。
jQuery fadeTo()
演示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 动画
jQuery滑动方法可使元素上下滑动。
效果演示
点击这里，隐藏/显示面板
实例
jQuery slideDown()
演示jQuery slideDown()方法。
jQuery slideUp()
演示jQuery slideUp()方法。
jQuery slideToggle()
演示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 滑动
•jQuery stop()
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 动画
•jQuery Callback
jQuery stop()方法用于在动画或效果完成前对它们进行停止。
效果演示
停止滑动
点击这里，向上/向下滑动面板
实例
jQuery stop() 滑动
演示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函数
•jQuery stop()
•jQuery Chaining
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 Callback
•jQuery 获取
通过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 Chaining
•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 文档操作
•jQuery 属性操作
•jQuery CSS 操作
jQuery -设置内容和属性
•jQuery 获取
•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 属性操作
•jQuery CSS 操作
jQuery -添加元素
•jQuery 设置
•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 属性操作
•jQuery CSS 操作
jQuery -删除元素
•jQuery 添加
•jQuery CSS 类
通过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 文档操作
•jQuery 属性操作
•jQuery CSS 操作
jQuery -获取并设置CSS类
•jQuery 删除
•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 类
•jQuery 尺寸
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 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 尺寸
•jQuery 祖先
什么是遍历？
jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过jQuery遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对DOM进行遍历。
图示解释：
•
元素是
的父元素，同时是其中所有内容的祖先。
•
元素是
元素的父元素，同时是
•左边的
元素是的父元素，
的子元素，同时是
•元素是
的子元素，同时是
和
•两个
元素是同胞（拥有相同的父元素）。
•右边的
元素是
的父元素，
的子元素，同时是
•元素是右边的
的子元素，同时是
和
提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
遍历DOM
jQuery提供了多种遍历DOM的方法。
遍历方法中最大的种类是树遍历（tree-traversal）。
下一章会讲解如何在DOM树中向上、下以及同级移动。
jQuery遍历参考手册
如需了解所有的jQuery遍历方法，请访问我们的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 祖先
•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 后代
•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遍历-过滤
•jQuery 同胞
•jQuery AJAX 简介
缩写搜索元素的范围
三个最基本的过滤方法是：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 遍历参考手册。