简述
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
元素提取（操作），遍历，修改，事件？
添加JQuery库
1. 位于一个JavaScript文件中，包含所有jQuery函数
2. 远程下载Google的CDN
3. Microsoft 的CDN
加载库
------------------------------
安装
把jQuery添加到您的网页
两个版本
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
不下载库，你可以引用他CDN（内容分发网络）
谷歌和微软的服务器都存有 jQuery 。
选择版本问题 1.8.0， 1.8， 1
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。
所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间
同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
CDN的作用！！！！！
语法
$(this).hide()
//选取当前HTML元素
$("#test").hide()
//选取id = this 的元素
$("p").hide()
//选取p元素
$(".test").hide()
//选取class='test'的元素
一. ------------选取元素---------------
-----可以对元素进行操作--------
基础语法: $(selector).action()
selector:查询HTML元素
action():执行元素的操作
eg.1
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
jQuery 选择器
一 如何准确的选取HTML元素
元素组或者单个元素
关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
1. 元素选择器
eg.1
$("p")
$("p.intro")
$("p#demo")
2. 属性选择器
eg.1
jQuery 使用 XPath 表达式来选择带有给定属性的元素
$("[href]")
$("[href='#']")
$("[href!='#']")
$("[href$='.jpg']")
3. CSS选择器
可用于改变 HTML 元素的 CSS 属性
$("p").css("background-color","red");
更多属性选择器:
$(this)
$("p")
$("p.intro")
$(".intro")
$("#intro")
$("ul li:first")
$("href$='.jpg")
$("div#intro .head")
jQuery 事件
选取好元素,就可以对元素进行操作啦
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
通常会把 jQuery 代码放到 部分的事件处理方法中：
编程思想
------------------------------
单独文件中的函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
---------------------------
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
总结:
jQuery是为了处理事件而特别设计,
1. 把所有 jQuery 代码置于事件处理函数中
2. 把所有事件处理函数置于文档就绪事件处理器中
3. 把 jQuery 代码置于单独的 .js 文件中
4. 如果存在名称冲突，则重命名 jQuery 库
jQuery 效果函数
$(selector).func(speed,callback);
时长 速度 图片淡化效果值(0-1)
hide()
show()
toggle()
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
slideDown()
slideUp()
slideToggle()
jQuery animate() 方法允许您创建自定义的动画。
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
eg.1
$("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 插件。
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
eg.1
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
callback()
//Callback 函数在当前动画 100% 完成之后执行。
$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。
jQuery - Chaining
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。
jQuery - 获得内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
DOM = Document Object Model（文档对象模型）
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
jQuery 设置内容和属性
text()、html() 以及 val()，同样拥有回调函数
eg.1
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
//被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery - 删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
jQuery - 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
jQuery - css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
jQuery - 尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery 遍历
parent()
parents()
parentsUntil()
children()
find()
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 "intro" 的所有 元素：
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
jQuery - AJAX 简介
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
也可以把 jQuery 选择器添加到 URL 参数。
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
eg.1
$("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() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
eg.1
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
eg.2
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
jQuery - noConflict() 方法
jQuery noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});