jQuery选择器

使用jQuery获取元素

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

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

选择器

简直就是复习CSS选择器有木有，正是得益于此，开发者在众多js库中迅速青睐于jQuery，看个图方便记忆

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

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

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

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

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

兄弟元素获取

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

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

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

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

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

父子元素获取

• .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');

筛选当前结果集

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

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

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

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