jQuery过滤选择器之伪类选择器和内容选择器

jQuery给我们提供了很多简易用的方法,jQuery过滤选择器是其中一种。过滤器主要通过特定的过滤规则来筛选所需DOM元素,使用冒号(:)开关。

一、基本过滤器

:first
选取第一个元素(单个元素)
$(‘li:first‘)

:last
选取最后一个元素(单个元素)
$(‘li:last‘)

:not(selector)
等到class不是blue的元素
$(‘li:not(.blue)‘)  选取class不是blue的元素

:even
选择索引(0开始)是偶数的所有元素(集合元素)
$(‘li:even‘)

:odd
选择索引(0开始)是奇数的所有元素(集合元素)
$(‘li:odd‘)

:eq(index)
选择索引(0开始)等于index的元素(单个元素)
$(‘li:eq(3)‘)

:gt(index)
选择索引(0开始)大于index的元素(集合元素)
$(‘li:gt(3)‘)

:lt(index)
选择索引(0开始)小于index的元素(集合元素)
$(‘li:lt(3)‘)

:header
选择标题元素,h1~h6(集合元素)
$(‘:header‘) 选取页面所有的标题元素
$(‘class1 :header‘) 选取页面中所有class为class1的元素下的标题元素

:focus
选择当前被焦点的元素(集合元素)
$(‘:focus‘)

jQuery也为最常的过滤器提供了专门的方法,以达到提高性能和效率的作用
.eq(index)
获取指定index的元素

.first()
同:first伪类选择器
$(‘li‘).first()

.last()
同:last伪类选择器
$(‘li‘).last()

.not(‘.class‘)
同:not伪类选择器
选取不含指定.class的元素
$(‘li‘).not()

二、内容选择器

:contains(text)
选取含有指定文本的元素(元素集合)
如$(‘contains("jquery")‘)

:empty
选取 不包含子元素或空文本的元素(元素集合)
$(‘:empty‘)

:has
选取含有指定class的子元素的父元素(元素集合,返回的是指定class的子元素的父元素,也就是你进行操作的元素)
$(‘:has(.blue)‘)

:parent
选取含有子元素或文本的元素(元素集合),与:empty相反
$(‘:parent‘)
在jQuery中提供了一个方法名和:parent类似的方法parent(),但是这个方法不是选取含有子元素或者文本的元素,而是获取当前元素的父元素,把回的是元素集合。
方法有三个:
.parent()
选择当前元素的父元素
.parents()
选取当前元素的父元素及祖先元素
.parentsUntil()
选取当前元素遇到指定父元素时停止(不包括.parentsUntil()括号里的元素)

本文出自:http://yunkus.com/article/jquery/38.html

时间: 2024-10-06 22:40:36

jQuery过滤选择器之伪类选择器和内容选择器的相关文章

深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的jQuery>一书中,nth-of-type()选择器参照CSS中的nth-of-type选择器,于1.9版本新增,本文将详细介绍该内容 通用形式 :nth-of-type() 个人认为,:nth-of-type()选择器不应该归类于子元素选择器,也不完全等同索引选择器,因为其索引是指特定元素的索引,但

css3系列选择器之伪类选择器

Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n)   这一行的选择器,都会考虑其他元素的的影响. E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n)   这一行的选择器

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

× 目录 [1]contains [2]empty [3]parent[4]has[5]not 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上 :contains(text) :contains(text)选择器选择含有文本内容为'text'的元素,返回集合元素 //返回所有文本内容包含'test'的元素 $(':contains("test")') //返回所有文本内容包含'test'的span元素 $('span:contai

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

× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容 简单属性选择器 [attribute] [attribute]选择器选择拥有该属性的元素,返回集合元素 //选择拥有title属性的所有元素 $('[title]') //选择拥有title属性的所有span元素 $('span[title]') //

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

× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当前获得焦点的元素 <div> <button>btn1</button> <button>btn2</button> <button>btn3</button> </div> <script> docu

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

博客地址:   http://www.cnblogs.com/xiaohuochai/p/5807292.html#3559878 写的很细致的博文, 手动收藏+转发.

CSS/JQuery元素选择器之&amp;&amp;和||,选择器的逻辑操作

使用CSS或JQuery选中元素的时候,很多时候我们需要对条件进行&&或者||操作. JQuery或者CSS中的||操作是很常用的,也很简单,就是通过逗号来分隔的. selector1,selector2,selectorN 比如我们想选中div或者span,那么可以通过$("div,span")来选中满足条件的元素. CSS或JQuery中的&&,我所见过的大部分都是用class进行的,不知道是不是只有这种方式. .className1.classNa

CSS/JQuery元素选择器之&amp;amp;&amp;amp;和||,选择器的逻辑操作

使用CSS或JQuery选中元素的时候.非常多时候我们须要对条件进行&&或者||操作. JQuery或者CSS中的||操作是非经常常使用的.也非常easy,就是通过逗号来分隔的. selector1,selector2,selectorN 比方我们想选中div或者span,那么能够通过$("div,span")来选中满足条件的元素. CSS或JQuery中的&&.我所见过的大部分都是用class进行的,不知道是不是仅仅有这样的方式. .className

jquery属性选择器之 attr

在温习jquery手册的时候,注意到这个,坐下记录. attr(name|properties|key,value|fn) 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配的元素的一个或多个属性. 在jquery1.6中,当属性没有被设置时,attr()方法将返回undefined. 若要检索和修改DOM属性,比如元素的checked,selected或disabled状态,请使用prop()方法. 参数name 描述: 返回文档中所有图像的src属性值. jQuery 代码: $