JQuery学习笔记
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
优点：
- 简化JS的复杂操作
- 不再需要关心兼容性
- 提供大量实用方法
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
用$获取的元素是获取到符合条件的一组，但读只能读到第一个元素（text()除外），写（赋值）可以赋值所有元素；
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
sizzle选择器
层级选择
>：选择直接子元素
+：选择下一个子元素
~：选择下面所有子元素
$('div > span').css('border','1px red solid');
//div下的span直接子元素
$('div > span').css('border','1px red solid');
//div的下一个span元素
$('p ~ span').css('border','1px red solid');
//div下面的所有span元素
基本筛选
div:animated 有运动的div元素
div:eq(num) 索引值未num的div元素
div:even div:odd 索引值为奇偶数的div元素
div:first div:last 第一个/最后一个div元素
div:gt(num) div:lt(num) 索引值大于/小于num的div元素
内容筛选
:contains() 选择有指定内容的元素
:empty 选择内容为空的元素
:parent 选择有内容的元素
可见性筛选
:hidden
:visible
子元素筛选
:first-child
:last-child
:first-of-type
:last-of-type
:nth-child()
:nth-of-type()
:only-child
:only-of-type
$('#div1 span:last-child').css('background','red');
//div1下面找span并且span要是第一个/最后一个子元素才选择到
$('#div1 span:first-of-type').css('background','red');
//div1下面的span集合并且选择到集合中第一个/最后一个span元素
$('#div1 span:nth-child(2)').css('background','red');
//div1下面找span并且span要是第二个子元素才选择到（索引是从1开始的）
$('#div1 span:nth-of-type(2)').css('background','red');
//div1下面的span集合并且选择到集合中第二个span元素（索引是从1开始的）
$('#div1 span:only-child').css('background','red');
//div1下面找span并且只有span一个子元素才选择到（只能有一个子元素）
$('#div1 span:only-of-type').css('background','red');
//div1下面找span并且子元素中只有一个span标签才选择到（可以有多个子元素）
表单筛选
:button 按钮
:checkbox 复选框
:radio 单选框
:checked 选中状态的
:disabled 被禁止操作的
:enabled 被允许操作的
:selected 下拉菜单被选中的
jQuery选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") //选取<p>元素。
$("p.intro")// 选取所有 class="intro" 的 <p> 元素。
$("p#demo") //选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") //选取所有带有 href 属性的元素。
$('input[value]')//选取所有带有 value 属性的input元素。
$("[href='#']")//OOO 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']")// 选取所有带有 href 值不等于 "#" 的元素。
$("[value^='.jpg']")//OOO 选取所有 value 值以 ".jpg" 开头的元素。
$("[href$='.jpg']")//OOO 选取所有 href 值以 ".jpg" 结尾的元素。
$("[href*='.jpg']")//OOO 选取所有 href 值含有 ".jpg" 的元素。
$("[href*=.jpg]")//像这样不带引号也可以，但有空格隔开时必须要带引号。如下：
$('div[class="box box2"]')
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");
更多选择器实例看 jQuery 选择器参考手册
jQuery 事件
jQuery 是为事件处理特别设计的。
jQuery 事件处理方法是 jQuery 中的核心函数。
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用$符号。
jQuery 使用名为noConflict()的方法来解决该问题。
var jq=jQuery.noConflict();//帮助您使用自己的名称（比如 jq）来代替 $ 符号。
$()下的常用方法
filter()
将匹配元素集合缩减为匹配指定选择器的元素；
使用该方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。
not()
和filter()相反
has()
将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集(类似于二次选择)
filter()和has()区别
filter()方法，筛选条件作用于自身；
has()方法，筛选条件是作用于它的后代元素中。
has和filter的作用范围不同而已
$("li").has(".topLine"), $("li").filter(".topLine");
has返回的是后代满足class=topLine的自身li对象；
filter则返回的是自身li 为class=topLine的元素；
first() last() OO
选择集合的第一个/最后一个；
next() prev() OOO
获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则在集合中再次匹配选择器的元素；
$("p").next(".selected").css("background", "yellow");
find()OOO children()OO
find()获得当前元素集合中每个元素的所有符合条件的后代，通过选择器、jQuery 对象或元素来筛选。
.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级（直接后代）
eq() OOO
:eq() 选择器选取带有指定 index 值的元素；
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素
index() OOO
index() 方法返回指定元素相对于其他指定元素的 index 位置
$(selector).index(element)
//element可选；规定要获得 index 位置的元素
attr() OOO
attr() 方法设置或返回被选元素的属性值；
返回：
$(selector).attr(属性名)；
设置：
$(selector).attr(属性名,属性值)；
attr()和css()区别
css和attr都可以动态的修改html中元素的属性。
但css()是用来操纵元素style{}的，而attr()是用来操作元素固有的属性(如title等)，且attr()的权重比css()要大，它会覆盖css()的样式。
addClass() removeClass() toggleClass() OO
向被选元素添加/移除一个或多个类；
addClass()如需添加多个类，请使用空格分隔类名；
removeClass()如果没有规定参数，则该方法将从被选元素中删除所有类；
toggleClass()如果class已经有了则删除这个class，没有则添加；
一般可以用attr()来操作class；
width() innerWidth() outerWidth() OOO
width() 方法返回或设置匹配元素的宽度；
如果不为该方法设置单位，则默认以像素为单位；
innerWidth() 方法返回第一个匹配元素的内部宽度；（width + padding，但不包含 border 和 margin）
outerWidth() 方法返回第一个匹配元素的外部宽度；
（width + padding 和 border）
类似于js的offsetWidth，但offsetWidth获取不到隐藏元素的值
outerWidth(true) （width + padding + border + margin）
insertBefore() insertAfter() before() after() OOO
该方法在指定的已有子节点之前/之后插入新的子节点；（剪切）
区别：
a.insertBefore(b)
a在前，b在后,
b是一个自带的选择器（ 即不用$('') ）
<body>
<p class='p1'>p1:hello</p>
<p class='p2'>p2:wenwen</p>
</body>
<script>
$(function(){
$('.p2').before('.p1');
})
</script>
得到：
p2:wenwen
p1:hello
a.before(b)
把元素添加到指定的节点的前面
a在后，b在前
a是页面上已有的选择器，b是你需要添加的内容
注意：是什么就是什么，会识别标签,b不是一个选择器
<body>
<p class='p1'>p1:hello</p>
<p class='p2'>p2:wenwen</p>
</body>
<script>
$(function(){
$('.p2').before('.p1');
})
</script>
得到：
p1:hello
.p1
p2:wenwen
//因为这里的b不是选择器，如果想选到.p1这类，需要这样$('.p1')
调换位置（剪切）是说页面上已经存在的东西，这两个方法里面也可以加页面上没有的东西；
$('<p class='p3'>p3</p>').insertBefore('.p1');
appendTo() append() prependTo() prepend() OOO
$(content).appendTo(selector)
$(selector).append(content)
$(content).prependTo(selector)
$(selector).prepend(content)
| 参数 | 描述 |
|---|---|
| content | 必需。规定要插入的内容（可包含 HTML 标签）。 |
| selector | 必需。规定把内容追加到哪个元素上。 |
该方法在被选元素的结尾/开头（仍然在内部）插入指定内容
appendTo()和原生的appendChild()差不多；
appendTo()和append()的关系同insertBefore()和before()；
remove()OOO detach()O empty()O
$(selector).remove();
$(selector).detach();
$(selector).empty();
remove()和detach()方法移除被选元素，包括所有文本和子节点（包括元素本身的节点（标签）），但会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素；
remove()方法除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除；
detach() 会保留所有绑定的事件、附加的数据；
empty()方法只移除被选元素内的所有内容，但不包括元素本身的节点（标签）；
on() off() one() OOO
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。支持自定义事件；
$(selector).on(event,childSelector,data,function,map)；
绑定不同事件的不同操作：
$('div').on({
'click' : function(){
alert(123);
},
'mouseover' : function(){
alert(456);
}
});
另外有一种绑定事件方法：
$('div').click(function(){
....
})
| 参数 | 描述 |
|---|---|
| event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。 |
| childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 可选。规定当事件发生时运行的函数。 |
| map | 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。 |
off() 方法通常用于移除通过on()方法添加的事件处理程序。
$(selector).off(event,selector,function(eventObj),map)
| 参数 | 描述 |
|---|---|
| event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 可选。规定当事件发生时运行的函数。 |
| map | 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。 |
| one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。 |
$(selector).one(event,data,function)
| 参数 | 描述 |
|---|---|
| event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 可选。规定当事件发生时运行的函数。 |
当使用 one()方法时，每个元素只能运行一次事件处理程序函数。
scrollTop() OOO
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置;
$(selector).scrollTop(offset)
| 参数 | 描述 |
|---|---|
| offset | 可选。规定相对滚动条顶部的偏移，以像素计。 |
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移;
该方法对于可见元素和不可见元素均有效;
Event对象pageX which stopPropagation() preventDefault() OOO
pageX() 属性是鼠标指针的位置，相对于文档的左边缘，pageY()同理
实例：
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
ev.pageX和clientX区别
clientX是相对于可视区的
ev.pageX(相对于文档的) = clientX(相对于可视区) + 滚动条的距离
which 属性指示按了哪个键或按钮；和原生js的keyCode差不多，但不止记录键盘还还能记录鼠标，但触发事件不能用click，因为键盘也可以触发click；
event.which
stopPropagation() preventDefault()
event.stopPropagation()；//阻止冒泡的操作
event.stopImmediatePropagation()；//阻止冒泡和当前元素的事件操作，要放在被阻止事件的前面
event.preventDefault()；//阻止默认事件
return false;//阻止默认事件 + 阻止冒泡的操作
offset() position() offsetParent() OOO
offset()：获取到屏幕的左距离，直接到最顶级元素的距离；
原生js的offsetLeft是到定位父级的距离，想要到顶级元素的距离需要自己封装一个函数，这里的offset()就相当于封装好的函数；
position()：到有定位的父级的left/top值,把当前元素转化成类似定位的形式；此方法只对可见元素有效；而且不认margin值；
offsetParent()：返回最近的祖先定位元素
val()00 size()0 each()000
val() 方法返回或设置被选元素的值
size()方法返回被 jQuery 选择器匹配的元素的数量；
和length()差不多；
each() 方法规定为每个匹配元素规定运行的函数；
$(selector).each(function(index,element))
//function为必需。为每个匹配元素规定运行的函数。
//index - 选择器的 index 位置
//element - 当前的元素（也可使用 "this" 选择器）返回得到的element是原生JS；
if(...){
return false;//跳出循环，类似原生JS的break；
}
注意和$.each()有区别：
$(selector).each()专用于jquery对象的遍历；
$.each()可用于遍历任何的集合；
一堆动画类
show() hide() OO
show()hide()比css的display好，因为行内元素隐藏了再显示还是行内元素，块元素还是块元素
fadeIn() fadeOut() fadeToggle() OO
slideDown() slideUp() slideToggle() OO
get() 000
get() 方法获得由选择器指定的 DOM 元素；（jQ换成原生的js）
$(selector).get(index)；
//index 可选。规定获取哪个匹配元素（通过 index 编号）。
当需要进行元素之间的比较（应该避免这样的比较），先转成原生JS再比较，JQ容易出错（即使是同一个元素也可能返回false）
var $div = $('#div1');
var $p = $('#div p');
$p.parent().children().eq(0) == $p//都选择到p标签，但是结果返回false；
$p.parent().children().eq(0).get(0) == $p.get(0)//所以应该先转成原生JS；
//类似于空json和空数组比较；因为json数组等是属于引用类型，保存的值其实是地址，所以比较的其实是地址，所以不相等；
{} == {} //false;
[] == [] //false;
text()O
text() 方法方法设置或返回被选元素的文本内容；
html()、text()、val()区别：
html()：取得第一个匹配元素或设置每一个匹配元素的html内容（包括标签<>），这个函数不能用于XML文档，但可以用于XHTML文档；
text()：取得所有匹配元素或设置所有匹配元素的文本内容，包括后代元素，纯本文不包括标签，<>会被编码；
（特例：获取时是获取所有，其他都是只获取第一个）
val()：是用来读取表单元素的"value"值；
text()方法不能使用在表单元素上,而val()只能使用在表单元素上
parents()O parent()OO closest()OOO
parents()获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的；（返回零个、一个或多个）
parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的；（返回零个、一个或多个）
closest() 方法获得匹配选择器的第一个祖先元素（也包括自身），从当前元素开始沿 DOM 树向上；必须写参数（返回零个或一个）
注意：一个节点的父级的兄弟节点不是该节点的父级节点；
parentsUntil() nextUntil() prevUntil() O
parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素。
nextUntil()、prevUntil()同理；
siblings() nextAll() prevAll() OO
siblings() 获得匹配集合中每个元素的所有同胞（兄弟节点），通过选择器进行筛选是可选的；
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的；
next()是获得匹配元素集合中每个元素的下一个兄弟节点；
prevAll()同理；
clone() OO
clone() 方法生成被选元素的副本，包含子节点、文本和属性。
$(selector).clone(includeEvents)；
//includeEvents
//可选。布尔值。规定是否复制元素的所有事件处理。
//默认地，副本中不包含事件处理器。
wrap()OO wrapAll() wrapInner() unwrap() O
wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。把选中的内容一个一个从原有标签外部再包一个标签
wrapAll() : 整体包装，把选中的内容整体用一个标签包起来
wrapInner() : 内部包装，把选中的内容一个一个从原有标签内部再包一个标签
unwrap() : 删除包装 ( 删除父级 : 不包括body )
slice()O add()
slice()把匹配元素集合缩减为指定的指数范围的子集。
add() 方法将元素添加到匹配元素的集合中。
$()OOO
$(function(){ //等DOM加载完就可以执行了 , 性能要好（不用等图片(src)、flash等），但需要用到图片的width等属性时，用这个可能出错，因为没加载完；
//当然可以给图片加load()
$('img').load(function(){
alert( $('img').width() );
})
});
window.onload = function(){};//要等整个页面加载完才执行
//DOMContentLoaded（不兼容低版本浏览器，jQ也是用它）
$(document).ready(function(){//第一种是它的简写
});
serialize() serializeArray()
看不懂以后补充；
animate() OOO
animate() 方法执行 CSS 属性集的自定义动画。
$(selector).animate(styles,speed,easing,callback)；
第一个参数 : {} 运动的值和属性
第二个参数 : 时间(运动快慢的) 默认 : 400
第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )
第四个参数 : 回调函数 也可以用链式操作实现
stop()OOO finish()O delay()O
stop() 方法停止当前正在运行的动画。
两个参数：
$(selector).stop()；//默认 : 只会阻止当前运动
$(selector).stop(true); //阻止后续的运动
$(selector).stop(true,true); //可以立即停止到当前运动指定的目标点
$(selector).finish(); //立即停止到所有指定的目标点
delay() 方法对队列中的下一项的执行设置延迟。
delegate()OOO事件委托 undelegate()OO
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。多用于提高性能
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
委托中this是指被委托的元素；
可以用delegateGetTatget()得到主动委托的元素；
$('ul').delegate('li','click',function(ev){
alert（ $(this) ）；//li
alert（ $(ev.delegateTarget) ）;//ul
}
原理：是通过事件冒泡实现的；
好处：性能更好，事件只添加到一个父级身上而不是多个子节点；当用一般方法给子节点添加事件后，再添加子节点，新的子节点并没有事件，但用delegate()就有事件；
$(selector).delegate(childSelector,event,data,function)
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
replaceWith() replaceAll() O
replaceWith() 方法用指定的 HTML 内容或元素替换被选元素
replaceWith() 与 replaceAll()作用相同。
差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。
trigger()主动触发 OOO
trigger() 方法触发被选元素的指定事件类型，并执行事件的默认行为；（像focus事件的焦点会定在输入框里）；而triggerHandler()不会执行事件的默认行为；
和自定义事件配合使用；
$(selector).trigger(event,[param1,param2,...])
event 必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,...] 可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
ev.data ev.target ev.type
data() 方法向被选元素附加数据，或者从被选元素获取数据。
target 属性规定哪个 DOM 元素触发了该事件。
hover()OO
hover(function(){},function(){});
hover()不是调用mouseover()和mouseout()的，而是mouseenter()和mouseleave().
区别在于mouseenter()和mouseleave()鼠标进入相应元素的区域时就触发事件，不会被其他更高层级的子元素挡住；
focusin() focusout() O
当在元素或在其内的任意子元素上发生 focus 事件时，focusin() 方法添加要运行的函数；
与focus()区别：focusin() 方法在任意子元素获得焦点时也会触发，因为支持冒泡，而focus()不支持冒泡事件；
focusin() 只有当当前元素有焦点时才触发，所以不能绑定到不能得到焦点的元素上（如div）；
所以focusin()可以绑定到没有不能得到焦点但子元素可以的元素上；
data() prop() OO
data()向被选元素附加数据，或者从被选元素获取数据。
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
和attr()区别：attr()是被元素设置自定义属性，而data()是把数据存到JQ内部一个集合中，没有直接加到元素身上；
当需要缓存大量数据时，用data()，可以防止缓存泄露；
prop()和attr()差不多，前者是通过oDiv.index = i；的方式，而后者则是通过setAttribute()的方式；
都有一个删除数据的操作：
removeAttr() removeProp() removeData()
$下的常用方法
$().css() $().html() $().val() : 只能给JQ对象用；
$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法
$.type()OOO
$.type() : 也是判断类型，相比原生js typeof()可以判断更多的类型，typeof()很多判断出来的只是object；
$.isxxx() OO
判断类工具，是则返回true；
$.isFunction()判断是否函数；
$.isNumeric()判断是否数字；字符串类型的数字也返回true，这个知识判断是不是数字，不管类型；进一步判断可以用$.type()
$.isArray()判断是否数组；
$.isWindow()判断是否window；
$.isEmptyObject()判断是否空对象；一般用来判断JSON和数组。
$.isPlainObject()判断是否对象类型；像 对象自变量{}或 new Object出来的对象都是true。
$.isXMLDoc()O 判断是否XMLDoc格式；
$.extend()OOO
功能很多，现在先介绍拷贝功能；
拷贝
var a = {
name : "hello"
};
var b = a;
b.name = 'hi';
alert( a.name );//输出hi
//json、数组等对象类型（引用类型）通过赋值的方法时改变b，a也会改变，因为实际上传递的是保存对象的地址
//JavaScript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了，也可以说是就是对象了
应该用$.extend进行拷贝；
var a = {
name : "hello"
};
var b = {};
$.extend( b , a , {age:20} );
//第二个后面的参数都会拷贝给b
b.name = 'hi';
alert( a.name )；//输出hello
alert( b.age )；//输出20
上面是浅拷贝，有第二层的json还是会像赋值那样被改变
var a = {
name : {age:20}
};
var b = {};
$.extend( true , b , a );//默认是浅拷贝的,true表深拷贝
b.name.age = 30;
alert( a.name.age );//20 如果没有true，则输出30
详细解释看js基本类型与引用类型
$.extend是扩展$下的插件；
$.fn.extend是扩展$()下的插件；
$.proxy()OO
改变this指向
$(selector).proxy(functionName,document)；
//这样写是让functionName函数的this指向document，但不会执行函数，要同时执行要在后面加上();
$(selector).proxy(functionName,document)()；
//如果改指向同时要传参：
$(selector).proxy(functionName,document)(3，4)；//传参同时执行；
$(selector).proxy(functionName,document，3，4)；//传参但不执行；
$(selector).proxy(functionName,document，3)(4)；//传参同时执行；这样写也是可以的
有时用下面这种方法更简便：
function(){
var This = this;
function(){
This.style....
};
};
$.trim()OO
$.trim() ：移除字符串两侧的空白字符或其他预定义字符。
$.inArray()O
$.inArray() ：搜索数组中是否存在指定的值。
类似于原生js的indexof()；
makeArray() O
把类数组转成数组
$.parseJSON()OOO
把JSON类型的字符串，转换成真正的JSON数据；
只能针对JSON类型的字符串，要是严格的JSON，安全性较好，因为只能转换JSON类型的字符串，可以避免木马病毒；
$.parseHTML()O
转化HTML的形式的字符串,转成DOM节点，放到一个数组中;
var a = '<div>div</div><span>span</span>';
var arr = $.parseHTML(a);
arr[1].innerHTML = 'hello';
$('body').append( arr[1] );
$.parseXML()O
把XML形式的字符串，转成真正的XML节点;
XML很早就有了，后来慢慢被JSON取代，不过现在也有人用，XML最大的特点是可以自定义标签；
var a = '<?xml version="1.0" encoding="utf-8"?><hello>nihao</hello>';
//<hello>是自定义的标签
//<?xml version="1.0" encoding="utf-8"?>是XML必要的头部信息
$.merge()O
合并两个数组，只能两个；源码中可以合并特殊的JSON对象；
var a = [1,2,3];
var b = [4,5,6];
var c = $.merge(a,b);
$.map()O
var arr = ['a','b','c'];
arr = $.map(arr,function(val,i){
return val + i;
});
//['a0','b1','c2']
$.grep()O
一个查找满足过滤函数的数组元素的函数。原始数组不受影响，返回值为数组。
$.unique()O
针对DOM节点的去重
end() addBack() O
end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
$('div').next().css('background','red').end().css('color','blue');
//div变蓝，div下一个节点变红；
addBack()方法用于将之前匹配的元素加入到当前匹配的元素中，并以新的jQuery对象的形式返回。
$('div').next().css('background','red').addBack().css('color','blue');
div字变蓝，div下一个节点背景变红，字变蓝；
$.queue() .dequeue() O
JQ中的队列，存储的都是函数,当进行出队的操作时候，会自动执行相应的函数;
默认队列名为fx；
queue() 方法显示或操作在匹配元素上执行的函数队列。
dequeue() 方法为匹配元素执行序列中的下一个函数。
当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它。
注意，当通过 queue() 添加函数时，我们应当确保最终调用了 dequeue()，这样下一个排队的函数才能执行;
回调对象 O
回调对象（Callbacks object）模块是JQuery中的一个很基础的模块，很多其他的模块（比如Deferred、Ajax等）都依赖于Callbacks模块的实现。
Callbacks提供如下四个配置(参数)使用：
- once 保证所有回调函数只能执行一次。
- memory 记录上一次调用回调函数的参数值。如果在调用回调函数之后又通过add新回调函数，那么会立即使用memory记录的值调用新增的回调函数。
- unique 保证每个回调函数只能被添加一次，即回调函数列表中每个函数都唯一。
- stopOnFalse 如果一个回调函数返回false，则终止调用其他剩余会回调函数。
通过以上配置的字符串组合（以空格分隔）初始化回调对象。
var callbacks = $.Callbacks('unique memory'); //回调函数列表中每个函数必须唯一，且要记录上一次调用的参数值
Callbacks提供如下API(方法)：
- callbacks.add()
向回调函数列表中增加一个回调函数或回调函数集合。 - callbacks.remove()
从回调函数列表中删除一个回调函数或回调函数的集合。 - callback.fire()
指定参数调用列表中所有的回调函数。
更多API请看 回调对象
延迟对象 OO
看阮一峰的网络日志关于 deferred对象详解 吧！！
AJAX相关工具
$.ajax()OOO
$.ajax({
url : 'user2.php',
type : 'post',//默认get方式，get方式传输的可以写到url?后面，JQ中也可以写到data中
data : { user : $(this).val() },
//发送到服务器的数据，和下面的传递参数data不同
dataType : 'json',
//规定返回数据的类型，
//后端要写成规定的类型，不然会请求失败，
//前端中JQ会根据规定类型自动转换
//规定为JSON时，数组也可以返回
success : function(data){
if(data == 1){
$('#div1').html('可以注册');
}
else if(data == 0){
$('#div1').html('已经注册过了，不能注册');
}
},
error : function(err){
console.log(err.status);
}
});
url:（默认为当前页地址）发送请求的地址。
type:请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
data:发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以把processData参数设置为false，且以POST方式发送。
对象必须为key/value格式，
例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType:预期服务器返回的数据类型。指定类型后，服务器要返回对应的类型，不然会请求失败。同时前端会JQ会自动转换对应类型。规定为JSON时，数组也可以返回；
如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。
可用的类型如下：
- xml：返回XML文档，可用JQuery处理。
- html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
- script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
- json：返回JSON数据。
- jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
- text：返回纯文本字符串。
async:默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。
初始化数据时需要用到异步:要先等数据返回回来后才能继续执行下一行；
注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
success：请求成功后调用的回调函数，有两个参数。
function(data, textStatus){
//data:由服务器返回，并根据dataType参数进行处理后的数据。
//data可能是xmlDoc、jsonObj、html、text等等
//textStatus:描述状态的字符串。
this; //调用本次ajax请求时传递的options参数
}
error:请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
更多参数网上查；
$.get()/post() OOO
使用 HTTP GET/POST 请求从服务器加载数据。
$.get('xxx.php',{name:"hello"},function(data){
console.log(data);
},'xml').error(function(err){
console.log(err);
});
//参数格式：
//(后台地址,传递的数据,请求成功后的回调函数,规定返回的数据类型).error(请求失败后的回调函数)
POST方式差不多；
$.param()OO
创建数组或对象的序列化表示（例如像这种通过&拼接起来width=1680&height=1050），同时类型转换为字符串。
serialize()OO
把form中的name值和value值通过&拼接起来
serializeArray()OO
把form中的name值和value值变成[{},{}]形式；
load()O
通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
$('div').load(url,function);
//回调函数可选；
注意：还存在一个名为 load() 的 jQuery 事件方法。调用哪个，取决于参数
$.getScript()O
通过 AJAX 请求来获得并运行一个 JavaScript 文件(动态加载script标签);
$.getScript(url,function);
//回调函数可选；
$.getJSON()O
通过 HTTP GET 请求载入 JSON 数据;参数用法同上；
$.ajaxSetup()
修改$.ajax()默认配置;
一堆全局事件
$.ajaxStart()
$.ajaxStop()
$.ajaxSuccess()
$.ajaxError()
$.ajaxComplete()
$.ajaxSend()
实战技巧
命名的规范
var $div = $('div');
var $span = $('span');
var aLi = document.getElementsTagName('li');
命名JQ时前面加$符，防止分不清是JS定义的元素还是JQ定义的元素；
容错处理
var oDiv = document.getElementId('div1');
var $div = $('#div1');
//并不存在id = div1的元素
oDiv.onclick = function(){
...
};//报错
$div.click(function(){
...
});//不报错
JQ操作不存在的元素时不会报错，但原生JS会报错；
可以利用$div.length判断元素是否存在，如果为0则选择的元素不存在；
利用This改指向
$('#div1').on('click',function(){
var This = this;
setTimeout(function(){
$(This).css('background','yellow');
},1000);
//像这样的两层函数，可以把this赋值给This获得外层函数的this；
运动的队列问题
像这样执行多个animate()时，会一个一个按顺序执行，上一个执行完再执行下一个，这就是队列；
$('#div1').animate({width : 300},1000);
$('#div1').animate({height : 300},1000);
$('#div1').animate({left : 300},1000);
如果鼠标快速的mouseover和mouseout，会导致给对象添加了很多animate()，所以应该animate()前先shop()一下；
$('#div1').mouseover(function(){
$(this).stop().animate({width:200,height:200});
}).mouseout(function(){
$(this).stop().animate({width:100,height:100});
