jQuery学习

最新推荐文章于 2025-06-19 14:35:59 发布

Bo_Young

最新推荐文章于 2025-06-19 14:35:59 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/qq_26282959/article/details/52054064

前端学习专栏收录该内容

8 篇文章

订阅专栏

jQuery是一个JavaScript函数库。jQuery极大地简化了JavaScript编程。

jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库包含以下特性：

HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画

HTML DOM遍历和修改 AJAX Utilities

jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。

可以通过下面的标记把jQuery添加到网页中：

<head>

</head>

请注意：<script>标签应该位于页面的<head>部分。

基础 jQuery 实例

下面的例子演示了 jQuery 的 hide() 函数，隐藏了 HTML 文档中所有的 <p> 元素。

$(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 type="button">Click me</button>

</body></html>

下载 jQuery

有两个版本的 jQuery 可供下载：

· Production version - 用于实际的网站中，已被精简和压缩。

· Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

提示：可以把下载文件放到与页面相同的目录中，这样更方便使用

库的替代

Google 和 Microsoft 对 jQuery 的支持都很好。

如果不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

使用 Google 的 CDN

<head>

/jquery/1.4.0/jquery.min.js"></script></head>

使用 Microsoft 的 CDN

<head>

/jquery-1.4.min.js"></script></head>

在 HTML5 中，不必在 <script> 标签中使用 type="text/javascript"。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

jQuery语法：

通过jQuery，可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。

jQuery 语法实例

$(this).hide() ：隐藏当前的 HTML 元素。

$("#test").hide() ：隐藏 id="test" 的元素。

$("p").hide() ：隐藏所有 <p> 元素。

$(".test").hide() ：隐藏所有 class="test" 的元素。

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义jQuery；选择符（selector）“查询”和“查找”HTML元素； jQuery的action()执行对元素的操作。

提示：jQuery使用的语法是XPath与CSS选择器语法的组合。

文档就绪函数：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素

获得未完全加载的图像的大小

jQuery选择器：

选择器允许对元素组或单个元素进行操作。

jQuery 元素选择器和属性选择器允许你通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许你对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：选择器允许你对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

jQuery 事件函数：jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中。

单独文件中的函数

如果你的网站包含许多页面，并且你希望你的 jQuery 函数易于维护，那么请把你的 jQuery 函数放到独立的 .js 文件中。

<head>

</head>

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

结论

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中

· 把所有事件处理函数置于文档就绪事件处理器中

· 把 jQuery 代码置于单独的 .js 文件中

· 如果存在名称冲突，则重命名 jQuery 库

jQuery效果：

隐藏和显示：

实例

jQuery hide() ：演示一个简单的 jQuery hide() 方法。

jQuery hide() ：另一个 hide() 演示。如何隐藏部分文本。

<script type="text/javascript">

$(document).ready(function(){

$(".ex .hide").click(function(){

$(this).parents(".ex").hide("slow");

});

</script>

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 参数是隐藏或显示完成后所执行的函数名称。

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){

$("p").toggle();

});

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

淡入淡出：

通过 jQuery，可以实现元素的淡入淡出效果。

jQuery Fading 方法

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 拥有以下滑动方法：

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 animate()方法允许你创建自定义的动画。

jQuery 动画 - animate() 方法

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 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(){

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");

});

实例 2：下面的例子把 <div> 元素移动到右边，然后增加文本的字号：

$("button").click(function(){

var div=$("div");

div.animate({left:'100px'},"slow");

div.animate({fontSize:'3em'},"slow");

});

jQuery停止动画：

jQuery stop()方法用于在动画或效果完成前对它们进行停止。

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop()方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

$("#stop").click(function(){

$("#panel").stop();

});

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");

正确（有 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 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。这样写也可以运行：

$("#p1").css("color","red")

.slideUp(2000)

.slideDown(2000);

jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

jQuery-获得内容和属性：

jQuery拥有可操作HTML元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

提示：DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容：

三个简单实用的用于DOM操作的jQuery方法：

text():设置或返回所选元素的文本内容

html():设置或返回所选元素的内容（包括HTML标记）

val():设置或返回表单字段的值

获取属性：attr()

