jQuery 曾经是世界上使用最广泛的 JavaScript 库，最早发布于于2006年，时至今日仍有许多著名网站在使用它。在技术革新堪称日新月异的前端领域，它可以说是最长寿的库了。而它能够经久不衰的根源，就是它近乎完美的巧妙的设计思想。

一、选择/创建元素

jQuery 的基本用法，一句话概括就是“选择某个元素，然后对其进行操作”。

使用 jQuery 的第一步，就是用构造函数 jQuery() （也可以简写为$()，它们完全等价）选中特定的元素。

其接受的参数支持多种形式，可以是 CSS 选择器：

$(document) //选择整个文档对象
$('#xxx') //选择 id 为 xxx 的元素
$('div.xxx') // 选择 class 为 xxx 的div元素

可以是 jQuery 特定的形式：

$('a:first') //选择网页中第一个 a 元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') //选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(1)') // 选择所有的div元素，除了前两个
$('div:animated') // 选择当前处于动画状态的div元素

还可以是一段 HTML 结构，这样会创建一个新的元素：

$('<p>Hello</p>') //创建 p 元素，其内容为 Hello

二、jQuery 的链式操作

jQuery 的最大特点，在于其选中元素后，并不是返回该元素，而是返回一个对象，其中包含诸多操作该元素的方法，并且多数方法仍会返回一个 jQuery 实例对象。这就意味着，选中元素以后，可以对其进行一系列的操作，这些操作可以连接在一起，以链条的形式呈现。

如：

$('div').find('h2').eq(2).html('Hello').end()...;

其含义为：

$('div') //找到 div 元素
    .find('h2') //选择其中所有的 h2 元素
    .eq(2) //选择第3个 h2 元素
    .addClass('red'); //给它的 class 添加一个 red
    .end() //回到选中所有的 h2 元素
    ... //对所有 h2 进行后续操作

三、移动元素

jQuery 提供两种方式移动元素的位置，一种是直接移动目标元素，另一种是移动其他元素，使目标元素达到预期的位置。

比如，将一个 div 移动到 p 的后面。

第一种方法，直接将 div 移到 p 后：

$('div').insertAfter($('p'));

第二种方法，将 p 移到 div 前面：

$('p').after($('div'));

这两种方法，最后达成的效果是一样的。区别在于最后返回的对象不同，前者返回操作 div 的 jQuery 对象，而后者返回操作 p 的 jQuery 对象。

类似的方法，一共有四组：

.insertAfter()和.after() //插入到...后面和在后面插入...
.insertBefore()和.before() //插入到...前面和在前面插入...
.appendTo()和.append() //插入到...中和在自己内部插入...（从最后面插入）
.prependTo()和.prepend() //插入到...中和在自己内部插入...（从最前面插入）

四、读取/改写元素

jQuery 支持使用同一个方法，来完成取值和赋值的操作。是取值还是赋值，由参数来控制，不传参数则表示取值，传入参数则表示赋值。

常用的取值和赋值方法如下：

.html() //取出或设置html内容
.text() //取出或设置文本内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.height() //取出或设置某个元素的高度
.val() //取出某个表单元素的值

【注】：若选中的结果有多个元素，赋值时会对每个元素进行赋值，取值的时候则只会取其中第一个元素的值。但是.text()除外，它会取出所有元素的 text 内容。