DOM属性-获取和设置页面元素的DOM属性
.addClass()、.attr()、.prop()、.hasClass()、.html()、.removeAttr()、.removeClass()、.removeProp()、
.toggleClass()、.val()
.hasClass()返回的是true或flase
回调对象
.callbacks.add()、.callbacks.disable()、.callbacks.disabled()、.callbacks.empty()、.callbacks.fire()、
.callbacks.fireWith()、.callbacks.fired()、.callbacks.has()、.callbacks.lock()、.callbacks.locked()、
.callbacks.remove()、.jQuery.Callbacks()
核心API
.jQuery.holdReady()、.jQuery()、.jQuery.noConflict()、.jQuery.sub()、.jQuery.when()
分类：css
.addClass()、.css()、.hasClass()、.height()、.innerHeight()、.innerWidth()、.jQuery.cssHooks()、
.jQuery.cssNumber、.offset()、.outerHeight()、.outerWidth()、.position()、.removeClass()、.scrollLeft()、
.scrollLeft()、.scrollTop()、.toggleClass()、.width()
//输出div的宽，高，背景色，颜色
$("div").click(function(){
var html=["当前div所有的样式名称包括："];//数组
var c=$(this).css(["width","height","background-color","color"]);//数组 c得到的是object
//alert(c.width);
$.each(c,function(prop,value){//属性名+值
html.push(prop+":"+value);
});
//alert(html.length) 输出5
$("span").html(html.join("<br>"))
})
$("ul").addClass(function(index,currentClass){
var add;
if(currentClass==="d"){//currentClass是当前类名
add="green";
}
return add+index;//index是当前索引
});
//点击单词标注背景色
var words=$("p").text().split(" ");
var text=words.join("</span> <span>");//注意标签始末是相反的，这样才能包住每个单词
$("p").html("<span>" + text + "</span>");
$("span").click(function(){
$(this).css("background","yellow")
})
html代码：<p>
Once upon a time there was a man
who lived in a pizza parlor. This
man just loved pizza and ate it all
the time. He went on to be the
happiest man in the world. The end.
</p>
数据操作
.queue()、.dequeue()、.clearQueue()、.jQuery.dequeue()、.data()、.jQuery.data()、.jQuery.hasData()、
.jQuery.removeData()、.removeData()
延迟对象
deferred.always()、 deferred.done()、deferred.fail()、deferred.isRejected()、deferred.isResolved()、deferred.notify()、
deferred.notifyWith()、deferred.pipe()、deferred.progress()、deferred.promise()、deferred.reject()、deferred.rejectWidth()、
deferred.resolve()、deferred.resolveWith()、deferred.state()、deferred.then()、jQuery.Deferred()、jQuery.when()、.promise()
尺寸
.height() .width() .innerHeight() .innerWidth() .outerHeight() .outerWidth()
特效
-基本特效
.hide() .show() .toggle()
.toggle([duration][,easing][,complete])动画运行时间，过渡使用哪种缓动函数（linear|swing 线性 振幅），动画完成后执行的函数。宽高透明度
-自定义
.animate()、.clearQueue()、.delay()、.dequeue()、.finish()、jQuery.fx.interval、.jQuery.fx.off、.queue()、.stop()
.animate()允许在任意的数值的css属性上创建动画，所以像background-color是不能用animate的，可以用jq插件jquery.color。回调函数中的this是当前正在执行动画的DOM元素集合。jQuery UI项目扩展了.animate()方法，允许一些非数值的样式，比如颜色。
$("p").animate({
"+=50",
height:"toggle",//给定了toggle作为height属性的目标值
opacity:0.25},1000,function(){
})
.delay()，动画1.delay(2000).动画2，动画1后延迟2s执行动画2，是用来在jQuery动画效果和类似队列中是最好的。但由于其本身的限制，比如无法取消延时，它不是JavaScript的原生 setTimeout函数的替代品，这可能是更适合某些使用情况。
var div=$("div");
function runIt(){
div.show("slow");
div.animate({left:"+=200"},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:"-=200"},1500);
div.hide("slow");
div.show(1200);
div.queue(function(){
$(this).css("background","red");
$(this).dequeue();
//值得注意的是，当使用.queue()添加一个函数的时候，我们应该保证在函数最后调用了 jQuery.dequeue()，这样就能让队列中的其它函数按顺序执行。
})
div.slideUp("normal",runIt);
}
function showIt(){
var n=div.queue("fx");
$("span").text(n.length);
setTimeout(showIt,100)
}
runIt();
showIt();
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div { margin:3px; width:40px; height:40px;
6 position:absolute; left:0px; top:30px;
7 background:green; display:none; }
8 div.newcolor { background:blue; }
9 </style>
10 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
11 </head>
12 <body>
13 <button id="start">Start</button>
14 <button id="stop">Stop</button>
15 <div></div>
16 <script>$("#start").click(function () {
17 $("div").show("slow");
18 $("div").animate({left:'+=200'},5000);
19 $("div").queue(function () {
20 $(this).addClass("newcolor");
21 $(this).dequeue();
22 });
23 $("div").animate({left:'-=200'},1500);
24 $("div").queue(function () {
25 $(this).removeClass("newcolor");
26 $(this).dequeue();
27 });
28 $("div").slideUp();
29 });
30 $("#stop").click(function () {
31 $("div").queue("fx", []);
32 $("div").stop();
33 });</script>
34
35 </body>
36 </html>
-渐变
.fadeIn()、.fadeOut()、.fadeTo()、.fadeToggle()
<!DOCTYPE HTML>
<html>
<head>
<style>
span{ color:red; cursor:pointer; }
div{ margin:3px; width:80px; display:none;height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script>
$(document).click(function(){
$("div:hidden:first").fadeIn();//div：hidden隐藏的div下的第一个dom元素
})
</script>
</body>
</html>
-滑动
.slideDown()、.slideToggle()、.slideUp()
事件
-浏览器事件
.error()、.resize()、.scroll()
一个jQuery的error事件处理器不应该附加到window对象上。当一个脚本错误的时候，浏览器就会触发 window 的 error 事件。无论如何， window 的 error 事件接收不同的参数和返回值与传统的事件不一样。若要绑定 window 的 error 事件，请使用window.onerror代替。
resize 事件处理中的代码，不应该依赖于事件被调用的次数。由于不同浏览器对该事件实现的方式不同，该事件被调用的时机也不同。例如，对于 Internet Explorer 或 基于 WebKit 的浏览器（例如，Safari 和 Chrome）而言，resize 事件在窗口改变的过程中，会被连续调用。在某些浏览器，如 Opera，该事件只在调整窗口大小操作结束时被调用。
-文档加载
.load() 、.unload()前两个弃用 、.ready()($(document).ready(function(){})相当$(function(){})）
-绑定事件处理器
.bind()、.on()、.delegate()、jQuery.proxy()【事件绑定-工具类】、.off()、.one()、.trigger()、.triggerHandler()、.unbind()、.undelegate()
【.live()、.die()、弃用】
.delegate()为匹配元素或今后匹配的元素绑定事件或自定义事件。jq1.7以后被.on()取代，两者区别在参数顺序：
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );//elements尽量和selector靠近，避免在大型文档中，过多的在 document 或 document.body 上添加代理事件
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
要移除使用delegate()绑定的事件，使用.undelegate()方法，取消默认动作和冒泡行为是和.bind()一样的。
.on()方法提供绑定事件处理的所有功能（现在用它就好），取消绑定用.off(),要绑定一个事件，并且只运行一次，然后删除自己，请参阅.one()
W3C指定明确指定focus和 blur事件没有冒泡，但是jQuery定义的跨浏览器的focusin 和 focusout事件，并且可以冒泡。当focus 和 blur绑定委派的事件处理程序时，jQuery分析名称，并提供将他们分别交付给focusin 和 focusout。为了保持一致性和清度，使用冒泡事件类型的名称。
在所有的浏览器，load ，scroll, 和 error 事件(例如, 在一个 <img> 元素上)不会冒泡。在Internet Explorer 8和更低，paste 和 reset事件不会冒泡，这样的事件是不支持委派使用，但若事件处理函数是直接绑定在产生事件的元素上的话，是可以使用这些事件的。
window对象上的error 事件使用非标准的参数和返回值约定，所以jQuery 不支持该事件。作为替代，直接用window.onerror属性分配一个处理函数。
.off()方法移除.on()绑定的事件处理程序，如果是一个简单的事件名称，比如提供“click”，那么所有这种类型的事件（包括直接和委派）从元素上被移除。对于写插件或基于大型代码儿编程时，最好是通过名字空间进行事件绑定或移除操作，这样就不会意外的移除其他代码添加的事件处理函数。若要移除元素上所有的代理事件，而不移除任何非代理事件，请使用特殊值“**”。
.trigger()方法可以绑定事件后立即执行$().on("click",function(){}).trigger("click")；或者手动触发用户绑定的自定义事件。
逻辑很好的一个例子：
<!DOCTYPE html> <html> <head> <style> button { margin:10px; } div { color:blue; font-weight:bold; } span { color:red; } </style> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <button>Button #1</button> <button>Button #2</button> <div><span>0</span> button #1 clicks.</div> <div><span>0</span> button #2 clicks.</div> <script> $("button:first").click(function () { update($("span:first")); }); $("button:last").click(function () { $("button:first").trigger('click'); update($("span:last")); }); function update(j) { var n = parseInt(j.text(), 10); j.text(n + 1); } </script> </body> </html>
.unbind() /.undelegate分别对应.bind()和.delegate()，从1.7以后开始用.on和.off()方法最好。
-事件对象
event.currentTarget、event.target、event.relatedTarget、event.data、event.delegateTarget、event.isDefaultPrevented()、event.isImmediatePropagationStopped()
event.isPropagationStopped()、event.metaKey、event.namespace、event.pageX、event.pageY、event.preventDefault()、event.result、event.stoplmmediatePropagation()、
event.stopPropagation()、evnet.timeStamp、event.type、event.which
-event.target
$("body").click(function(event){
$("#d").html("clicked"+event.target.nodeName+this.nodeName)
})
//每次点击输出的event.target.nodename都是不同的，但是this.nodename都是body
//如果触发的DOM不在jq对象内，则不会有event.target.nodeName输出，比如$("div").click(),如果点击在div内部的span会输出spandiv，如果点击不被div包裹的span则无输出
<div id="#d">bb<span>aa</span></div>
<div>wo</div>
$("body").click(function(event){
if($(event.target).parents("#d").is("#d")||$(event.target).is("#d")){
return;
}
else{
$("#d").hide()
}
})
//如果点击的是#d区域则无操作，否则收起#d层
实现一个简单的事件委托：给无序列表增加一个点击事件处理函数，然后它的子元素li的子元素都隐藏起来。当点击这个ul其中一个子元素li的时候，来回切换显示（参见 toggle()）li的子元素。
<!DOCTYPE html> <html> <head> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <ul> <li>item 1 <ul> <li>sub item 1-a</li> <li>sub item 1-b</li> </ul> </li> <li>item 2 <ul> <li>sub item 2-a</li> <li>sub item 2-b</li> </ul> </li> </ul> <script>function handler(event) { var $target = $(event.target); if( $target.is("li") ) { $target.children().toggle(); } } $("ul").click(handler).find("ul").hide();</script><!--.find("ul").hide()是添加默认隐藏样式，自执行的。--> </body> </html>
-event.currentTarget===this，也就是上边this.nodeName中的this，总是指向$("")DOM元素。
-event.type返回事件类型
-event.result获取上一事件返回值
-event.data 可以用在：在一个 for 循环里，将迭代变量 i 的值传递给 .on() 方法，保留当前迭代的值。
for (var i = 0; i < 5; i++) { $("button").eq(i).on("click", {value: i}, function(event) { var msgs = [ "button = " + $(this).index(), "event.data.value = " + event.data.value, "i = " + i ]; logDiv.append( msgs.join(", ") + "<br>" ); }); }
-event.relatedTarget：对于 mouseout 事件，它指向被进入的元素；对于 mouseover 事件，它指向被离开的元素。
$("a").mouseout(function(event) {
alert(event.relatedTarget.nodeName);
});
-表单事件
.blur .change() .focus() .focusin() .select() .submit()
.blur 起初，这个事件仅适用于表单元素，如元素<input> 。在最新的浏览器中，这个事件适用范围已经扩大到包括所有元素类型。元素可以通过键盘命令失去焦点，比如tab键，或用鼠标点击网页上的其他地方。blur事件不会在Internet Explorer中冒泡，因此，用blur事件委派，跨浏览器无法正常工作，但是，在1.4.2版本， jQuery的解决此限制，模拟blur为focusout 事件，可以使用.on() 和 .delegate()委派的方法。
$("body").on("focusout","input",function(){//input失去焦点可以执行，但是用blur不能执行，事件委派机制http://yuncode.net/article/a_5211bcba5f6ff27
alert("d") //如果去掉input则表示body下所有的可触发失去焦点的元素
})
//以上代码我们为body绑定了事件，那么在其子元素发生了事件之后，子元素就会把事件冒泡给父元素，然后父元素可以根据event.target 来判断事件源到底是哪个DOM节点，从而执行方法。
//明确一点，子元素发生了事件之后，自己并不处理事件，而是将事件委派给父元素来处理。blur本身不能冒泡所以不能用事件委
-change() 一个元素的值改变的时候将触发change事件。此事件仅限用于<input>元素，<textarea>和<select>元素(值改变触发);对于下拉选择框，复选框和单选按钮，当用户用鼠标作出选择，该事件立即触发（选择完成触发）;但对于其他类型的input元素，该事件触发将推迟，直到元素失去焦点才会触点（失去焦点触发，比如点击其他地方）。
<!DOCTYPE html> <html> <head> <style> div { color:red; } </style> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <select name="sweets" multiple="multiple"> <option>Chocolate</option> <option selected="selected">Candy</option> <option>Taffy</option> <option selected="selected">Caramel</option> <option>Fudge</option> <option>Cookie</option> </select> <div></div> <script> $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }) .change(); </script> </body> </html>
-.select()只能用在input-text或者textarea上，用于检索当前选定文本的方法在各个浏览器中是不同的。jQuery的一个插件都提供跨平台的解决方案。
-键盘事件
.fcusout() .keydown() .keypress() .keyup()
-鼠标事件
.click() .dblclick() .focusout() .hover() .mousedown() .mouseenter() .mouseleave() .mousemove() .mouseout() .mouseover() .mouseup() .toggle()
表单
.blur() .change() .focus() jQuery.param() .select() .serialize() .serializeArray() .submit() .val()
内部函数
.context jQuery.error() .jquery .pushStack() .selector【1.7版弃用】
DOM操作
-class属性
.addClass() .after() .append() .appendTo() .attr() .before() .clone() .css() .detach() .empty() .hasClass() .height() .html()
.innerHeight() .innerWidth() .insertAfter() .insertBefore() jQuery.cssNumber .offset() .outerHeight() .outerWidth()
.position() .prepend() .prependTo() .prop() .remove() .removeClass() .replaceAll() .replaceWidth() .scrollLeft()
.scrollTop() .text() .toggleClass() .unwrap() .val() .width() .wrap() .wrapAll() .wrapInner()
-复制元素
.clone()
-DOM插入
-DOM插入并包裹现有内容
.unwrap() .wrap() .wrapAll() .wrapInner()
-DOM插入现有元素内
.append() .appendTo() .html() .prepend() .prependTo() .text()
-DOM插入现有元素外
.after() .before() .insertAfter() .insertBefore()
-DOM移除
.detach() .empty() .remove() .unwrap()
-DOM替换
.replaceAll() .replaceWidth()
-通用属性操作
.attr() .prop() .removeAttr() .removeProp() .val()
-CSS属性
.height() .css() .innerHeight() .innerWidth() jQuery.cssNumber .offset() .outerHeight() .outerWidth() .position() .scrollLeft()
.scrollTop() .width()
杂项(标灰表示已经弃用)
-集合操作
.each() jQuery.param()
-数据存储
.data() .removeData()
-DOM元素方法
.get() .index() .size()【1.8以后由.length取代】 .toArray()
-设置
jQuery.noConflict()
偏移
.offset() .offsetParent() .position() .scrollLeft() .scrollTop()
内部属性(标灰表示已经弃用)
.context jQuery.browser jQuery.fx.interval jQuery.fx.off jQuery.support .jquery .length .selector
-jQuery对象实例的属性
.context .jquery .length
-全局jQuery对象的属性
jQuery.browser jQuery.fx.interval jQuery.fx.off jQuery.support .selector
选择器
-属性选择器
[attribute|="value"]、[attribute*="value"] 、[attribute~="value"]、[attribute="value"] 、[attribute!="value"]、
[attribute^="value"] 、[attribute]、[attribute1="value1"][attribute2="value2"]
(value可以是不带引号的单词或者带引号的字符串) $("div[name='my']")
1.选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素
2.属性值包含给定的子字符串的元素
3.属性值由空格分隔的值中包含一个给定的元素
4.属性值是以给定值为结尾的，区分大小写
5.选择指定属性是给定值的元素
6.选择不存在指定属性，或者指定的属性值不等于给定值的元素
7.选择指定属性是以给定字符串开始的元素
这个选择器能很方便的定位一些由服务器端框架生成的语义化的 ID，它们可能带有相同的前缀。然而这个选择器的速度要比用 class 选择器慢得多。所以如果可能的话，最好在这些元素上生成相同的 class，之后使用 class 选择器来选中它们
8.选择所有具有指定属性的元素，该属性可以是任何值
9.两个属性都满足的
-基础选择器
jQuery("*")
除非被它自己使用，否则 * 选择器或通用选择器，其速度是极其慢的。查找文档中的每一个元素（包括 head, body 等）
(".class") ("element") ("#id")
("selector1,selectro2,selectorN")
selector1: 任何有效的选择,selector2: 其他有效的选择,selectorN: 更多有效的选择只要你喜欢。跟.add()差不多
<script>
var list = $("div,p,span").map(function () {
return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));
</script>
-基础过滤[伪类选择器]
(":animated") 【索引值相关的选择器: (":eq(index)") (":lt()") (":gt()") (":even()") (":odd()")】 (":first") (":last") (":focus")
(":header") (":lang") (":root") (":not") (":target")
(":animated")选择正在执行动画效果的元素，是jQuery延伸出来的选择器，并不是css规范的一部分，不能充分利用原生DOM提供的querySelectorAll()方法来提高性能，为了当使用它时在现代浏览器获得更好的性能，首先使用纯css选择器选择元素，然后使用.filter(":animated")
(":eq()")在匹配的集合中选择索引值为index的元素[索引从0开始]，在jQuery 1.8之前，:eq(index)不接受负值所引值（虽然.eq(index)方法接受）。因为 :eq() 是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一部分, 使用:eq()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用$("your-pure-css-selector").eq(index)代替
请注意，由于JavaScript数组使用基于0的索引 ，这些选择器也是如此。这就是为什么$('.myclass:eq(1)')选择器选择文档中第二个MyClass类的元素，而不是第一个。与此相反，:nth-child(n)是基于1的索引的，以符合CSS规范
(":lt(n)") /(":gt(n)") 低于/ 高于n的元素，不包括n，n从0开始，基本注意的事项跟:eq()上灰色一样，用$().slice(0,index)代替/用$().slice(index)代替。
(":even()")/(":odd()")选择索引为偶数/奇数的元素【实际元素为奇数了】，n从0开始，基本注意的事项跟:eq()上灰色一样，用$().filter(":even")代替/用$().filter(":odd")代替。
(":first")/(":last")选择第一个/最后一个元素，基本注意的事项跟:eq()上灰色一样，用$().filter(":first")代替/用$().filter(":last")代替。
:first伪类选择器相当于:eq(0)。它也可以写为:lt(1)。虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。 $().filter(":first-child")可用
(":focus")选择当前获取焦点的元素。
如同其他伪类选择器（那些以":"开始）一样，使用:focus时，建议在他们前面加一个标签名称或其他选择;否则，会使用默认的通用选择器("*")，性能是不言而喻的。换句话说，$(':focus')等同为$('*:focus')。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必查找整个DOM树。
(":header")选择所有标题元素，像h1, h2, h3 等。用.filter(":header")代替。
(":not(所有的选择器都可防止在这个括号中)")，最好用.not()方法，更易读。
<script> $("input:not(:checked) + span").css("background-color", "yellow"); $("input").attr("disabled", "disabled"); </script>
-子元素过滤
(":first-child") (":first-of-type") (":last-child") (":last-of-type") (":nth-child()") (":nth-last-child()") (":nth-last-of-type()")
(":nth-of-type()") (":only-child") (":only-of-type")
(":first-child")/(":last-child")跟上边基础过滤的(":first")/(":last")区别。匹配多个：即每个父元素匹配的第一个子元素，相当于:nth-child(1)
-内容过滤
(":contains()") (":has()") (":parent") (":empty")
为了当使用:parent 的时候在现代浏览器上获得更佳的性能，首先使用纯CSS选择器选择元素，然后使用.filter(":parent")
-表单
(":button") (":checkbox") (":checked") (":disabled") (":enabled") (":file") (":focus") (":image") (":input") (":password")
(":radio") (":reset") (":selected") (":submit") (":text")
-层级
("parent> child") （"ancestor descendant"）【anestor:任何有效的选择器descendant:一个用来筛选后代【可能是钙元素的资格孩子，孙子，曾孙等】元素的选择器】
("prev+next") ("prev-siblings")
-jQuery扩展
(":animated") ("[name!='value']") (":button") (":checkbox") (":eq()") (":even") (":file") (":first") (":gt()") (":has()")
(":header") (":hidden") (":image") (":input") (":last") (":lt()") (":odd") (":parent") (":password") (":raido") (":reset")
(":selected") (":submit") (":text") (":visible")
-可见性过滤
（":hidden"） (":visible")
jq遍历
-过滤
.eq()、.filter()、.first()、.has()、.is()、.last()、.map()、.not()、.slice()
-其他遍历
.add()、.addBack()、.andSelf()、.contents()、.end()、.not()
-树遍历
.children()、.closest()、.find()、.next()、.nextAll()、.nextUntil()、.offsetParent()、.parent()、
.parents()、.parentsUntil()、.prevAll()、.prevUntil()、.siblings()
closest()从自身元素开始查找，向上查找dom树。
工具类
.clearQueue() .dequeue() jQuery.boxModel jQuery.browser jQuery.contains() jQuery.data() jQuery.dequeue() jQuery.each() jQuery.extend()
jQuery.fn.extend() jQuery.globalEval() jQuery.grep() jQuery.inArray() jQuery.isArray() jQuery.isEmptyObject() jQuery.isFunction()
jQuery.isNumeric() jQuery.isPlainObject() jQuery.isWindow() jQuery.isXMLDoc() jQuery.makeArray() jQuery.map() jQuery.merge()
jQuery.noop() jQuery.now() jQuery.parseHTML() jQuery.parseJSON() jQuery.parseXML() jQuery.proxy() jQuery.queue() jQuery.removeData()
jQuery.support jQuery.trim() jQuery.type() jQuery.unique() .queue()