JQuery学习笔记
一. jQuery教程
1. jQuery简介
jQuery是一个JavaScript函数库。
宗旨：“写的少，做的多”。
jQuery 的功能概括
1、html 的元素选取
2、html的元素操作
3、html dom遍历和修改
4、js特效和动画效果
5、css操作
6、html事件操作
7、ajax异步请求方式
8、Utilities
2. jQuery引用方式
1. 从 jquery.com 下载 jQuery 库并安装
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
<head>
<script src="jquery-1.10.2.min.js" type="text/javascript></script>
</head>
/* 在 HTML5 中，可以不必添加type="text/javascript。因为JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！*/
2. 通过 CDN（内容分发网络） 引用
BootCDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery
// 例如BootCDN
<head>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>jQuery引用方式
3. jQuery语法
基础语法：$(selector).action()
$: jQuery标识符
selector: 选择符，查询和查找HTML元素
action(): 执行对元素的操作
实例：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 元素
$("p.test").hide() - 隐藏所有 class="test" 的
元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery入口函数（文档就绪事件）：
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM (所有HTML标签）加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。
$(document).ready(function(){
// 开始写jQuery代码...
})；
// 更简洁的写法
$(function(){
// 写代码...
})
javaScript入口函数
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
window.onload = function(){
// 执行代码
}
4. jQuery选择器
基于已存在的css选择器和一些自定义的选择器
元素选择器（标签选择器）
$(document).ready(function(){
$("button").click(function(){ // 选中所有button标签 点击事件
$("p").hide(); // 选择所有p标签 隐藏方法
});
});
#id 选择器
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.class 选择器
$(document),ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
等多实例：
$("*") 选取所有元素
$(this) 选取当前元素 例如点击事件为一个按钮，那么当前元素就是该按钮
$(“p.test”) 选取class=test的
标签元素
$(“p:first”) 选取所有
标签中的第一个
$(“ul li:first”) 选取第一个
-
元素的第一个
- 元素
$(“ul li:first-child”) 选取每个
-
元素的第一个
- 元素
$("[href]") 选取带有href属性的元素 属性选择器，注意有中括号
$(“a[target=’_blank’]”) 选取所有target属性值为’_blank’的标签元素
$(":button") 选取所有type="button"的元素和元素
$(“button”) 选取所有标签元素
$(“tr:even”) 选取偶数位置的元素 包含表头
$(“tr:odd”) 选取奇数位置的元素 不包含表头
5. jQuery事件
事件就是页面对不同访问者的响应；
事件处理程序就是指当HTML中发生某些事件时所调用的方法；
常见DOM事件：
鼠标事件：
click：当单击元素时，发生 click 事件。
$("p").click(function(){
alert("段落被点击了");
});
// click()方法触发click事件，function可选，规定点击事件发生时运行的函数
dbclick：用法类似单击，仅当双击时触发。
mouseenter：当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
mouseleave：当鼠标指针离开被选元素时，会发生 mouseleave 事件。
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","lightgray");
});
});
// mouseenter事件一般与mouseleave事件一起使用
**注意：**mouseenter事件与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。
mouseleave事件与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。
mousedown：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup：当在元素上松开鼠标按钮时，会发生 mouseup 事件。
hover()方法用于模拟光标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
)
键盘事件：
keypress：键被按下（不会触发所有的键，例如ALT、CTRL、SHIFT、ESC等）
$("input").keypress(function(){
$("span").text(i+=1);
});
keydown：键按下的过程 (event.which属性返回被按下键的键码，若是keypress事件则拿到ASCII码) 兼容性问题有时候是keyCode
$("input").keydown(function(event){
$("div").html("key:" + event.which);
});
keyup：键被松开
$("input").keydown(function(){
$("input").css("background-color","yellow");
});
$("input").keyup(function(){
$("input").css("background-color","pink");
});
三种键盘事件的区别：
-
1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
-
2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
-
3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.
传递数据给事件处理函数
var validKeys = { start: 65, end: 90 }; $("#keys").keydown( validKeys, function(event){ var keys = event.data; //拿到validKeys对象. return event.which >= keys.start && event.which <= keys.end; } );表单事件：
submit：提交表单时会触发submit事件，该事件只适用于元素
$("form").submit(function(){
alert("是否确认提交？");
});
阻止submit按钮的默认行为(使用event.preventDefault()方法阻止表单被提交)：
$("form").submit(function(event){
event.preventDefault();
alert("阻止表单提交");
});
change: 当元素的值改变时触发 change 事件（仅适用于表单字段）。
$("input").change(function(){
alert("文本已被修改");
});
// 当input输入框中输入内容然后按下回车或者点击输入框外部时，change事件触发
focus：当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。
$("input").focus(function(){
$("span").css("display","inline").fadeOut(2000);
});
// 输入框获得焦点时，标签元素的css样式改为行内块元素，2秒内淡出
blur：当元素失去焦点时触发blur事件。
$("input").blur(function(){
alert("输入框失去了焦点");
});
文档/窗口事件：
load：当指定的元素已加载时，触发改事件；该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。
load()方法在jQuery1.8版本已废弃！！！
$("img").load(function(){
alert("图片已载入");
});
unload：当用户离开页面时，会发生 unload 事件。unload() 方法只应用于 window 对象。
当发生以下情况下，会触发 unload 事件：
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器窗口
重新加载页面
unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除！！！！！！！！！
resize： 当调整浏览器窗口大小时，发生 resize 事件。
$(window).resize(function(){
$("span").text(x+=1);
});
// 统计窗口大小调整的次数（窗口大小变化过程中实时变化）
scroll：当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
$("div").scroll(function(){
$("span").text(x+=1);
});
// 滚动统计意义不大
二、jQuery效果
1. 隐藏/显示
简单的hide()方法：
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
// 点击当前元素即可隐藏
隐藏文本（不止在某一个标签中）：
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
隐藏与显示：
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
带参数的隐藏与显示：
$(selector).hide(speed, callback); show也一样
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数说明：
1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；
2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行，只
会调用一次， 如果不加括号，元素显示或隐藏后调用函数，才会调用多次；
3.callback既可以是函数名，也可以是匿名函数；
toggle()方法切换隐藏与显示：
$(selector).toggle(speed, callback);
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
### 2. 淡入淡出
fadeIn()： $(selector).fadeIn(speed, callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut(): 语法及参数相同，用法相同。
fadeToggle(): 切换淡入淡出，参数与用法相同。
fadeTo(): 渐变为给定的不透明度（值介于 0 与 1 之间）
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
// 0为完全透明，1为不透明，保持原本颜色
3. 滑动(折叠)
slideDown(): 向下滑动元素； 下拉
$(selector).slideDown(speed, callback); 参数及用法相同
slideUp()： 向上滑动元素； 收起
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
slideToggle(): 切换上滑下滑状态
4. 动画
animate(): 创建自定义动画；
$(selector).animate({params}, speeed, callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
// 实现div盒子右移的效果（单个属性）
// 注意：默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
animate(): 可以同时操作多个属性
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:0.5,
height:'150px',
width:'150px'
},'slow');
});
});
// animate()方法几乎可以操纵所有css属性，不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 驼峰 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。
animate(): 使用相对值(该值相对于元素的当前值)
// 代码类似，此处只写有变化处
$("div").animate({
left:'250px',
height:'+=150px',
width:'-=150px'
});
// 由于是相对于当前值的变化，所以多次运行时将会有持续变化的效果
animate(): 使用预定义的值，如’show’, ‘hide’, 'toggle’等
$("div").animate({
height:'toggle'
});
animate(): 使用队列功能
$("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");
});
// 按顺序执行一条后再执行下一条
5. 停止动画
stop()方法：在动画或效果完成之前停止，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画等。
$(selector).stop(stopAll, goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop(); // 停止当前激活动画，后续可在此激活
});
$("#stop2").click(function(){
$("div").stop(true); // 停止所有动画
});
$("#stop3").click(function(){
$("div").stop(true,true); //停止所有动画且显示当前激活动画的最终完成效果（未激活的不显示）
});
6. 链（Chaining）
相同的元素上运行多条 jQuery 命令（点方法链接，语法不是很严格，可以在链接的过程中换行缩进）
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
三、jQuery HTML
### 1. 捕获
获得内容：
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括HTML标签）
val() 设置或返回表单字段的值 （即表单里面的value值）
// 若 这是段落中的 粗体 文本。
$("#btn1").click(function(){
alert("Text:" + $("#test").text()); // 显示 这是段落中的 粗体 文本。
});
$("#btn2").click(function(){
alert("HTML:" + $("#test").html()); // 显示 这是段落中的 粗体 文本。
});
获取属性：
attr() 获取属性的值，例如链接
//
$("button").click(function(){
alert($("#runoob").attr("href")); // 显示 www.runoob.com
});
// 建议：对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
// 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
<a href="#" id="link1" action="delete" rel="nofollow">删除</a>
// 这个例子里 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的， 元素本身是没有这个属性的。
2. 设置
设置内容：
text() html() val() 直接在括号里面放入想要设置的内容
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
text()、html() 以及 val() 的回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){ // origText 原始文本，i 原始文本下标
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello world! (index: " + i + ")";
});
});
});
设置属性：
attr() 可以同时设置多个属性值
$("button").click(function(){
$("#runoob").attr({
"href": "http://www.runoob.com";
"title": "jQuery 教程"
});
});
// 同时修改多个属性时用字典的方式
// 修改单个属性时
$("#runoob").attr("href", "http://www.runoob.com");
attr() 的回调函数:
$("button").click(function(){
$("#runoob").attr("href",function(i, origValue){
return origValue + "/jQuery";
});
});
// 直接修改了href的链接地址
3. 添加元素
四种添加新的HTML内容（包括文本与标签）的jquery方法
append() ：在被选元素结尾插入内容（仍然在选中元素的内部）
$("p").append("追加文本")
// 若原文本为“段落。”，那么新文本为“段落。追加文本”
prepend()：在被选元素的开头插入内容（仍然在选中元素的内部）
$("p").prepend("在开头追加文本")
// 显示为在原文本开头加入加粗版的“在开头追加文本”
after() ：在被选元素之后插入内容（在选中元素的外部）
$("img").before("之前");
before()：在被选元素之前插入内容（在选中元素的外部）
$("img").after("之后");
创建元素的几种方法：
function appendText(){
var txt1="文本。
"; // 使用 HTML 标签创建元素
var txt2=$("").text("文本。"); // 使用 jQuery的方法 创建元素 标签要成对
var txt3=document.createElement("p"); // 标签自动补齐
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
// 三者创建出来的都是段落 “文本。”
append()/prepend()与after()/before()之间的区别：
<p>
<span class="s1">s1span>
p>
<script>
$("p").append('s2');
script>
// 结果是这样的
<p>
<span class="s1">s1span>
<span class="s2">s2span>
p>
// 而after()的结果是这样的
<p>
<span class="s1">s1span>
p>
<span class="s2">s2span>
**总结：**append/prepend 是在选择元素内部嵌入。after/before 是在元素外面添加。
4. 删除元素
remove() - 删除被选元素（及其子元素）
$("button").click(function(){
$("#div").remove();
});
// 删除div及其内部所有元素
// 可以接受一个参数，允许对被删元素进行过滤。
$("p").remove(".italic");
// 删除所有类名为italic的p标签
empty() - 从被选元素中删除子元素
$("button").click(function(){
$("#div").empty();
});
// 删除div里面的所有元素，不包括div本身
5. CSS类
通过 jQuery，可以很容易地对 CSS 元素进行操作，获取或设置
addClass() 方法：向被选元素添加一个或多个CSS类
// 向不同的元素添加 class 属性
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
// 向单个元素添加多个类属性
$("body div:first").addClass("important blue");
removeClass() - 从被选元素删除一个或多个类
$("h1,h2,p").removeClass("blue");
toggleClass() - 对被选元素进行添加/删除类的切换操作
$("h1,h2,p").toggleClass("blue");
// 有则删除，没有则添加
6. css()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性： 返回第一个匹配到元素的指定属性
$("p").css("background-color");
// 若第一个匹配到的元素没有该指定的属性，则不返回或者返回不确定
设置 CSS 属性：将所有匹配元素设置为指定的属性
$("p").css("background-color","yellow");
// 将所有p标签 背景色 设置为黄色，不管原标签有没有设置过背景色
// 同时设置多个css属性 用字典的方式
$("p").css({"background-color":"yellow","font-size":"200%"});
7. 尺寸
通过 jQuery，很容易处理元素和浏览器窗口的尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
/* */
$("button").click(function(){
var txt="";
txt+="div 宽度: " + $("#div1").width() + "";
txt+="div 高度: " + $("#div1").height() + "";
txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "";
txt+="div 高度，包含内边距: " + $("#div1").innerHeight() + "";
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "";
txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight() + "</br>;
$("#div1").html(txt);
});
/* div 宽度: 300
div 高度: 100
div 宽度，包含内边距: 320
div 高度，包含内边距: 120
div 宽度，包含内边距和边框: 322
div 高度，包含内边距和边框: 122
div 宽度，包含内边距、边框和外边距: 328
div 高度，包含内边距、边框和外边距: 128
*/
四、jQuery遍历
###1.遍历
通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
注意：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
2. 祖先
用parent()、parents()、parentsUntil()等方法向上遍历 DOM 树，以查找元素的祖先。
parent() 方法：返回被选元素的直接父元素（一般只有一个）
// 只更改span标签的直接父级元素的样式
$("span").parent().css({"color":"red","border":"2px solid red"});
parents() 方法：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
$("span").parents().css({"color":"red","border":"2px solid red"});
// 从span一直向上到body到html为止
// 加参数进行过滤 只更改祖先元素中的ul
$("span").parents("ul").css({"color":"red","border":"2px solid red"});
parentsUntil() 方法：返回介于两个给定元素之间的所有祖先元素
// 选定span，指定div，返回该两者之间的属于span的祖先元素
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
3. 后代
用children()、find()向下遍历 DOM 树，查找后代元素
children() 方法：返回被选元素的所有直接子元素（一个或者多个）
$("div").children().css({"color":"red","border":"2px solid red"});
// 添加参数进行过滤
$("div").children("p.1").css({"color":"red","border":"2px solid red"});
find() 方法：返回被选元素的后代元素，一路向下直到最后一个后代。
// 所有后代
$("div").find("*").css({"color":"red","border":"2px solid red"});
// 指定的后代元素
$("div").find("span").css({"color":"red","border":"2px solid red"});
4. 同胞
有多种方法可以在DOM树中进行水平遍历
siblings()方法：返回被选元素的所有同胞元素。
// 选择h2的所有同胞元素并修改其样式（不包括h2本身）
$("h2").siblings().css({"color":"red","border":"2px solid red"});
// 添加参数进行过滤
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
next() 方法：返回被选元素的下一个同胞元素，只会返回一个元素。
// h2的下一个同胞元素，
$("h2").next().css({"color":"red","border":"2px solid red"});
nextAll() 方法：返回被选元素的所有跟随的同胞元素。
// h2后面的所有同胞元素
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
nextUntil() 方法：返回介于两个给定参数之间的所有跟随的同胞元素。
// 选中的h2以及指定的h6之间的所有同胞元素
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已
5. 过滤
使用方法而不是参数来过滤数据
first() 方法：返回被选元素的首个元素。
// 匹配div标签下的p标签，选择其第一个
$("div p").first().css("background-color","yellow");
last() 方法：返回被选元素的最后一个元素。
// 匹配div标签下的p标签，选择其最后一个
$("div p").last().css("background-color","yellow");
eq() 方法：返回被选元素中带有指定索引号的元素。
// 匹配索引号为1 的p标签 携带索引号(index 1)。
$("p").eq(1).css("background-color","yellow");
filter() 方法：返回与规定标准相匹配的元素。
// p标签下类名为url的所有元素
$("p").filter(".url").css("background-color","yellow");
not() 方法：返回与规定标准不匹配的所有元素。
// p标签下类名不为url的所有元素
$("p").not(".url").css("background-color","yellow");
五、Ajax
1. Ajax简介
AJAX = 异步 JavaScript 和 XML
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。如果没有jQuery，AJAX编程的实现有一些难度。
2. load()方法
jQuery load() 方法是简单但强大的 AJAX 方法，它可以从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
// 加载外部文件来更改指定元素内容
$("#div1").load("/try/ajax/demo_test.txt");
// 在URL参数中添加jQuery选择器，指定加载外部文件中id为p1的元素
$("#div1").load("/try/ajax/demo_test.txt #p1");
callback函数的参数：
- responseTxt - 调用成功时所调用的结果内容
- statusTXT - 包含调用的状态 sucess或error
- xhr - 包含 XMLHttpRequest 对象
// 先执行函数里面的内容，再执行页面上内容的更改（例如本例是先跳出弹窗）
/* 本例中responseTxt为"demo_test.txt"里面的内容，statusTxt为success时，xhr.status=200,xhr.statusText=ok;而当status为error时，xhr.status=404,xhr.statusText=pag not found（错误情况的一个例子）
*/
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
//
3. AJAX的get()和post()方法
HTTP请求GET —— 从指定的资源请求数据
HTTP请求POST—— 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 主要是提交数据，也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get() 方法：通过 HTTP GET 请求从服务器上请求数据。
语法 ： $.get(URL, callback)；
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
// data为“demo_test.php”文件里面的内容，状态为请求成功success或错误error
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
$.post() 方法：通过 HTTP POST 请求向服务器提交数据。
语法：$.post(URL, data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。字典的形式
可选的 callback 参数是请求成功后所执行的函数名。
$.post("/try/ajax/demo_test_post.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
六、jQuery的替代符号$有冲突时的解决办法
1. jQuery 和其他 JavaScript 框架同时使用$
这时候两个框架产生冲突，$符号不知道指代谁。
jQuery内置的noConflict() 方法解决此问题
noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
// 释放$，此时别的框架可以使用
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
// 创建自定义的jQuery简写
var jq=$.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
// 将$作为参数传递后，函数内仍可以使用$，但函数外不能，只能使用jQuery
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});
七、JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。浏览器在执行一个脚本时会检查这个脚本属于哪个页面，即检查是否同源，只有同源时，该脚本才会在相应的浏览器页面运行。
jQuery中使用JSON：
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
var html = ''
;
for(var i = 0; i < data.length; i++)
{
html += '' + data[i] + '';
}
html += '';
$('#divCustomers').html(html);
});
更多方法参见jQuery手册！