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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-3.3.1.js"></script>

作者：evenyao
链接：https://www.jianshu.com/p/9a69147027da