jQuery之过滤选择器

Posted 赵妹儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery之过滤选择器相关的知识,希望对你有一定的参考价值。

过滤选择器

  1.基本选择器

  2.内容选择器

  3.可见性选择器

  4.子元素过滤器

 过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似于CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持CSS3的

浏览器也能支持。和常规的选择器一样,jQuery为了更方便开发者使用,提供了很多独有的过滤器。

 

一、基本过滤器

  过滤器主要通过特定的过滤规则来筛选所需的DOM元素,和CSS中的伪类的语法类似:使用冒号(:)开头。

过滤器名 jQuery语法 说明 返回
:first  $(‘li :first‘) 选取第一个元素 单个元素
:last $(‘li :last‘) 选取最后一个元素 单个元素
:not(selecter) $(‘li :not(.red)‘) 选取class不是red的li元素 集合元素
:even $(‘li :even‘) 选择索引(0 开始)是偶数的所有元素 集合元素
:odd $(‘li :odd‘) 选择索引(0 开始)是奇数的所有元素 集合元素
:eq(index) $(‘li :eq(2)‘) 选择索引(0 开始)等于index的元素 单个元素
:gt(index) $(‘li :gt(2)‘) 选择索引(0 开始)大于index的元素 集合元素
:lt(index) $(‘li :lt(2)‘) 选择索引(0 开始)小于index的元素 集合元素
:header $(‘li :header‘) 选择标题元素,h1~h6 集合元素
:animated $(‘li :animated‘) 选择正在执行动画的元素 集合元素
:focus $(‘li :focus‘) 选择当前被焦点的元素 集合元素

  jQuery为最常用的过滤器提供了专用的方法,以达到提高性能和效率的作用:

  $(‘li‘).eq(2).css(‘background‘,‘#ccc‘);  //元素li的第三个元素,负数从后开始

  $(‘li‘).first().css(‘background‘,‘#ccc‘);  //元素li的第一个元素

  $(‘li‘).last().css(‘background‘,‘#ccc‘);  //元素li的最后一个元素

  $(‘li‘).not(.red).css(‘background‘,‘#ccc‘);  //元素li不含class为red的元素

 

  注意::first、:last和first()、last()这两组过滤器和方法在出现相同元素的时候,first会实现第一个父元素的第一个子元素,last会实现最后一个父元素的最后一个子元素,所以,如果需要明确是哪个父元素,需要指明:

  $(‘#box li:last‘).css(‘background‘,‘#ccc‘);  //#box元素的最后一个li

  //或

  $(‘#box li‘).last().css(‘background‘,‘#ccc‘)  //同上

  

以上是关于jQuery之过滤选择器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery之过滤选择器

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

jQuery之过滤选择器

深入学习 jQuery 选择器系列第三篇——过滤选择器之索引选择器 - 小火柴的蓝色理想 - 博客园