jQuery 选择器

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. 选择器

基本选择器
$('*')	匹配页面所有元素
$('#id')	id选择器
$('.class')	类选择器
$('element')	标签选择器

组合/层次选择器
$('E,F')	多元素选择器，用 , 分隔，同时匹配元素 E 或元素 F
$('E F')	后代选择器，用空格分隔，匹配 E 元素所有的后代（不只是子元素、子元素向下递归）元素 F
$(E>F)	子元素选择器，用 > 分隔，匹配E元素的所有直接子元素
$('E+F')	直接相邻选择器，匹配E元素之后的相邻的同级元素F
$('E~F')	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
$('.class1.class2')	匹配类名中既包含 class1 又包含 class2 的元素

基本过滤选择器
$("E:first")	所有 E 中的第一个
$("E:last")	所有 E 中的最后一个
$("E:not(selector)")	按照 selector 过滤E
$("E:even")	所有E中 index 是偶数
$("E:odd")	所有E中 index 是奇数
$("E:eq(n)")	所有E中 index 为 n 的元素
$("E:gt(n)")	所有E中 index 大于 n 的元素
$("E:lt(n)")	所有E中 index 小于 n 的元素
$(":header")	选择 h1~h6 元素
$("div:animated")	选择正在执行动画效果的元素

内容过滤器
$('E:contains(value)')	内容中包含 value 值的元素
$('E:empty')	内容为空的元素
$('E:has(F)')	子元素中有 F 的元素，$('div:has(a)')：包含 a 标签的 div
$('E: parent')	父元素是E的元素，$('td: parent')：父元素是 td 的元素

可视化选择器
$('E:hidden')	所有被隐藏的 E
$('E:visible')	所有可见的 E

属性过滤选择器
$('E[attr]')	含有属性 attr 的 E
$('E[attr=value]')	属性 attr=value 的 E
$('E[attr !=value]')	属性 attr！=value 的 E
$('E[attr ^=value]')	属性 attr 以 value 开头的 E
$('E[attr $=value]')	属性 attr 以 value 结尾的 E
$('E[attr *=value]')	属性 attr 包含 value 的 E
$('E[attr][attr *=value]')	可以连用

子元素过滤器
$('E:nth-child(n)')	E 的第 n 个子节点
$('E:nth-child(3n+1)')	E 的 index 符合 3n+1 表达式的子节点
$('E:nth-child(even)')	E 的 index 为偶数的子节点
$('E:nth-child(odd)')	E 的 index 为奇数的子节点
$('E:first-child')	所有 E 的第一个子节点
$('E:last-child')	所有 E 的最后一个子节点
$('E:only-child')	只有唯一子节点的 E 的子节点

表单元素选择器
$('E:type')	特定类型的 input
$(':checked')	被选中的 checkbox 或 radio
$('option: selected')	被选中的 option

就像复习 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')