jQuery-设置内容和属性：

设置内容：text()、html()以及val().

text()、html()以及val()的回调函数：回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回你希望使用的字符串。

设置属性：attr()用于设置/改变属性值。

attr()方法也允许你同时设置多个属性。

attr() 的回调函数：jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

jQuery-添加元素：

添加新的HTML内容：

append():在被选元素的结尾插入内容

prepend():在被选元素的开头插入内容

after():在被选元素之后插入内容

before():在被选元素之前插入内容

通过 append() 和 prepend() 方法添加若干新元素

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText(){

var txt1="<p>Text.</p>"; // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素

var txt3=document.createElement("p"); // 以 DOM 创建新元素

txt3.innerHTML="Text.";

$("p").append(txt1,txt2,txt3); // 追加新元素

}

jQuery-删除元素：

remove():删除被选元素（及其子元素）

empty():从被选元素中删除子元素

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

jQuery-获取并设置CSS类：

通过jQuery，可以很容易地对CSS元素进行操作。

addClass():向被选元素添加一个或多个类。

removeClass():从被选元素删除一个或多个类。

toggleClass():对被选元素进行添加/删除类的切换操作。

css():设置或返回样式属性。

jQuery addClass() 方法

下面例子展示如何向不同的元素添加 class 属性。在添加类时，也可以选取多个元素：

$("button").click(function(){

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

});

也可以在 addClass() 方法中规定多个类：

$("button").click(function(){

$("#div1").addClass("important blue");

});

jQuery css()方法：设置或返回被选元素的一个或多个样式属性。

返回css属性：

$("p").css("background-color");

设置css属性：

$("p").css("background-color","yellow");

设置多个css属性：

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery-尺寸：

通过jQUery，很容易处理元素和浏览器窗口的尺寸。

width():设置或返回元素的宽度（不包括内边距、边框或外边距）。

height()：设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth()：返回元素的宽度（包括内边距）。

innerHeight()：返回元素的高度（包括内边距）。

outerWidth()：返回元素的宽度（包括内边距和边框）。

outerHeight()：返回元素的高度（包括内边距和边框）。

outerWidth(true)：返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true)：返回元素的高度（包括内边距、边框和外边距）。

jQuery - 更多的 width() 和 height()

下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

$("button").click(function(){

var txt="";

txt+="Document width/height: " + $(document).width();

txt+="x" + $(document).height() + "\n";

txt+="Window width/height: " + $(window).width();

txt+="x" + $(window).height();

alert(txt);

});

下面的例子设置指定的 <div> 元素的宽度和高度：

$("button").click(function(){

$("#div1").width(500).height(500);

});

jQuery遍历：

jQuery遍历：意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

图示解释：

遍历DOM：jQuery提供了多种遍历DOM的方法。遍历方法中最大的种类是树遍历。

jQuery遍历-祖先：

祖先是父、祖父、或曾祖父等。通过jQuery，能够向上遍历DOM树，以查找元素的祖先。

向上遍历DOM树：

parent():返回被选元素的直接父元素。该方法只会向上一级对DOM树进行遍历。

parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素（<html>）也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

$(document).ready(function(){

$("span").parents("ul");

});

parentsUntil():返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){

$("span").parentsUntil("div");

});

jQuery遍历-后代;

后代是子、孙、曾孙等。通过jQuery，能够向下遍历DOM树，以查找元素的后代。

向下遍历DOM树：

children()：返回被选元素的所有直接子元素。该方法只会向下一级对DOM树进行遍历。

也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function(){

$("div").children("p.1");

});

find()：返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

$(document).ready(function(){

$("div").find("span");

});

下面的例子返回 <div> 的所有后代：

$(document).ready(function(){

$("div").find("*");

});

jQuery遍历-同胞：

同胞拥有相同的父元素，通过jQuery，能够在DOM树中遍历元素的同胞元素。

在DOM树中水平遍历：

siblings()：返回被选元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

$(document).ready(function(){

$("h2").siblings();

});

也可以使用可选参数来过滤对同胞元素的搜索。

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function(){

$("h2").siblings("p");

});

next()：返回被选元素的下一个同胞元素，该方法只返回一个元素。

