1. jQuery 介绍

1. 什么是 jQuery

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

2. 为什么要用 jQuery

DOM API：

• 难用
• 存在兼容性问题
• 功能太少，不能与时俱进

jQuery：

• 兼容性好
• API 友好
• 功能强大，与时俱进

3. 什么时候适合用 jQuery

• DOM 操作较多（事件监听）
• 简单的 AJAX
• 需要兼容多款浏览器

4. 什么时候不用 jQuery

• 页面交互极为简单
• 页面对流量有苛刻的要求
• 上级强制、团队已经有了 jQuery 的代替品

5. jQuery 做什么

• 选择网页元素
• 改变结果集
• 元素的操作：取值和赋值
• 元素的操作：移动
• 元素的操作：复制、删除和创建
• 工具方法
• 事件操作
• 特殊效果
• AJAX
• http://devdocs.io/jquery/（这个网站查阅 jQuery 的方法也比较方便）

6. jQuery版本问题

• 1.x 与 2.x 的不同：1.x 的代码会更老一些，它会兼容到 IE6、7；而 2.x 的版本更精简一些，把一些老的代码给忽略掉了，体积更小一些。

7. jQuery 的两种 API

jQuery 只有这两种写法。

// 一种是 $ + 点 + 一个方法
$.noConflict()
$.each()

// 一种是 $ + 括号 + 选择器
$('ul').addClass()
$('p').text('hi')

8. ready

$(callback)
window.onload 事件
document 的 DOMContentLoaded 事件
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )

2. 使用 jQuery 获取元素

我们可以通过 document.getElementById 等方法获取 DOM 对象，但是方法名称长，使用不方便，而且功能有限，不能像CSS选择器那样灵活。

jQuery 定义了一套选择器规则，和 CSS 选择器目的一样，都是为了选择出符合特定规则的元素。讲 jQuery 不得不提到其选择器，这是 jQuery 能够快速流行的非常重要的原因，为了方便使用者 jQuery 刻意和 CSS 选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器。

1. 选择器

就像复习 CSS 选择器

除了使用选择器，jQuery 还提供了一些方法帮助我们查找当前元素相关的元素：

• .eq(index), .get([index])
  对于一个特定结果集，我们想获取到指定 index 的 jQuery 对象，可以使用 eq方法：

$('div').eq(3); // 获取结果集中的第四个jQuery对象

我们可以通过类数组下标的获取方式或者 get 方法获取指定 index 的 DOM 对象，也就是我们说的 jQuery 对象转DOM对象：

$('div')[2];
$('div').eq(2);

get() 不写参数把所有对象转为DOM对象返回。

2. 兄弟元素获取

• .next([selector]), .prev([selector])
  next 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev 正好相反，获取元素之前的同辈元素：

$('.test').next();
$('.test').prev('li');

• .nextAll([selector]), .prevAll([selector])
  nextAll 获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll 与之相反，获取元素前面的同辈元素：

• .siblings([selectors])
  获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器：

$('li.third-item').siblings()

3. 兄弟元素获取

• .parent([selector])
  取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器：

$('li.item-a').parent()

• .parents([selector])
  获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数：

$('li.item-a').parents('div')

• .children([selector])
  获得匹配元素集合中每个元素的子元素，选择器选择性筛选：

$('ul.level-2').children()

• .find([selector])
  查找符合选择器的后代元素：

$('ul').find('li.current')

4. 筛选当前结果集

• .first()
  获取当前结果集中的第一个对象。

• . last()
  获取当前结果集的最后一个对象。

• .filter(selector), .filter(function(index))
  筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数：

$('li').filter(':even')

$('li').filter(function(index) {
  return index % 3 == 2;
})

• .not(selector), .not(function(index))
  从匹配的元素集合中移除指定的元素，和 filter 相反。

• .is(selector), is(function(index)), is(dom/jqObj)
  判断当前匹配的元素集合中的元素，是否为一个选择器，DOM 元素，或者 jQuery 对象，如果这些元素至少一个匹配给定的参数，那么返回 true：

    if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }

• .has(selector), .has(dom)
  筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素：

$('li').has('span')