下面要说的是过滤选择器,它主要是通过过滤规则来筛选出所需要的dom元素,过滤规则和CSS中伪类选择去语法相同,即选择器都是冒号(:)开头。按照不同的过滤规则,过滤选择器可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
1、基本过滤选择器
选取第一个元素
:first
单个元素
$("div:first")选取所有div元素中的第一个div元素
选取最后一个元素
:last
单个元素
$("div:last")选取所有div元素中的最后一个div元素
去除所有与给定选择器匹配的元素
:not(selector)
集合元素
$("input:not(.myClass)")选取class不是myClass的input元素
选取偶数元素
:even
集合元素
$("div:even")选取索引为偶数的div元素
选取奇数元素
:odd
集合元素
$("div:odd")选取索引为奇数的div元素
指定索引的元素
:eq(index)
单个元素
$("div:eq(3)")选取索引为3的div元素<索引是从0开始的>
大于指定索引的元素
:gt(index)
集合元素
$("input:gt(1)")选取索引大于1的input元素
小于指定索引的元素
:lt(index)
集合元素
$("input:lt(1)")选取索引小于1的input元素
获取标题元素
:header
集合元素
$(:header)选取网页中所有的<h1><h2><h3><h4>...
获取动态元素
:animated
集合元素
$("div:animated")选取正在执行动画的div元素
2、内容过滤选择器
文本包含
:contains(text)
集合元素
$("div:contains('我')")选取包含文本“我”div元素
空子元素(既没有子元素也没子文本元素)
:empty
集合元素
$("div:empty")选取不包含子元素<包括文本元素>的div空元素
包含指定元素
:has(selector)
集合元素
$("div:has('p')")选取div元素,要求符合包含p元素的条件
非空子元素
:parent
集合元素
$("div:parent")选取拥有子元素<包括文本元素>的div元素
PS:
如:has(selector)、contains(text)中内容可以包括引号("和')也可以不使用
3、可见性过滤选择器
选择不可见的元素
:hidden
集合元素
$(":hidden")选取所有不可见的元素,包括<input type = "hidden"/>、<div style = "display:none;">和<div style = "visibility:hidden;">
选取可见的元素
:visible
集合元素
$(div:visible)选取所有可见的div元素
4、属性过滤选择器
拥有指定属性
[attribute]
集合元素
$("div[id]")拥有id属性的div元素
拥有属性值为指定值的元素
[attribute=value]
集合元素
$("div[title=test]")选择属性title为“test”的div元素
属性值不为指定值的元素
[attribute!=value]
集合元素
$("div[title!=test]")选择属性title不为“test”的div元素
属性值以指定值开头的元素
[attribute^=value]
集合元素
$("div[title^=test]")选择属性title以“test”为开头的div元素
属性值以指定值结尾的元素
[attribute$=value]
集合元素
$("div[title$=test]")选择属性title以“test”为结尾的div元素
属性值中含有指定值的元素
[attribute*=value]
集合元素
$("div[title*=test]")选择属性title中包含“test”的div元素
属性多重限制
[selector1][selector2][selector3]...[selectorN]
集合元素
$("div[id][title$='test']")选取拥有id属性,并且title属性以“test”结尾的div元素
5、子元素过滤选择器
选取每个父类元素下的第index个子元素或者奇偶元素<index是从1算起的>
:nth-child
集合元素
$("div:nth-child(even)")选取div元素中索引为偶数的子元素
选取每个父元素的第一个子元素
:first-child
集合元素
$("ul li:first-chlid")选取每个ul中的第一个li元素<有质疑?待测试>
PS:li:first-child中间没有空格,所以first-child是用来描述li的,即第一个li子元素<2010.4.7-16.43修改>
选取每个父元素的最后一个子元素
:last-child
集合元素
同first-child
含有唯一的指定元素
:only-child
集合元素
$("ul li:only-child")在ul中选取是唯一子元素的li元素
6、表单对象属性过滤器
可用元素
:enabled
集合元素
$("#form1 :enabled")选取id为"form1"的表单内的所有可用元素
不可用元素
和可用相反
被选中元素<单选和复选>
:checked
集合
$("input:checked")选取所有被选中input元素
被选中选择项<下拉选框>
:selected
集合
$("select :selected")选取所有被选中的选项元素