一、历史由来
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
二、jQuery基础（http://www.php100.com/manual/jquery/index.html）
1、代码风格
在jQuery程序中，都是以美元符号“$”来起始的，而“$”就是jQuery中最重要且独有的对象：jQuery对象
$(function (){}); //执行一个匿名函数
$("#box"); //对id="box"的标签选择
$("#box").css("color","red"); //执行功能函数
2、代码位置
将写的jquery代码放到html中head标签里，必须把代码放到匿名函数中（DOM执行完后执行）
将写的jquery代码放到html中body标签最下面
3、
三、选择器
基本语法：$(selector).action()
1、基本选择器
1>elememt--------------->根据给定的元素标签名匹配所有元素---------------------->$("div")
2>#id--------------------->根据给定的ID匹配一个元素-------------------------->$("#id")
3>.class------------------>根据给定的css类名匹配元素------------------------->$(".class")
4>*----------------------->匹配所有元素------------------------------------->$("*")
2、层级选择器
1>selector1,selectorN------>匹配多个标签------------------------------>$("div，span")
2>ancestor descendant------>给定元素下所有的后代元素（儿子以及孙子）------->$("div span")
3>parent > child----------->给定元素下所有的子代元素（只能是儿子）-------->$("div>span")
4>pren+next---------------->匹配所有跟在 选定标签后面的一个指定元素-------->$("div+span")（只能是他后面的一个）
5>prev ~ siblings---------->匹配 prev 元素之后的所有 siblings 元素------->$("div~span")（只能是之后的所有兄弟元素，他前面的匹配不到）
3、基本筛选器
1>:first----------------->获取配到所有元素的第一个元素------------------->$("li:first")
2>:last------------------>获取配到所有元素的第后一个元素----------------->$("li:last")
3>:not(selector)-------->去除所有与给定选择器匹配的元素------------------>$("input:not(:checked)")
4>:even----------------->匹配所有索引值为偶数的元素,从0开始计数----------->$("li:even")
5>:odd------------------>匹配所有索引值为偶数的元素,从0开始计数----------->$("li:odd")
6>:eq(index)----------->匹配一个给定索引值的元素------------------------>$("li:eq(3)")
7>:gt(index)----------->匹配所有大于给定索引值的元素--------------------->$("li:gt(3)")
8>:lt(index)----------->匹配所有小于给定索引值的元素--------------------->$("li:lt(3)")
9>:header-------------->匹配如 h1, h2, h3之类的标题元素----------------->$(":header")
10>:contains(text)----->匹配包含给定文本的元素-------------------------->$("div:contains('join')")（匹配一个文本内容为join的div标签）
11>:empty-------------->匹配所有不包含子元素或者文本的空元素--------------->$("li:empty")
12>:parent------------->匹配所有包含子元素或者文本的元素------------------>$("li:parent ")
13>:hidden------------->匹配所有不可见元素，或者type为hidden的元素-------->$("div:hidden")
14>:visible------------>匹配所有的可见元素------------------------------>$("div:visable")
4 、属性选择器
1>[attribute]----------->匹配包含给定属性的元素----------------------------->$("div[id]")
2>[attribute=value]----->匹配给定的属性是某个特定值的元素-------------------->$("div[id='l1']")（注意这里id = 'xx'要用单引号）
3>[attribute^=value]---->匹配给定的属性是以某些值开始的元素------------------->$("div[id^='l1']")（id相同，属性值必须以xxx开头）
4>[attribute$=value]---->匹配给定的属性是以某些值结尾的元素------------------->$("div[id$='l1']")
5>[attribute!=value]---->匹配所有不含有指定的属性,或者属性不等于特定值的元素----->$("div[id!='l1']")
6>[attribute*=value]---->匹配给定的属性中包含某些值的元素--------------------->$("div[id*='l1']")（表示属性值中包含li部分）
5、 表单选择器
$("[type='text']")-------->$(":text") 注意只适用于input标签
<form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form>
四、 筛选器
1> eq(index|-index)------------->获取当前链式操作中第N个jQuery对象----------------------------->$("li").eq(1)（当参数大于等于0时为正向选取，当参数为负数时为反向选取）
2> first()---------------------->获取第一个元素---------------------------------------------->$("li").first()
3> last()----------------------->获取最后一个元素-------------------------------------------->$("li").last()
4> filter(expr|obj|ele|fn)------>筛选出与指定表达式匹配的元素集合------------------------------->$("div").filter(".c1")（保留带有c1属性值类的元素）
5> children([expr])------------->一个元素的所有子元素的元素集合-------------------------------->$("div").children()（匹配所有div的子元素）
6> find(expr|obj|ele)---------->在父标签下寻找子标签------------------------>$("div").find("span")（从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同）
7> next([expr])---------------->匹配的元素后面紧邻的一个同辈元素------------------------------->$("div").next()
8> nextAll([expr])------------->查找当前元素之后所有的同辈元素--------------------------------->$("div").nextAll()（括号中是用来过滤的表达式）
9> nextUntil([exp|ele][,fil])-->查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止---------->$("div").nextUntil("xxx")(不算开头和结尾)
10>prev([expr])---------------->匹配的元素前面紧邻的一个同辈元素-------------------------------->$(".c3").prev()
11>prevAll([expr])--------->查找当前元素之前所有的同辈元素-------------------------------------->$(".c3").prevAll()
12>prevUntil([exp|ele][,fil])->查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止-->$("div").prevUntil("xxx")(不算开头和结尾)
13>parent([expr])-------->匹配元素的唯一父元素的元素集合------------------------------------------->$(".c1").parent()
14>parents([expr])---------->匹配元素的祖先元素的元素集合----------------------------------------->$(".c1").parent()（匹配元素的父级，爷级.....最后是body和HTML）
15>parentsUntil([expr|element][,filter])----查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止---->$(".c1").parentsUntil(".c4")
16>siblings([expr])--------->匹配所有同辈标签（不算自己）------------------------------------------->$("div").siblings()
五、属性操作
1、HTML代码、文本、值操作
1> html([val|fn])------------------>获取匹配元素的html内容（文本和标签俩部分）------------->$("div").html()
2> text([val|fn])------------------>获取匹配元素的文本内容（只有文本部分）----------------->$("div").text()
3> val([val|fn|arr])--------------->获取文本框中的值----------------------------------->$(":text").val()
2、属性
1> attr(name|properties|key,value|fn)----->设置或返回被选元素的属性值---------------------->$("div').attr("属性名")
（attr（）中一个值是获取属性值，俩值是设置属性）
2> removeAttr(name)---------------------->从每一个匹配的元素中删除一个属性---------------->$("div').removeAttr("属性名")
（存在一个bug，删除属性后无法恢复，尽量不要用）
3>prop(name|properties|key,value|fn)----->设置或返回被选元素的属性值---------------------->$("div').prop("属性名")
4> removeProp(name)---------------------->从每一个匹配的元素中删除一个属性---------------->$("div').removeProp("属性名")
3、Css类
1> addClass(class|fn)------------------------>为匹配到的元素添加指定的类名------------------->$("div").addClass("hide")
2> removeClass([class|fn])------------------->为匹配到的元素移除指定的类名------------------->$("div").removeClass("hide")
3> toggleClass(class|fn[,sw])---------------->如果存在（不存在）就删除（添加）一个类----------->$("div").toggleClass("hide")
六、Css操作
1、基础操作
css(name|pro|[,val|fn])------------------>为匹配元素设置样式属性------------------------->$(".c1").css({"color":"red","background":"yellow"})
（如果css括号中一个值，直接写css（"xxx","xxx"）,多个属性值时css（{"xxx":"xxx","yyy":"yyy"}））
2、位置
1> offset([coordinates])-------------------->获取匹配元素在当前视口的相对偏移--------------------->$(".c1").offset()
（返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效）
2> position()-------------------------------->获取匹配元素相对父元素的偏移----------------------->$(".c1").position()
Object {top: xx, left: xx}
3>scrollTop([val])-------------------------->获取匹配元素相对滚动条顶部的偏移--------------------->$("div").scroTop()
4> scrollLeft([val])------------------------->获取匹配元素相对滚动条左侧的偏移--------------------->$("div").scrollLeft()
3、尺寸
1> height([val|fn])------------------------------>取得匹配元素本身的高度值（px）----------------------->$("p").height()
2> width([val|fn])------------------------------->取得匹配元素本身的宽度值（px）----------------------->$("p").width()
3> innerHeight()--------------------------------->获取匹配元素内部区域高度（包括补白、不包括边框）--->$("p").innerHeight()
4> innerWidth()---------------------------------->获取匹配元素内部区域宽度（包括补白、不包括边框）---->$("p").innerWidth()
5> outerHeight([options])----------------------->获取匹配元素外部高度（默认包括补白和边框）---------->$("p").outerHeight()
6> outerWidth([options])------------------------>获取匹配元素外部宽度（默认包括补白和边框）---------->$("p").outerWidth()
七、文档处理
1、内部插入
append和prepend一样，前后匹配标签必须加$符号，appendTo和prependTo一样，后面的标签加不加$都行；
1> append(content|fn)--------------------->向匹配到的元素内部后面追加内容----------------------->$(".c1").append("<div>123</div>")
----------把后面的东西添加到c1标签中--------------------------------------------------------->$(".c1").append($(".c2"))
2> appendTo(content)---------------------->把所有匹配的元素追加到另一个指定的元素元素集合中-------->$(".c1").appendTo(".c2")(加到指定集合中后，原来的不存在)
3> prepend(content))---------------------->向匹配到的元素内部前面追加内容----------------------->$(".c1").prepend("<div>123</div>")
4> prependTo(content)-------------------->把所有匹配的元素前置到另一个、指定的元素元素集合中------->$(".c2").prependTo($(".c1"))
2、外部插入
after和before一样，前后匹配标签必须加$符号，insertAfter这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面
1> after(content|fn)-------------------------->在匹配的元素之后插入内容---------------------->$(".c1").after($(".c2"))
2> before(content|fn)------------------------->在匹配的元素之前插入内容---------------------->$(".c1").before($(".c2"))
3> insertAfter(content)----------------------->把所有匹配的元素插入到指定元素后面-------------->$(".c1").insertAfter(".c2")
4> insertBefore(content)---------------------->把所有匹配的元素插入到指定元素前面-------------->$(".c1").insertBefore(".c2")
3、替换
1> replaceWith(content|fn)---------------->将所有匹配的元素替换成指定的HTML或DOM元素---------->$(".c1").replaceWith("<div>9999</div>")
2> replaceAll(selector)------------------->结果相当于把replaceWith的前后标签反过来写---------->$("<div>9999</div>").replaceAll(".c1")
4、删除
1> empty()------------------------->删除匹配元素中所有的子节点(标签及内容)------------->$(".c1").empty()---->删除中间一切
2> remove([expr])------------------>删除匹配到的元素-------------------------------->$("p").remove()---->把自己删除
3> detach([expr])------------------>删除匹配到的元素-------------------------------->$("p").detach()----->把自己删除
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
5、复制
clone([Even[,deepEven]])--------------------克隆匹配的DOM元素并且选中这些克隆的副本
八、事件
1、页面载入
当DOM载入后才执行的函数
$(document).ready(function(){
// 在这里写你的代码...
});
$(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何
$(function($) {
// 你可以在这里继续使用$作为别名...
});
2、事件
1> focus([[data],fn])--------------------->当元素获得焦点时，触发 focus 事件 2> focusin([data],fn)--------------------->当元素获得焦点时，触发 focusin 事件,focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况 3> focusout([data],fn)-------------------->当元素失去焦点时触发 focusout 事件,focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况 4> blur([[data],fn])---------------------->当元素失去焦点时触发 blur 事件 5> change([[data],fn])------------------->当元素的值发生改变时，会发生 change 事件 6> click([[data],fn])-------------------->当点击时触发事件 7> dblclick([[data],fn])----------------->当双击元素时，会发生 dblclick 事件 8> error([[data],fn])------------------->当元素遇到错误（没有正确载入）时，发生 error 事件 9> keydown([[data],fn])----------------->当键盘或按钮被按下时，发生 keydown 事件 10> keyup([[data],fn])------------------>当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上 11> mousedown([[data],fn])-------------->当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件 12> mouseleave([[data],fn])------------>当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用 13> resize([[data],fn])---------------->当调整浏览器窗口的大小时，发生 resize 事件 14> scroll([[data],fn])---------------->当用户滚动指定的元素时，会发生 scroll 事件 15> select([[data],fn])---------------->当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件 16> submit([[data],fn])--------------->当提交表单时，会发生 submit 事件。该事件只适用于表单元素。 17> unload([[data],fn])--------------->在当用户离开页面时，会发生 unload 事件
3、绑定事件事件切换
1> $("p").click(function(){}) //获取某一标签后直接在其后面绑定事件
<body>
<div class="c1">点我</div>
<script>
$(".c1").click(function () {
alert("哈哈")
})
</script>
</body>
2> $(selector).bind(event,data,function) //其后绑定的事件必须是字符串形式，而且其后不加括号 || unbind(type,[data|fn]])
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
单事件处理：例如 $(selector).bind("click",data,function);
多事件处理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；
<body>
<div class="c1">点我</div>
<script>
$(".c1").bind("click",function () {
alert("ok")
})
</script>
</body>
3>$(selector).live(event,data,function)
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
单事件处理：例如 $(selector).live("click",data,function);
多事件处理：1.利用空格分隔多事件，例如 $(selector).live("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件，例如 $(selector).live({event1:function, event2:function, ...})
3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；
4>$(selector).on(event,childselector,data,function) || off(events,[selector],[fn])
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
单事件处理：例如 $(selector).on("click",childselector,data,function);
多事件处理：1.利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；
childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；
<body>
<div class="c1">点我</div>
<script>
$(".c1").bind("click",function () {
alert("ok")
})
</script>
</body>
5>$(selector).delegate(childSelector,event,data,function) // 委托绑定使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素） || undelegate([selector,[type],fn])
childSelector: 必需项；需要添加事件处理程序的元素，一般为selector的子元素；
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
单事件处理：例如 $(selector).delegate(childselector,"click",data,function);
多事件处理：1.利用空格分隔多事件，例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件，例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；
//$("ul").delegate("li","click",function(){}) ----------->委托ul下面的li，使ul下面的li（已经有的或将要有的，都绑定某一个事件）
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").delegate("p","click",function(){ //这里使用事件委托的形式，意思是包含div下的已经创建和将要创建的标签都具有这个效果
$(this).slideToggle(); //这里如果我们换成其他的绑定方式，那以后创建的标签就没有这种效果了
});
$("button").click(function(){
$("<p>这是一个新段落</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这是一个段落</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
</body>
</html>
4、事件切换
1> hover([over,]out) 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数
相当于mouseover和mouseout一起用的效果
<body>
<div class="c1">11111</div>
<button class="c2">按钮</button>
<script>
$(".c2").hover(function () {
$(".c1").hide()
},function () {
$(".c1").show()
})
// $(".c2").mouseover(function () {
// $(".c1").hide()
// })
// $(".c2").mouseout(function () {
// $(".c1").show()
// })
</script>
</body>
2> toggle([speed],[easing],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
<body>
<div class="c1">11111</div>
<button class="c2">按钮</button>
<script>
$(".c2").click(function () {
$(".c1").toggle(1000)
})
</script>
</body>
九、动画
1、基本
1> show([speed,[easing],[fn]])
2> hide([speed,[easing],[fn]])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次
<body>
<div class="c1">11111</div>
<button class="c2">按钮1</button>
<button class="c3">按钮2</button>
<script>
$(".c2").click(function () {
$(".c1").hide(1000,function () {
alert("haha")
})
});
$(".c3").click(function () {
$(".c1").show()
})
</script>
</body>
2、滑动
1> slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
2> slideUp([speed,[easing],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
3> slideToggle([speed],[easing],[fn]) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
.c1{
200px;
height: 200px;
background-color: #2459a2;
}
</style>
</head>
<body>
<div class="c1">11111</div>
<button class="c2">按钮</button>
<script>
$(".c2").click(function () {
$("div").slideUp(1000,function () {
$("div").slideDown(1000)
})
})
</script>
</body>
</html>
3、淡入淡出
1> fadeIn([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
2> fadeOut([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
3> fadeTo([[speed],opacity,[easing],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
4、自定义效果
1> animate(params,[speed],[easing],[fn]) 用于创建自定义动画的函数
params:一组包含作为动画属性和终值的样式属性和及其值的集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
.c1{
200px;
height: 200px;
background-color: #2459a2;
}
</style>
</head>
<body>
<div class="c1">11111</div>
<button class="c2">按钮</button>
<script>
$(".c2").click(function () {
$(".c1").animate({
"900px",
height: "100%",
fontSize: "10em"
}, 1000 );})
</script>
</body>
</html>
2> stop([clearQueue],[jumpToEnd]) 停止所有在指定元素上正在运行的动画
3> delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目
4> finish( [queue ] ) 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
十、循环的俩种方式
each(callback)
1> $("匹配一个可迭代的元素集合").each（function(){}）
2> $.each("可迭代的元素集合"，function(){})
return false; 表示退出当前循环
<script>
$.each(["a","b","c"],function (x,y) { //其中的x为获取的索引位置，y为按索引获取的对应元素
console.log(x,y)
})
$(["a","b","c"]).each(function (x,y) {
console.log(x,y)
})
</script>
十一、扩展的俩种方式
（我们需要实现某种方法，而jquery库中没有的功能，我们就可以通过自己扩展一个功能）
1>jQuery.extend(object) （extend（）中加的是一个字典，其中加方法，方法与方法之间用逗号隔开）
调用的时候和 $.each("可迭代的元素集合"，function(){})一样
<script>
jQuery.extend({
xxxx:function (arg) {
$(arg).text()
},
xxxxx:function (arg) {
$(arg).text()
}
})
</script>
2> jQuery.fn.extend(object)（extend（）中加的是一个字典，其中加方法，方法与方法之间用逗号隔开）
调用的时候和 $("匹配一个可迭代的元素集合").each（function(){}）一样
<script>
jQuery.fn.extend({
xxx:function () {
$(this).text();
xxxxxxx
return xxxxxxx
},
xxxx:function () {
$(this).text();
xxxxxxx
return xxxxxxx
}
})
</script>