jQuery使用记录
jQuery方法获得的集合为类数组对象，可以用一些数组的方法。集合里面的元素为DOM元素，不是jQuery对象。
jQuery设置css3属性的兼容性写法：
$(element).css({ "webkitTransform":"xxx", "MozTransform":"xxx", "MsTransform":"xxx", "OTransform":"xxx", "transform":"xxx"} );
jquery 1.9版本中移出了hover事件，改为mouseenter和mouseout事件；
查询元素上面绑定的所有事件的方法：
jquery._data($(ele)[0],"events"); //返回该元素上绑定的所有事件，每个类型事件维持一个数组，改变该数组顺序即可改变事件触发顺序；委托事件只有在触发时（debugger）才能被查询到
$.cache[index].events;//通过元素的properties查找事件对象的索引jQuery17208377453013832714:87，然后通过$.cache[87].events可以查看该元素上绑定的所有事件。
//在事件的handler上右键，选择show function definition查看事件处理函数的定义。
getEventListeners(targetNode);//chrome在console的API，可以查询元素上面绑定的事件,但只能看到原生方法绑定的回调函数
命名空间的使用：
解绑多个事件处理函数中的一个时，必须有函数名（对该函数的引用），即匿名函数不能解绑，此时可以用命名空间处理。
同一元素上绑定多个事件，要控制触发顺序时，也可用命名空间解决。
/*解绑多个事件处理函数中的一个*/
$("selecotr").on("click.myFoo", function(){
// stuff
})
$("selecotr").unbind('[click].myFoo');
/*控制同一元素上的事件处理函数的触发顺序*/
$('ele').on('click.doStuff1',function(){doStuff1();});
$('ele').on('click.doStuff2',function(){doStuff2();});
$('ele').trigger('click.doStuff2').trigger('click.doStuff1');
$('ele').trigger('click.doStuff1').trigger('click.doStuff2);
$().html()可以接收传入DOM节点组成的类数组对象或数组参数，被当做字符串处理，但是节点上绑定的事件会丢失。通过节点移动（append，before等）事件不会丢失。
remove()方法：该节点及其所有后代节点将同时被删除，返回一个指向已被删除的节点的引用，可在以后继续使用，其绑定的事件会丢失。
detach()和remove()一样，但其所有绑定的事件、附加的数据都会保留下来。
empty()并不是删除该节点，而是清空元素的所有后代节点。
$("Content").insertBefore("Target")===$("Target").before("Content")在…前插入兄弟元素。
$(A).append(B)在B内部末尾追加；如果$(A)已经在页面上，则导致$(A)移动到B的尾部，并不是复制A。tr集合排序后可以直接append到tbody。
$(…).prepend()在…内部的开头追加。
:nth-child()用法
基本用法
:nth-child(n) 选中第n个子元素 //元素从1开始数
:nth-child 范围用法
正方向范围
:nth-child(n+x) 选中从第x个开始的多个子元素 //n从0开始自动+1，
例如:nth-child(n+6) ，就相当于让你选中第6个 :nth-child(6) 和其后的所有子元素
负方向范围
:nth-child(-n+x) 选中从第1个到第x个子元素
例如:nth-child(-n+9)，就相当让你选中第9个和其之前的所有子元素
前后限制范围
nth-child(n+4):nth-child(-n+8) 选中第4-8个子元素
$(…)获取的结果永远是对象，即使页面上没有找到元素。因此判断某个元素是否存在时，不能使用if( $(…) )来判断，而应该使用if( $(…).length )来判断。0为Falsy。
parents()从父元素开始匹配一直往上找，结果为大于等于0个对象；closest()从当前元素本身开始匹配一直往上找，找到即停，结果为0或1个对象
jQuery( selector, [ context ] )
用法 1 ：设置选择器环境
默认情况下，选择器从文档根部对 DOM 进行搜索。不过，可以为 $() 设置可选的 context 参数。
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由于将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 才会得到‘bar’。在内部，选择器环境是通过 .find() 方法实现的，等价于 $(this).find("span")。
find(exp)：从当前集合的后代元素中继续查找
filter(exp)：从当前集合的平级元素中过滤出
gt(n),lt(n)索引从0开始，不包括本身n
$("selector").slice(from, to)性能比$("selector：lt")更好
jQuery.extend(obj)扩展jQuery这个类本身，像$.ajax()就是为jQuery扩展ajax静态方法。
该方法更多用于扩展某个对象属性，即将多个对象合并到目标对象上（如插件中的默认参数var option = $.extend({},defaultVal, object1 [,objectN])）。若只有一个参数，则合并到jQuery上。
jQuery.fn.extend(obj) 扩展的是jQuery对象原型的方法：jQuery.fn=jQuery.prototype，任何jQuery对象都可以调用。
$("selector:visible")不能利用原生DOM，性能不好；改为$("selector").filter(":visible")更好。
该方法查找的元素不包括：display:none；或width和height都为0；或<input type=hidden/>的元素。
注意：Elements with (visibility: hidden) or (opacity: 0) are considered visible, since they still consume space in the layout.所以如果父元素visibility：hidden；隐藏，$("selectro:visible")查询仍能包含此元素。
css属性visibility:hidden；元素在页面不可见，但原来的空间仍保留。
display:none;元素不可见，且页面中不占任何空间。
overflow:hidden.溢出隐藏的元素也算visible的元素。
如何暂时禁用监听的事件函数？
在ele上设置data属性{isDisable:true}，函数内部加判断，fasle时直接return；true时再执行后续代码。
end():回到最近的一个"破坏性"操作之前，即将链式调用匹配的元素集合变为前一次匹配的状态，可以连续调用end方法。例如在调用css方法后调用end方法继续链式操作。
$.when($.ajax(1),$.ajax(2)).then(function(xhr1,xhr2){
…//xhr1为数组，xhr1[0]项为$.ajax(1)返回的数据，xhr1[1]为响应结果的字符串
})
select选项
1:var options=$(" option:selected"); //获取选中的项
2:var value=options.val(); //获取选中项的值 ==$("select").val();
3:var text=options.text(); //获取选中项的文本，要通过选项获取；通过select只能获取选中的val值，不能获取文本
4.$('select').val('xxx'); //直接选中value为xxx的选项。== $('select').find('[value=xxx]').prop('selected',true)
此时虽然值改变了，但不会触发change事件（需要失去焦点时才触发）。可以通过$('select').trigger('change',{key:value})手动触发change事件。
input:checkbox点击
如果用鼠标点击或在其获得焦点时按空格，会先切换其checked选中状态再触发click事件；而通过jQuery用代码触发click事件，则会先触发click事件再切换状态。冲突的解决方法：
1.在click的监听函数中加一个异步，等checked属性改变之后再做判断
setTimeout(function() { $(self).is(':checked'); ... }, 0);
2.改用onChange 方法（原生表单元素都支持）
3.不使用Jquery对象的方法进行触发，而是原生DOM的方法： document.getElementById('#xxx').click() ===$('inputSelector').get(0).click();
//选中页面中指定的按钮
$("input[type='radio'][name=‘xxx’][value='xxx']").prop("checked",true);
//获取某个单选按钮的值
$('input[name="xxx"]:checked').val();
全局ajax事件
$(document).ajaxSuccess(function(event, jqXHR, ajaxOptions, data){
…//jqXHR包含了plainObject data；可以通过ajaxOptions判断需要特别处理的ajax请求
})
全局方法，监听每个通过jquery发送的ajax请求。先触发local的success方法，再触发全局的success方法。通过global：false可以设置为不触发全局的AJAX事件。
$( document ).ajaxStop(function() { …});//当页面所有的ajax完成时触发回调函数。可以通过global：false禁用。
全局回调函数的注销：
$(document).ajaxStop(function () {
$(this).unbind("ajaxStop"); //可以注销
//Some code
});
定义一个轮询，判断需要使用的变量是否存在。如果不存在，就继续轮询，如果变量存在则停止轮询。
(function polling(){
if ("undefined" == typeof (xxx) ){
setTimeout(polling,300);
}else{
fun(...);
}
}());
$('…').click();//用代码触发事件，相当于直接调用回调函数，仍在当前环境执行栈，后续其他代码需要等click处理函数执行完才能执行。jQObj.trigger('xxx')同上。
$(‘ele’).on('click',function(){
var oldTime=new Date();
while(new Date()-oldTime<5000){};
console.log('clicked')
});
console.log("start");
$('ele').click();
console.log("end");
//输出 start、clicked、end；
页面上有多个相同的id时，直接搜总会搜到第一个。但通过限定范围，虽然可以搜到后面那个同id，但是应该用前缀+计数命名法避免同id。
标签书写不规范，浏览器会帮助修改，不影响显示效果。但jQuery是从DOM树上获取信息的，反而会因为浏览器的修正而增加修复bug的难度。比如label标签不闭合，不影响显示，但通过text()获取的就是错误的数据，会获取到最后一个闭合标签那。
对象的方法也是对象的属性，可以通过.方法名访问，也可以通过中括号内字符串访问，即['方法名']：
$('#js-cb .btn-m')[ expression ? 'hide' : 'show'](); 更简洁的写法。
$("selector").text()获取的文本会包含html标签中的空格，需要用trim()方法处理。
window.onload() vs $(document).ready()
window.onload是原生js函数，指页面包含的图片等所有资源都加载完成时才触发的load事件，比较晚。
$(document).ready()是jQuery中的函数，在DOM树构建完成后就触发，和图像、css或js文件是否加载完毕无关。此时js已经可以操作DOM树了，可交互时间提前。
实际上jQuery内部是调用了H5的DOMContentLoaded事件。对于低版本IE，则是用readystatechange事件近似的模拟DOMContentLoaded事件。
