jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<head> <script src="jquery.js"></script> </head>
请注意，<script> 标签应该位于页面的 <head> 部分。
提示：您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？
在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！
有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 元素jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行 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 animate() 方法允许您创建自定义的动画。语法：
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：
实例
$("button").click(function(){
$("div").animate({left:'250px'});
});
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
Callback 函数在当前动画 100% 完成之后执行。
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 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 DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
jQuery attr() 方法用于设置或返回属性值。
通过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
通过 jQuery，可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
- parent()
- parents()
- parentsUntil()
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children()
- find()
缩写搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
jQuery first() 方法
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");
});
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
