jQuery 是目前使用最广泛的 JavaScript 工具库，高效、精简、功能丰富且兼容众多浏览器。它让 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加的简单。
一、jQuery 如何获取元素
1. 选择网页元素
jQuery 的基本设计思想，也是区别于其他 JS 库的根本特点，就是选择某个网页元素，然后对其进行某种操作。
使用 jQuery 的第一步，往往就是将一个选择表达式，放进构造函数 jQuery()，然后得到被选中的元素。jQuery()简写成$()。
需要注意的是，$()这个函数并不是直接返回对应的元素，而是返回一个可以对元素进行操作的对象，这个对象是由 jQuery 构造出来的。
$() 中可以放入的选择表达式可以是 CSS 选择器：
$(document) // 选择整个文档对象
$('#myId') // 选择 ID 为 myId 的元素
$('.myClass') // 选择 class 为 myClass 的元素
$('input[name=first]') // 选择 name 属性等于 first 的 input 元素
也可以是 jQuery 特有的表达式：
$('a:first') // 选择网页中第一个 a 元素
$('tr:odd') // 选择表格的奇数行
$('#myForm:input') // 选择表单中的 input 元素
$('div:visible') // 选择可见的 div 元素
$('div:gt(2)') // 选择所有的 div 元素，除了前三个
$('div:animated') // 选择当前处于动画状态的 div 元素
2. 筛选结果集
通过 jQuery 提供的强大的过滤器，对$()得到的结果集进行筛选，缩小选择结果：
$('div').has('p') // 选择包含 p 元素的 div 元素
$('div').not('.myClass') // 选择 class 不等于 myClass 的 div 元素
$('div').filter('.myClass') // 选择 class 等于 myClass 的 div 元素
$('div').first() // 选择第 1 个 div 元素
$('div').eq(5) // 选择第 6 个 div 元素
或者基于$()得到的结果集，移动到它附近的相关元素：
$('div').next('p') // 选择 div 后面的第一个 p 元素
$('div').parent() // 选择 div 的父元素
$('div').children() // 选择 div 的所有子元素
$('div').siblings() // 选择 div 的所有同级元素
二、jQuery 的链式操作
链式操作是 jQuery 最令人称道的特点：当我们最终选中网页元素以后，可以对它进行一系列的连续操作，像链条一样。
$('div').find('h3').eq(2).html('hello');
分解开来看，就是：
$('div') // 找到 div 元素
.find('h3') // 选择其中的 h3 元素
.eq(2) // 选择第 3 个 h3 元素
.html('hello'); // 将它的内容改为 hello
能执行链式操作的原理，就是在于每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同的操作可以连在一起。
那如果上面的代码中，我想接着操作，修改第 1 个 h3 元素的内容，就可以用.end()回退一步，回到.find()这一步：
$('div')
.find('h3') // <-- ①
.eq(2) // <-- ②
.html('hello')
.end() // 退回到 ① 这一步
.eq(0) // 选中第 1 个 h3 元素
.html('world'); // 将它的内容改为 world
三、jQuery 如何创建、复制、删除元素
1. 创建新元素
把新元素直接传入 jQuery 的构造函数，也就是$()中，就可以创建新元素了：
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
2. 复制元素
复制元素使用.clone()。
3. 删除元素
删除元素使用.remove()和.detach()，前者不保留被删除元素的事件，而后者保留，有利于重新插入文档时使用。
清空元素内容（但是不删除该元素）使用.empty()。
四、jQuery 如何移动元素
jQuery 提供两组方法来移动网页中的元素。一种是直接移动该元素，另一种是通过移动其他元素，来让我们的目标元素到达我们想要的位置。两种方法返回的元素是不一样的。
假定我们选中了一个 div 元素，想要把它移动到 p 元素的后面。
方法一，使用.insertAfter()：
$('div').insertAfter($('p')); // 直接移动 div 元素，到 p 元素后面，返回的是 div 元素
方法二，使用.after()：
$('p').after($('div')); // 把 p 元素放到 div 元素前面，返回的是 p 元素
jQuery 提供了四对这种模式的操作方法：
- 在现存元素的外部，从后面插入元素：
.insertAfter(),.after() - 在现存元素的外部，从前面插入元素：
.insertBefore(),.before() - 在现存元素的内部，从后面插入元素：
.appendTo(),.append() - 在现存元素的内部，从前面插入元素：
.prependTo(),.prepend()
五、jQuery 如何修改元素的属性
操作网页元素，最常见的需求就是对它们进行取值，或者赋值。
jQuery 使用同一个函数，来完成取值（getter）和赋值（setter），由函数的参数来决定到底是取值还是赋值。
$('h1').html(); // html() 没有参数，表示取出 h1 的值
$('h1').html('hello'); // html() 有参数hello，表示对 h1 进行赋值
常见的取值和赋值函数如下：
- 取出或设置 html 内容：
.html() - 取出或设置 text 内容：
.text() - 取出或设置某个属性的值：
.attr() - 取出或设置某个元素的宽度：
.width() - 取出或设置某个元素的高度：
.height() - 取出某个表单元素的值：
.val()
需要注意的是，如果结果集包含多个元素，取值时只取出第一个元素的值（.text()是例外，它取出所有元素的 text 内容）；赋值时会对结果集中的所有元素进行赋值。
参考链接
- 阮一峰的jQuery设计思想
