jQuery，顾名思义，也就是JavaScript和查询（Query），是一个辅助JavaScript开发的库。
jQuery 能极大地简化 JavaScript 编程。
目录
1 jQuery库包含的特性
2 jQuery与JS
3 获取页面元素
4 DOM事件与jQuery方法
5 简易操作DOM元素
6 处理尺寸
7 遍历操作
8 过滤操作
9 jQuery对JS的增强
10 为页面添加动态效果
11 jQuery与Ajax
12 jQuery工具
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery；
选择符（selector）“查询”和“查找” HTML 元素，如：
$("#test").hide() - 隐藏所有 id="test" 的元素；
2005年，受该领域的先驱人物Dean Edwards和Simon Willison等人的启发，John Resig编写了一套函数，利用这些函数能够以编程的方式快速查找网页中的元素，并为这些元素指定行为。（JQuery使用jquery()函数或$函数。）
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布。其中包含了DOM操作和基本的动画功能。他把这个项目命名为jQuery，意在强调其查找或“查询”网页元素，并通过JS操作这些元素的核心用途。
js库主要是为了包装和扩展js核心及BOM和DOM已有功能，为开发人员提供大量便捷的实用函数；
jQuery的大部分概念是从HTML和CSS的结构中借用而来的。
js库和框架致力于解决的问题，无非就是（跨浏览器）DOM操作、事件处理、样式更换、外部通信（Ajax）。但jQuery独特的集合对象、隐含迭代、方法连缀、自定义选择符和事件方法，加之不到20KB的轻巧，而很受青睐。
jQuery的特点在于其“独特的编程方式”，“以DOM元素为核心，一点一点地给它们添加新功能”(by centering on DOM Elements and tacking bits of functionality on top of them,jQuery made JavaScript fun again)。其特色在于其“面向集合和方法连缀”。也就是用CSS选择符创建jQuery对象，为这些对象创建丰富的方法，指操作其中的DOM元素，而且让所有方法尽可能返回这个对象以实现方法连缀使用。
jQuery不仅支持各式各样的CSS选择符表达式，而且还支持XPath和自定义的选择符表达式，使开发者打到要操作的元素或集合简单得难以置信；它有细腻灵巧而富有弹性的事件处理机制，包括事件注册、触发和自定义以及hover()方法，处理Ajax请求和响应简洁明快、简单易用；以及超级方便的扩展机制，丰富的插件支持（Interface等），强大的社区支持，让其独树一帜。
JQuery的库很轻量级，压缩后只有几十K，在 http://jquery.com/下载后引入或从公共库引用，如：
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="includes/js/jquery-latest.min.js"></script>
在了解细节之前，先来看一个完整的小实例：
图片描述(最多50字)
以上是实例实现的效果是：获取id为“p1“的标签对象，然后应用css的红色以及动态的滑动效果。
1 jQuery 库包含的特性
HTML元素选取；
HTML元素操作；
CSS操作；
HTML事件函数；
JavaScript特效和动画；
HTMLDOM遍历和修改；
AJAX；
2 jQuery与JS
JQuery作为一个库，会在JS的基础上实现自己的一些语法。要理解JQuery，首先要理解JS，JS是一门基于对象的脚本语言，由内置于浏览器的JavaScript引擎解释执行。之所以说是基于对象，是因为JS是通过自身内建的对象和DOM对象模型所提供的对象和事件，对网页内容进行控制、对用户操作进行响应，从而实现网页的动态交互效果的；
当浏览器作为JS的执行环境时，浏览器就作为宿主环境提供了宿主对象（BOM）；因为这些对象在浏览器加载网页时就存在，可以看成它们是一些宿主类的实例，只是这些实例无须使用new运算符显式地实例化。这些宿主对象也就是浏览器公开给JS的API，通过这些API，JS应用程序可以获取浏览器相关的信息，也可以修改浏览器的一些显示；
JS的核心在于通过DOM对象操作HTML页面中的各个节点元素或元素集合，动态修改HTML文档的内容，实现基于Web的应用。如同Word、Excel的“先选定、后操作”一样，JS对页面元素的操作也要“先选择”。JS对页面的选择包括有HTML标签元素以及CSS选择器（ID与类选择器）。
3 获取页面元素
从JQuery的字面去理解，J代表JS，Query表示查询，JQuery很重要的功能就是实现对象（或叫文档元素、DOM元素、页面元素）的查询或获取，以实现对象的相应操作；Query 最有特色的语法特点就是与CSS 语法相似的选择器。
下面来看JS获取页面元素的语法：
图片描述(最多50字)
如：
var h = document.getElementById(tab).getElementsByTagName("h3");
jQuery 获取页面元素的语法就简便了，jQuery 中所有选择器都以美元符号开头：$()，如：
$("p")、$("#containor")、$(".quo")
括号内的参数可以是HTML标签元素，也可以是CSS的ID或class选择器及其它自定义选择器；
上面的JS语句用JQuery表示就是：
var h = $('#tab > h3');
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
3.1 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取元素。
$("p.intro") 选取所有 class="intro" 的元素。
$("p#demo") 选取所有 id="demo" 的元素。
3.2 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
3.3 CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");
图片描述(最多50字)
4 DOM 事件与jQuery方法
在JS中一切都是对象，JQuery也不例如，在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
等效DOM事件的jQuery方法，先选择（或确认目标对象），后应用对象方法：
$("p").click(function(){
// 动作触发后执行的代码!!
});
图片描述(最多50字)
5 简易操作DOM元素
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中：
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
如修改页面外观、改变文档内容。
首先要看JS是如何操作的：
var parent = document.getElementById("parent");
var child0 = document.createElement("div");
child0.innerHTML = "child0";
child0.className = "newDiv";
parent.appendChild(child0);
5.1 设置或返回所选元素的内容或值
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$("#test").text());
$("#test").html());
$("#test").val());
5.2 获取并设置 CSS 类
jQuery提供了跨浏览器的标准解决方案，且即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("#div1").addClass("important blue");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css({"background-color":"yellow","font-size":"200%"});
5.3 添加新的 HTML 内容
$('#container').append('<a href="more.html">more</a>');
5.4 设置属性
jQuery attr() 方法也用于设置/改变属性值。
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
5.5 删除元素/内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
6 处理尺寸
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
7 遍历操作
7.1 向上遍历 DOM 树
parent() 方法返回被选元素的直接父元素。
$("span").parent();
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
$("span").parents();
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div");
7.2 向下遍历
向下遍历 DOM 树，以查找元素的后代。
children() 方法返回被选元素的所有直接子元素。
$("div").children();
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("div").find("span");
$("div").find("*");
7.3 水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
$("h2").siblings();
$("h2").siblings("p");
$("h2").next();
$("h2").nextAll();
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
8 元素过滤
元素过滤可以缩写搜索元素的范围。
8.1 按位置过滤
first(), last() 和 eq()允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
$("div p").first();
$("div p").last();
$("p").eq(1);
8.2 filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$("p").filter(".intro");
8.3 not() 方法
not() 方法返回不匹配标准的所有元素。
$("p").not(".intro");
9 jQuery对JS的增强
JS除于实现更简易操作DOM元素以外，还有其它方面的增强：
9.1 jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
$.each(obj,function(key,value){
total += value
});
还有$().each()方法；
9.2 jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
JS以浏览器为运行环境，代码由浏览器解释执行，所以不同的浏览器对一些JS的命令的支持是不一样。另外浏览器所提供的DOM方式也是有区别的。
10 为页面添加动态效果
jQuery内置了一些隐藏、显示、切换，滑动，淡入淡出，以及动画之类的效果，以及制作新效果的工作包。
$('div.details').slideDown();
11 jQuery与Ajax
无须刷新页面从服务器获取信息：也就是Ajax，是一系列在客户端和服务器之间传输数据强大技术。
$('div.details').load('more.html #content');
12 jQuery工具
$.each()是更通用的循环方法，能够在对象和数组中循环；
（$().each()专用于jQuery对象中的循环；）
$.map()循环读取数组；
$.merge合并两个数组；
$.unique过滤重复的数组元素；
$.trim()从字符串或者表单值中删除空格；
$().data()将对象和数据附加到DOM中；
13 结束语
理解了上述内容以后，再来看JQuery语法就简单了，当然首先是要熟悉JS语法，然后再熟悉一下JQuery的选择器语法与等效DOM事件的jQuery方法，大部分的JQuery代码就能看懂了。
参考：http://www.w3school.com.cn/jquery/index.asp
附代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://public.dabiaoge.me/common/js/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p0">1 Query html node.
<p id="p1">2 applyint event emthod.
<p id="p2">3 easy for Javascript coding.
<button>chaining</button>
</body>
</html>
－End－
本页共226段，7027个字符，12979 Byte(字节)