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()括号里的元素)

本文出自:云库网 - jQuery过滤选择器之伪类选择器和内容选择器

posted @ 2015-10-12 13:43  云库与朝夕熊的故事  阅读(865)  评论(0编辑  收藏  举报

我的工作主场 - 云库网 | 我的个人独立博客 - 朝夕熊