选择器
按ID查找 var a=$('#abc');//查找id为abc的节点对象，获取到jQuery对象，若对象不存在，则返回空数组[]
jQuery对象和DOM对象相互转化：
获取过滤到的DOM对象var b=a.get(0);
过滤到的DOM对象包装为jQuery对象var c=$(b);；
按tag查找var a=$('p'); //获取p标签的所有节点
按class查找，在class名称前面加个.即可
var a=$('.red');//返回包含class=red的所有节点
var b=$('.red.green');//返回同时包含red和green的节点
按属性查找，属性值包含空格等特殊字符，需要用双引号括起来；按属性查找还可以通过属性值前后缀查找；前后缀尤其适合于class属性的查找，因为一般class包含多个属性值。
var a=$('[name=email]');//找出name属性为"email"的节点
var b=$('[items="A B"]');//找出items属性为"A B"的节点
var c=$('[name^=icon]');//找出name属性值前缀为icon的所有节点
var d=$('[name$=with]');//找出name属性值后缀为with的所有节点
var e=$('[class^="icon-"]');//找出class至少有一个以icon-开头的所有节点
组合查找
将简单选择器组合起来，即选择指定标签的指定属性节点
var a=$('input[name=email]');//找出name属性为Email的表单标签；
var b=$('tr.red');//找出class为red的tr标签；
多项选择器
把多个选择器用,连接起来，一起选;选出来的元素是按照在HTML文档中出现的顺序来的，而且不会出现重复元素，一个标签不会被选择两次。
var a=$('p,div');//选择所有的p标签和div标签
var b=$('p.red,p.green');//选择所有class为red或green的p标签
层级选择器（descenden selector）
两个DOM具有层级关系，则可用$('ancestor descendent ')来选择；对比单个选择器，层级选择器可以缩小选择范围，可以过滤掉不相关的其他元素；祖先节点可以和子孙节点隔很多辈分；可以多层选择$('div.red p li')选择class为red的div容器内部的p标签内部的li标签。
子选择器（child】selector）
$('parent>child')类似层次选择器，但是限定了层级关系必须要是相邻的父子关系，子节点为父节点的直属子节点。
过滤器（filter）
一般和选择器组合使用，不单独使用；
$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
表单相关
对于表单标签，jQuery提供一组特殊的选择器
:input：可以选择<input>，<textarea>，<select>和<button>；
:file：可以选择<input type="file">，和input[type=file]一样；
:checkbox：可以选择复选框，和input[type=checkbox]一样；
:radio：可以选择单选框，和input[type=radio]一样；
:focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；
:checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，$('input[type=radio]:checked')；
:enabled：可以选择可以正常输入的<input>、<select>等，也就是没有灰掉的输入；
:disabled：和:enabled正好相反，选择那些不能输入的。
其他的特殊选择器
var a=$('div:visible');//所有可见的div
var b=$('div:hidden');//所有隐藏的div
查找 find()
通常选择器可以定位到我们需要的元素，当我们拿到这个jQuery对象时，可以以它为基准进行查找和过滤。
jQuery对象的find()方法可以实现在当前节点的子节点中进行查找的操作，参数接收一个任意的选择器，相当于过滤条件。
若要实现向上查找，即查找父节点，可以使用parent()方法，往上查找一层，参数同样可以接收一个任意的选择器，相当于过滤条件。
对于同层查找，可以使用next()和prev()方法，范围为向上一个节点或者向下一个节点，参数同样可以接收任意一个选择器。
过滤 filter()
对于jQuery对象可以使用filter()方法进行过滤，参数接收一个选择器，可以过滤掉不符合选择器条件的节点。
对于一个jQuery对象若包含不止一个DOM节点，则可以使用first(),last(),slice()方法返回一个新的jQuery对象；slice参数接收首尾地址。
jQuery对象方法也可以进行函数式编程，函数内部的this被绑定为DOM对象，非jQuery对象；
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
操作DOM节点
修改html和文本
jQuery对象提供text()和html()方法，此处API设置非常巧妙，无参数调用时获取节点文本或者html文本，传入参数则变为设置节点文本或者html文本；一个jQuery对象可以包含零个或者多个DOM节点，使用jQuery方法可以作用到对象的每个DOM节点上，进行批量操作，执行一个操作，作用在一组节点上；若选择器没有选择到任何节点，调用jQuery对象方法也不会出现报错。
修改CSS
“批量操作”的特点使得修改CSS变得十分方便；css('name','value')即可修改节点的css属性；由于所有的jQuery方法都会返回一个新的或者本身jQuery对象，因此可以对jQuery对象进行链式操作，例如a.css().css().css()；css()方法直接作用于DOM节点的style属性，具有最高优先级；若要修改class属性，则可使用jQuery提供的下列方法
var a=$('#test-div');
a.css('color'); //获取a节点的color属性
a.css('color','red');//修改a节点的color属性为red
a.css('color','');//清除a节点的color属性
a.hasClass('highlight');//判断class是否包含highlight，返回true或者false
a.addClass('highlight');//添加highlight这个class
a.removeClass('highlight');//删除highlight这个class
显示或隐藏DOM元素
显示和隐藏DOM元素使用十分普遍，jQuery提供show()和hide()方法；隐藏DOM元素并不会改变DOM树的结构，仅仅影响节点的显示。
var a=$('#test-div');
a.hide();//隐藏
a.show();//显示
获取DOM信息
使用jQuery提供的方法，我们可以直接获取DOM的高宽信息，而不需要去判断浏览器的类别而去编写特定的代码。width()和height()方法，参数缺省时获取属性，传入参数时修改属性。
// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600
// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500
// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效
attr()和removeAttr()方法可以用来操作DOM的属性；
// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined
prop()方法和attr()方法类似，但当面对H5中属性值可有可无的情况时，应对方法不同；如checked，在H5中作为属性出现，属性值默认为checked；prop()返回值更加友好，但是用 is()来判断会更好；类似的属性还有selected，判断的时候使用is(‘:selected’);
var a=$('#test-div');
a.attr('checked');//返回checked
a.prop('checked');//返回true
a.is(':checked');//返回true
操作表单
对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value值，统一了输入框的取值和设置值问题。
修改DOM结构
添加DOM
前面的html()方法可以暴力添加节点；
jQuery对象提供append()和prepend()方法，可以给jQuery对象内的节点追加子节点，分别加到子节点的最后和最前；参数除了接收字符串，还可以接收原始的DOM对象、jQuery对象和函数对象；传入函数的时候要求返回一个字符串、DOM对象或者jQuery对象；由于jQuery对象的append()方法可能作用于一组DOM节点，因此传入函数方便对不同的DOM节点生成特定的子节点；如果要添加的DOM节点已经存在于文档树中，他会首先移除，然后进行添加，因此使用append()可以实现移动一个节点。添加同级节点使用after()或者before()。
删除DOM
拿到jQuery对象后可以使用remove()方法删除一个或者一组DOM节点。
绑定事件
由于JavaScript在浏览器中以单线程模式运行，页面加载完毕后，JavaScript也会被执行完，因此，只能依赖触发事件来执行JavaScript代码。
浏览器在接收到用户鼠标或键盘的操作后，会自动在对应的DOM节点触发对应的事件，若节点绑定了对应事件的JavaScript处理函数，该函数就会自动调用；由于不同的浏览器绑定事件的代码不一样，因此使用jQuery对象来写代码，可以屏蔽浏览器的差异性。
jQuery的on()方法可以用来绑定事件，on('事件名',处理函数);
简化写法jQuery对象.click(处理函数)直接调用click()方法
jQuery对象能绑定的事件：
鼠标事件：
click，鼠标单击
dblclick，鼠标双击
mouseenter，鼠标进入
mouseleave，鼠标离开
mousemove，鼠标在DOM内移动
hover，鼠标进入和退出时触发两个函数，相当于mouseenter和mouseleave；
键盘事件：
键盘事件仅仅作用于当前焦点的DOM上，通常是<input>,<textarea>
keydown，键盘按下时触发
keyup，键盘松开时触发
keypress，按一次键后触发
其他事件：
focus，当DOM获得焦点时触发
blur，DOM失去焦点的时候触发
change，当<input>,<select>,<textarea>的内容被修改的时候触发
submit，当<form>被提交的时候触发
ready，当前页面被载入并且DOM树完成初始化时触发
其中ready仅仅作用于document对象；ready事件在DOM完成初始化后触发，且只触发一次，因此很适合用来写其他的初始化代码；初始化代码必须放在document对象的ready事件中，保证DOM已经完成初始化；以下为各种简化写法；可以反复绑定事件处理函数，他们将按照顺序执行；
//写其他初始化代码
$(document).on('ready',function() {
$('#test-form').on('submit',function(){
alert('success！')；})})；
//简化写法
$(document).ready(function(){
$('#test-form').submit(function(){
alert('success!');})});
//再简化，这种写法最常见，表示的是document对象的ready事件处理函数
$(function(){
//inti
})
事件参数
有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息：
//获取当前鼠标的位置
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
取消绑定
off()方法用于取消jQuery对象绑定的事件处理函数；
off('click',function);移除指定的事件处理函数
off('click');一次性移除click事件的所有处理函数
off()无参数的时候，一次性移除已绑定的所有类型的事件处理函数。
事件触发条件
事件的触发总是由用户操作引发的，例如，在文本框中修改文本时，会触发change()事件，但当我们用JavaScript代码来修改文本框内容时是不会触发change()事件的；代码中，无参数调用change()时可以触发change事件。
浏览器的安全限制
在浏览器中，有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数。
动画
JavaScript实现动画效果可以通过设置在一定时间间隔内修改DOM节点的css样式，视觉上可以实现动画的效果。
但是JavaScript手动实现动画样式十分复杂，将代码封装起来实现复用会更困难。
jQuery实现动画效果非常容易，jQuery内置了几种动画样式：
show(),hide()方法无参数调用会显示和隐藏DOM元素，当传入时间参数，就变成了动画，时间参数以毫秒为单位，也可以以字符串为参数，如slow,fast。toggle()方法可以自动判断下一步隐藏还是显示，融合了上面的两种方法。
show(),hide()左上角收缩
slideUp(),slideDown()垂直方向拉开或者收缩，像拉窗帘一样，slideToggle()根据当前元素是否可见来决定拉开还是收缩；
fadeIn(),fadeOut()效果是淡入淡出，通过修改样式的opacity属性值来实现的，fadeToggle()根据当前元素是否可见来选择是淡入还是淡出；
自定义动画，可以使用animate()方法来实现任意动画效果，传入参数为DOM元素最终的CSS状态，时间间隔，jQuery将在时间间隔内不断地修改css样式以达到最终效果；animate()还可以传入一个函数参数，动画结束的时候，该函数将被调用，相当于回调函数参数。
动画可以串行实现，delay()方法实现暂停效果，（jQuery对象.delay(3000).show(3000).hide(3000)）；动画需要执行一段时间，只有执行完了后返回一个promise对象才能进行后续操作，因此简单的将动画操作封装到函数中是行不通的。
由于jQuery对象提供的动画方法是基于逐渐修改CSS的值实现的，而有些不是block属性DOM元素不存在这类属性，因此动画会对这类元素无效。
jQuery对象不提供修改background-color的方法，此时需要使用CSS3提供的transition实现动画效果。
AJAX（web数据交换方式）
用JavaScript写Ajax的问题在于需要针对不同的浏览器编写不同的代码，状态和错误处理写起来较为麻烦，用jQuery对象来处理Ajax不需要考虑浏览器差异，错误处理也会更为简单。
jQuery的全局对象（也就是$）绑定了ajax()函数，可以处理Ajax请求。ajax(url,settings)需要接受一个url和一个可选的setting对象，常用的选项如下：
async：是否异步执行Ajax请求，默认值为true，不要设置为false
method：发送的method，缺省为‘get’，可指定为put或者post
contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；
data：发送的数据，可以是字符串，数组或者对象；如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
header：发送的额外的HTTP头，必须是一个object
dataType：接收的数据格式，可以指定为’html’、‘xml’、‘json’、'text’等，缺省情况下根据响应的Content-Type猜测。
//发送一个get请求，返回一个json格式的数据
var jqxhr=$.ajax('/api/categories',{
dataType:'json';
});
//请求已发送
//用回调函数处理返回的数据和出错的响应
//jQuery的jqXHR对象类似一个promise对象，可以使用链式写法来处理各种回调
'use strict';
function ajaxLog(s) {
var txt = $('#test-response-text');
txt.val(txt.val() + '\n' + s);
}
$('#test-response-text').val('');
var jqxhr=$.ajax('/api/categories',{
dataType:'json';
}).done(function(data){
ajaxLog('success!data:'+JSON.stringify(data));
}).fail(function(xhr,status){
ajaxLog('出错了，错误代码：'+xhr.status+'错误原因：'+status);
}).always(function(){
ajaxLog('请求完成：无论成功失败均会提醒');
});
对于常用的Ajax操作，jQuery提供辅助方法。get请求最常见，所以jQuery提供了get方法，此时如果第二个参数是object，会将其编码变为query string后加入url后面
var ajxhr=$.get('/api/categories',{
name:'bob le',
check:1
});
//实际的URL
/api/categories?name=bob%20le&check=1
post和get类似，但是传入的第二个参数默认被序列化为application/x-www-form-urlencoded,作为post的body被发送:
var ajxhr=$.post('/api/categories',{
name:'bob le',
check:1
});
//实际构造的数据name=Bob%20Lee&check=1作为POST的body被发送
由于JSON越来越普遍，所以jQuery提供了getJSON()方法快速通过GET获取一个JSON对象：
var jqxhr=$.getJSON('/path/to/resourse',{
name:'bob lee',
check:1
}).done(function(data){
//data已经被解析为一个JSON对象了
});
jQuery的AJAX完全封装的是JavaScript的AJAX操作，所以它的安全限制和前面讲的用JavaScript写AJAX完全一样。如果需要使用JSONP，可以在ajax()中设置jsonp: ‘callback’，让jQuery实现JSONP跨域加载数据。
编写jQuery插件
实现代码复用，便于后期的代码维护
最终，我们得出编写一个jQuery插件的原则：
- 给
$.fn绑定函数，实现插件的代码逻辑； - 插件函数最后要return this;以支持链式调用；
- 插件函数要有默认值，绑定在
$.fn.<pluginName>.defaults上； - 用户在调用时可传入设定值以便覆盖默认值。
jQuery提供的辅助方法$.extend(target, obj1, obj2, ...)，它把多个object对象的属性合并到第一个target对象中，遇到同名属性，总是使用靠后的对象的值，也就是越往后优先级越高
jQuery的选择器支持filter()方法来过滤，我们可以借助这个方法来实现针对特定元素的扩展。
1628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