nextAll()：返回被选元素的所有跟随的同胞元素。

nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

$(document).ready(function(){

$("h2").nextUntil("h6");

});

prev()、prevAll()、prevUntil()

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

jQuery遍历-过滤：

缩写搜索元素的范围

三个最基本的过滤方法是：first()、last()和eq()，它们允许你基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如filter()和not()允许你选取匹配或不匹配某项指定标准额元素。

jQuery first()方法：返回被选元素的首个元素。

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

$(document).ready(function(){

$("div p").first();

});

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

$(document).ready(function(){

$("div p").last();

});

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

$(document).ready(function(){

$("p").eq(1);

});

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 "intro" 的所有 <p> 元素：

$(document).ready(function(){

$("p").filter(".intro");

});

jQuery not() 方法

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "intro" 的所有 <p> 元素：

$(document).ready(function(){

$("p").not(".intro");

});

jQuery-AJAX：

Ajax是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分页面的更新。

AJAX = 异步JavaScript和XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个页面的情况下，AJAX通过后台加载数据，并在网页上进行显示。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery-AJAX load():

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(URL,data,callback);

必需的 URL 参数规定希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery and AJAX is FUN!!!</h2>

<p id="p1">This is some text in a paragraph.</p>

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：

$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数。下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

· responseTxt - 包含调用成功时的结果内容

· statusTXT - 包含调用的状态

· xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

$("button").click(function(){

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功！");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

jQuery-AJAX get()和post()方法：

用于通过HTTP GET 或POST请求从服务器请求数据。

两种在客户端和服务器端进行请求-响应的常用方法是：GET和POST。

GET：从指定的资源请求数据。

POST：向指定的资源提交要处理的数据。

GET基本上用于从服务器获得（取回）数据。注释：GET方法可能返回缓存数据。

POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get()方法：通过HTTP GET请求从服务器上请求数据。

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){

$.get("demo_test.asp",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

提示：这个 ASP 文件 ("demo_test.asp") 类似这样：

response.write("This is some text from an external ASP file.")

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。

然后我们连同请求（name 和 city）一起发送数据。

"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

提示：这个 ASP 文件 ("demo_test_post.asp") 类似这样：

dim fname,city

fname=Request.Form("name")

city=Request.Form("city")

Response.Write("Dear " & fname & ". ")

Response.Write("Hope you live well in " & city & ".")

jQuery-noConflict()：

如何在页面上同时使用 jQuery 和其他框架？

jQuery 和其他 JavaScript 框架

正如你已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果你在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();

jQuery(document).ready(function(){

jQuery("button").click(function(){

jQuery("p").text("jQuery 仍在运行！");

});

也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();

jq(document).ready(function(){

jq("button").click(function(){

jq("p").text("jQuery 仍在运行！");

});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();

jQuery(document).ready(function($){

$("button").click(function(){

$("p").text("jQuery 仍在运行！");

});

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery学习

基础 jQuery 实例

下面的例子演示了 jQuery 的 hide() 函数，隐藏了 HTML 文档中所有的 <p> 元素。

下载 jQuery

有两个版本的 jQuery 可供下载：

库的替代

Google 和 Microsoft 对 jQuery 的支持都很好。

如果不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

使用 Google 的 CDN

使用 Microsoft 的 CDN

jQuery 语法实例

$(this).hide() ：隐藏当前的 HTML 元素。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

更多的选择器实例

jQuery 事件函数：jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中。

单独文件中的函数

如果你的网站包含许多页面，并且你希望你的 jQuery 函数易于维护，那么请把你的 jQuery 函数放到独立的 .js 文件中。

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

结论

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

实例

jQuery hide() ：演示一个简单的 jQuery hide() 方法。

jQuery hide() ：另一个 hide() 演示。如何隐藏部分文本。

<script type="text/javascript">

$(document).ready(function(){

$(".ex .hide").click(function(){

$(this).parents(".ex").hide("slow");

});

});

</script>

jQuery hide() 和 show()

通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

语法：

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

语法：

jQuery Fading 方法

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法：

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

jQuery 滑动方法

jQuery 拥有以下滑动方法：

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

jQuery slideToggle() 方法