jQuery
jQuery是JavaScript世界中使用最广泛的一个库。
jQuery这么流行，肯定是因为它解决了一些很重要的问题。实际上，jQuery能帮我们干这些事情：
- 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
- 简洁的操作DOM的方法：写
$('#test')肯定比document.getElementById('test')来得简洁； - 轻松实现动画、修改CSS等各种操作。
jQuery的理念“Write Less, Do More“，写更少的代码，完成更多的工作！
jQuery有很多版本。但2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。可以从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。
使用jQuery
使用jQuery只需要在页面的引入jQuery文件即可：
...
...
如果网站本身已经引用了jQuery，所以你可以直接使用：
'use strict';
console/log('jQuery版本：' + $.fn.jquery); //查看当前jQuery版本
$符号
$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名：
$window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'
$本质上就是一个函数，但是函数也是对象，于是$除了可以直接调用外，也可以有很多其他属性。
注意，你看到的$函数名可能不是jQuery(selector, context)，因为很多JavaScript压缩工具可以对函数名和参数改名，所以压缩过的jQuery源码$函数可能变成a(b, c)。
绝大多数时候，我们都直接用$（因为写起来更简单嘛）。但是，如果$这个变量不幸地被占用了，而且还不能改，那我们就只能让jQuery把$变量交出来，然后就只能使用jQuery这个变量：
$; //jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)
这种黑魔法的原理是jQuery在占用$之前，先在内部保存了原来的$,调用jQuery.noConflict()时会把原来保存的变量还原。
选择器
选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')。
为什么jQuery要发明选择器？回顾一下DOM操作中我们经常使用的代码：
// 按ID查找：
var a = document.getElementById('dom-id');
这些代码实在太繁琐了，很多时候，需要递归查找所有子节点。
jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。
按ID查找
如果某个DOM节点有id属性，利用jQuery查找如下：
// 查找:
var div = $('#abc');
注意，#abc以#开头。返回的对象是jQuery对象。
什么是jQuery对象？jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。
以上面的查找为例，如果id为abc的存在，返回的jQuery对象如下：
[...]
如果id为abc的不存在，返回的jQuery对象如下：
[]
总之jQuery的选择器不会返回undefined或者null，这样的好处是你不必在下一行判断if (div === undefined)。
jQuery对象和DOM对象之间可以互相转化：
var div = $('#abc'); //jQuery对象
var divDom = div.get(0); //假设存在div，获取第一个DOM元素
var another = $(divDom); //重新把DOM包装成jQuery对象
通常情况下你不需要获取DOM对象，直接使用jQuery对象更加方便。如果你拿到了一个DOM对象，那可以简单地调用$(aDomObject)把它变成jQuery对象，这样就可以方便地使用jQuery的API了。
按tag查找
按tag查找只需要写上tag名称就可以了：
var ps = $('p'); // 返回所有节点
ps.length; // 数一数页面有多少个
节点
按class查找
按class查找注意在class名称前加一个.：
var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// ...
// ...
通常很多节点有多个class，我们可以查找同时包含red和green的节点：
var a = $('.red.green'); // 注意没有空格！
// 符合条件的节点：
// ...
// ...
按属性查找
一个DOM节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找：
var email = $('[name=email]'); // 找出
var passwordInput = $('[type=password]'); // 找出
var a = $('[items="A B"]'); // 找出
当属性的值包含空格等特殊字符时，需要用双引号括起来。
按属性查找还可以使用前缀查找或者后缀查找：
var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
这个方法尤其适合通过class属性查找，且不受class包含多个名称的影响：
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"
组合查找
组合查找就是把上述简单选择器组合起来使用。如果我们查找$('[name=email]')，很可能把表单外的也找出来，但我们只希望查找var emailInput = $('input[name=email]'); // 不会找出
同样的，根据tag和class来组合查找也很常见：
var tr = $('tr.red'); // 找出...
多项选择器
多项选择器就是把多个选择器用,组合起来一块选：
$('p,div'); // 把和
都选出来
$('p.red,p.green'); // 把和
都选出来
要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。例如，$('p.red,p.green')选择两次。
层级选择器
除了基本的选择器外，jQuery的层级选择器更加灵活，也更强大。
因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择。
层级选择器（Descendant Selector）
如果两个DOM元素具有层级关系，就可以用$('ancestor descendant')来选择，层级之间用空格隔开。例如：
- JavaScript
- Python
- Lua
要选出JavaScript，可以用层级选择器：
$('ul.lang li.lang-javascript'); // [JavaScript ]
$('div.testing li.lang-javascript');
//[JavaScript ]
这种层级选择器相比单个的选择器好处在于，它缩小了选择范围，因为首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素。
例如：
$('form[name=upload] input');
就把选择范围限定在name属性为upload的表单里。如果页面有很多表单，其他表单的
多层选择也是允许的：
$('form.test p input'); // 在form表单选择被包含的
子选择器（Child Selector）
子选择器$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是
$('ul.lang>li.lang-javascript');
//可以选出[JavaScript ]
$('div.testing>li.lang-javascript'); // [], 无法选出，因为和不构成父子关系
过滤器（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：可以选择
*/
var
input = $('#test-input'),
select = $('#test-select'),
textarea = $('#test-textarea');
input.val(); // 'test'
input.val('[email protected]'); // 文本框的内容已变为[email protected]
select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai
textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'
可见，一个val()就统一了各种输入框的取值和赋值的问题。
修改DOM结构
直接使用浏览器提供的API对DOM结构进行修改，不但代码复杂，而且要针对浏览器写不同的代码。
有了jQuery，我们就专注于操作jQuery对象本身，底层的DOM操作由jQuery完成就可以了，这样一来，修改DOM也大大简化了。
添加DOM
要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法，例如：
- JavaScript
- Python
- Swift
如何向列表新增一个语言？首先要拿到
var ul = $('#test-div>ul');
然后，调用append()传入HTML片段：
ul.append('- Haskell
');
除了接受字符串，append()还可以传入原始的DOM对象，jQuery对象和函数对象：
// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = 'Pascal';
// 添加DOM对象:
ul.append(ps);
// 添加jQuery对象:
ul.append($('#scheme'));
// 添加函数对象:
ul.append(function (index, html) {
return '- Language - ' + index + '
';
});
传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的append()可能作用于一组DOM节点，只有传入函数才能针对每个DOM生成不同的子节点。
append()把DOM添加到最后，prepend()则把DOM添加到最前。
另外注意，如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。
如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然后用after()方法：
var js = $('#test-div>ul>li:first-child');
js.after('- Lua
');
也就是说，同级节点可以用after()或者before()方法。
删除节点
要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点，实际上可以一次删除多个DOM节点：
var li = $('#test-div>ul>li');
li.remove(); // 所有- 全被删除
练习
修改DOM结构
阅读: 31717
直接使用浏览器提供的API对DOM结构进行修改，不但代码复杂，而且要针对浏览器写不同的代码。
有了jQuery，我们就专注于操作jQuery对象本身，底层的DOM操作由jQuery完成就可以了，这样一来，修改DOM也大大简化了。
添加DOM
要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法，例如：
- JavaScript
- Python
- Swift
如何向列表新增一个语言？首先要拿到
var ul = $('#test-div>ul');
然后，调用append()传入HTML片段：
ul.append('- Haskell
');
除了接受字符串，append()还可以传入原始的DOM对象，jQuery对象和函数对象：
// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = 'Pascal';
// 添加DOM对象:
ul.append(ps);
// 添加jQuery对象:
ul.append($('#scheme'));
// 添加函数对象:
ul.append(function (index, html) {
return '- Language - ' + index + '
';
});
传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的append()可能作用于一组DOM节点，只有传入函数才能针对每个DOM生成不同的子节点。
append()把DOM添加到最后，prepend()则把DOM添加到最前。
另外注意，如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。
如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然后用after()方法：
var js = $('#test-div>ul>li:first-child');
js.after('- Lua
');
也就是说，同级节点可以用after()或者before()方法。
删除节点
要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点，实际上可以一次删除多个DOM节点：
var li = $('#test-div>ul>li');
li.remove(); // 所有- 全被删除
练习
除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：
- JavaScript
- Python
- Swift
//答案1
var ul = $('#test-div>ul');
var lan = ['Pascal', 'Lua', 'Ruby'];
//获取原来的内容
var n = ul.find('span').map(function () {
return $(this).text(); //$(this)转成jQuery对象
}).get();
//把原来的内容和新内容结合起来，然后排序
lan = lan.concat(n).sort();
//加入html标签，转化成字符串
var strlan = lan.map(function (a) {
return '- ' + a + '
';
}).join('');
//更改ul的结构
ul.html(strlan);
//答案2
var ul = $('#test-div>ul');
var arr = ['Pascal', 'Lua', 'Ruby'];
ul.find('span').map(function (item) {
arr.push($(this).text());
});
arr.sort();
ul.find('li').remove(); //一开始写成ul.remove()，结果无法append，没有任何显示，因为remove把也删了导致添加了- 无法显示
arr.map(function (e) {
ul.append('
- ' + e + '
');
});
事件
因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。
浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。
由于不同的浏览器绑定事件的代码都不太一样，所以用jQuery来写代码，就屏蔽了不同浏览器的差异，我们总是编写相同的代码。
举个例子，假设要在用户点击了超链接时弹出提示框，我们用jQuery这样绑定一个click事件：
/* HTML:
*
* 点我试试
*
*/
//获取超链接的jQuery对象
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。
另一种更简化的写法是直接调用click()方法：
a.click(function () {
alert('Hello!');
});
两者完全等价。我们通常用后面的写法。
jQuery能够绑定的事件主要包括：
鼠标事件
click：鼠标单击时触发；
dbclick：鼠标双击时触发
mouseenter：鼠标进入时触发
mouseleave：鼠标移出时触发
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是