jQuery概述
——edited by 李家优
原文地址：http://javascript.ruanyifeng.com/jquery/basic.html
jQuery是目前使用最广泛的JavaScript函数库。据统计，全世界57.5%的网站使用jQuery，在使用JavaScript函数库的网站中，93.0%使用jQuery。它已经成了开发者必须学会的技能。
jQuery的最大优势有两个。首先，它基本是一个DOM操作工具，可以使操作DOM对象变得异常容易。其次，它统一了不同浏览器的API接口，使得代码在所有现代浏览器均能运行，开发者不用担心浏览器之间的差异。
jQuery的加载
一般采用下面的写法，在网页中加载jQuery。
上面代码有两点需要注意。一是采用CDN加载。如果CDN加载失败，则退回到本地加载。二是采用协议无关的加载网址，同时支持http协议和https协议。
这段代码最好放到网页尾部。如果需要支持IE 6/7/8，就使用jQuery 1.x版，否则使用最新版。.
jQuery基础
jQuery对象
jQuery最重要的概念，就是jQuery对象。它是一个全局对象，可以简写为美元符号$。也就是说，jQuery和$两者是等价的。
在网页中加载jQuery函数库以后，就可以使用jQuery对象了。jQuery的全部方法，都定义在这个对象上面。
var listItems = jQuery('li');
// or
var listItems = $('li');
上面两行代码是等价的，表示选中网页中所有的li元素。
jQuery构造函数
jQuery对象本质上是一个构造函数，主要作用是返回jQuery对象的实例。比如，上面代码表面上是选中li元素，实际上是返回对应于li元素的jQuery实例。因为只有这样，才能在DOM对象上使用jQuery提供的各种方法。
$('body').nodeType
// undefined
$('body') instanceof jQuery
// true
上面代码表示，由于jQuery返回的不是DOM对象，所以没有DOM属性nodeType。它返回的是jQuery对象的实例。
（1）CSS选择器作为参数
jQuery构造函数的参数，主要是CSS选择器，就像上面的那个例子。下面是另外一些CSS选择器的例子。
$("*")
$("#lastname")
$(".intro")
$("h1,div,p")
$("p:last")
$("tr:even")
$("p:first-child")
$("p:nth-of-type(2)")
$("div + p")
$("div:has(p)")
$(":empty")
$("[title^='Tom']")
本书不讲解CSS选择器，请读者参考有关书籍和jQuery文档。
（2）DOM对象作为参数
jQuery构造函数的参数，还可以是DOM对象。它也会被转为jQuery对象的实例。
$(document.body) instanceof jQuery
// true
上面代码中，jQuery的参数不是CSS选择器，而是一个DOM对象，返回的依然是jQuery对象的实例。
如果有多个DOM元素要转为jQuery对象的实例，可以把DOM元素放在一个数组里，输入jQuery构造函数。
$([document.body, document.head])
（3）HTML代码作为参数
如果直接在jQuery构造函数中输入HTML代码，返回的也是jQuery实例。
$('test' )
上面代码从HTML代码生成了一个jQuery实例，它与从CSS选择器生成的jQuery实例完全一样。唯一的区别就是，它对应的DOM结构不属于当前文档。
上面代码也可以写成下面这样。
$( '' , {
html: 'test',
'class': 'greet'
});
上面代码中，由于class是javaScript的保留字，所以只能放在引号中。
（4）第二个参数
默认情况下，jQuery将文档的根元素（html）作为寻找匹配对象的起点。如果要指定某个网页元素（比如某个div元素）作为寻找的起点，可以将它放在jQuery函数的第二个参数。
$('li', someElement);
上面代码表示，只寻找属于someElement对象下属的li元素。someElement可以是jQuery对象的实例，也可以是DOM对象。
jQuery构造函数返回的结果集
jQuery的核心思想是“先选中某些网页元素，然后对其进行某种处理”（find something, do something），也就是说，先选择后处理，这是jQuery的基本操作模式。所以，绝大多数jQuery操作都是从选择器开始的，返回一个选中的结果集。
（1）length属性
jQuery对象返回的结果集是一个类似数组的对象，包含了所有被选中的网页元素。查看该对象的length属性，可以知道到底选中了多少个结果。
if ( $('li').length === 0 ) {
console.log('不含li元素');
}
上面代码表示，如果网页没有li元素，则返回对象的length属性等于0。这就是测试有没有选中的标准方法。
所以，如果想知道jQuery有没有选中相应的元素，不能写成下面这样。
if ($('div.foo')) { ... }
因为不管有没有选中，jQuery构造函数总是返回一个实例对象，而对象的布尔值永远是true。使用length属性才是判断有没有选中的正确方法。
if ($('div.foo').length) { ... }
（2）下标运算符
jQuery选择器返回的是一个类似数组的对象。但是，使用下标运算符取出的单个对象，并不是jQuery对象的实例，而是一个DOM对象。
$('li')[0] instanceof jQuery // false
$('li')[0] instanceof Element // true
上面代码表示，下标运算符取出的是Element节点的实例。所以，通常使用下标运算符将jQuery实例转回DOM对象。
（3）is方法
is方法返回一个布尔值，表示选中的结果是否符合某个条件。这个用来验证的条件，可以是CSS选择器，也可以是一个函数，或者DOM元素和jQuery实例。
$('li').is('li') // true
$('li').is($('.item'))
$('li').is(document.querySelector('li'))
$('li').is(function() {
return $("strong", this).length === 0;
});
（4）get方法
jQuery实例的get方法是下标运算符的另一种写法。
$('li').get(0) instanceof Element // true
（5）eq方法
如果想要在结果集取出一个jQuery对象的实例，不需要取出DOM对象，则使用eq方法，它的参数是实例在结果集中的位置（从0开始）。
$('li').eq(0) instanceof jQuery // true
由于eq方法返回的是jQuery的实例，所以可以在返回结果上使用jQuery实例对象的方法。
（6）each方法，map方法
这两个方法用于遍历结果集，对每一个成员进行某种操作。
each方法接受一个函数作为参数，依次处理集合中的每一个元素。
$('li').each(function( index, element) {
$(element).prepend( '' + index + ': ' );
});
// Hello
// World
// 变为
// 0: Hello
// 1: World
从上面代码可以看出，作为each方法参数的函数，本身有两个参数，第一个是当前元素在集合中的位置，第二个是当前元素对应的DOM对象。
map方法的用法与each方法完全一样，区别在于each方法没有返回值，只是对每一个元素执行某种操作，而map方法返回一个新的jQuery对象。
$("input").map(function (index, element){
return $(this).val();
})
.get()
.join(", ")
上面代码表示，将所有input元素依次取出值，然后通过get方法得到一个包含这些值的数组，最后通过数组的join方法返回一个逗号分割的字符串。
（8）内置循环
jQuery默认对当前结果集进行循环处理，所以如果直接使用jQuery内置的某种方法，each和map方法是不必要的。
$(".class").addClass("highlight");
上面代码会执行一个内部循环，对每一个选中的元素进行addClass操作。由于这个原因，对上面操作加上each方法是不必要的。
$(".class").each(function(index,element){
$(element).addClass("highlight");
});
// 或者
$(".class").each(function(){
$(this).addClass("highlight");
});
上面代码的each方法，都是没必要使用的。
由于内置循环的存在，从性能考虑，应该尽量减少不必要的操作步骤。
$(".class").css("color", "green").css("font-size", "16px");
// 应该写成
$(".class").css({
"color": "green",
"font-size": "16px"
});
链式操作
jQuery最方便的一点就是，它的大部分方法返回的都是jQuery对象，因此可以链式操作。也就是说，后一个方法可以紧跟着写在前一个方法后面。
$('li').click(function (){
$(this).addClass('clicked');
})
.find('span')
.attr( 'title', 'Hover over me' );
$(document).ready()
$(document).ready方法接受一个函数作为参数，将该参数作为document对象的DOMContentLoaded事件的回调函数。也就是说，当页面解析完成（即下载完