jQuery 选择器

使用jQuery获取元素

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

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

选择器

得益于和css一样的语法，开发者在众多js库中迅速青睐于jQuery

jQuery 选择器常见 api 范例

.eq

对于特定结果集，获取到指定index的jQuery对象，使用eq方法

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

也可以通过类数组下表的获取方式获取指定index的DOM对象

$('div')[3]  //同样可以选择到这个DOM对象

.next / .prev

next 取得匹配元素集合中相邻的后面同辈元素(只取后面相邻的一个)，prev 获取元素之前相邻的同辈元素(只取前面相邻的一个)

$('.child8').next()  //获取.child8之后的相邻元素，即获取到.child9的div
$('.child8').prev()  //获取.child8之前的相邻元素，即获取到.child7的div

.nextAll / .prevAll

nextAll 获取匹配元素集合中所有后面的同辈元素，prevAll 获取元素前面的所有同辈元素

$('.child8').nextAll()  //获取.child8之后的所有同辈元素
$('.child8').prevAll()  //获取.child8之前的所有同辈元素

siblings

siblings 获取匹配元素集合中元素的所有兄弟同辈元素

$('.little1').siblings()  //获取和 .little1的所有同辈元素

.parent / .parents

parent 获取匹配元素集合中元素的父元素，parents 则是获取匹配元素集合中元素的祖先元素

$('#child2').parent()  //获取#child2上面的父级元素.fahter
$('#child2').parents()  //获取#child2上面的所有祖先元素
$('#child2').parents('.grandfather')   //获取child2上面的所有祖先元素中的.grandfather

.children / .find

.children 获取匹配元素集合中的子元素，.find 查找符合选择器的后代元素

$('.father').children()  //获取.father下面的所有子元素
$('.father').children('#child2')  //获取.father下面的具体子元素
$('.father').find('#child2')  //获取.father下面的符合后代

$('.father').children('#child2') === $('.father').find('#child2')  //看上去效果一样，实际他们的值不一样
//false

$('.father').children('#child2').is($('.father').find('#child2'))  //但是用.is()去判断，他们却是同一个对象  
//true

.filter

.filter 筛选当前结果中符合条件的对象，参数可以试一个选择或者一个函数

$('li').filter(':even')  //筛选出偶数位的li标签

.has

.has 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$('li').has('span')  //筛选出li标签下拥有span的标签的后代

.is

.is 判断当前匹配的元素集合中，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，则返回true

$('.ok').is('.ok')  //true
$('.ok').is(document.querySelector('.ok'))  //true

//其他示例
if ($target.is('li')){
  $target.css('background','red')
}

以上 api 示例的HTML

<!-- .eq -->
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<br>

<!-- .next .prev -->
<!-- .nextAll .prevAll -->
<!-- siblings -->
<div class="child6">6</div>
<div class="child7">7</div>
<div class="child8">8</div>
<div class="child9">9</div>
<div class="child10">10
  <div class="little1">10-1</div>
  <div class="little2">10-2</div>
  <div class="little3">10-3</div>
</div>
<br>

<!-- .parent .parents -->
<!-- .children .find -->
<div class="grandfather">grandfather
  <div class="father">father
    <div id="child1">child1</div>
    <div id="child2">child2</div>
    <div id="child3">child3</div>
  </div>
</div>
<br>

<!-- .filter -->
<!-- .has -->
<li>1</li>
<li>2</li>
<li>3</li>
<li><span>4</4span></li>
<li>5</li>
<br>

<!-- .is -->
<div class="ok">ok</div>
<script src="jquery-3.3.1.js"></script>

使用 jQuery 实现 Tab 效果

demo 效果
README说明