基础选择器

选择器说明例子
#id

根据元素id选择
$("#btn_find")
element

根据元素的名称进行选择
$("input")
.class

根据元素的css类进行选择
$(".btn")
*

选择所有元素
$("*")
s1,s2,sn

选中符合s1,s2,sn选择器中任何一个选择器的元素
$("div,.result")

层次选择器

选择器说明例子
ancestor descendant

选择符合ancestor选择器下的所有符合descendant选择器的元素
//选择div下所有的input元素

$("div input")
parent>child

选择符合parent选择器下的直接子节点中符合child选择器的元素
//选择div下直接子元素中所有的input元素

$("div>input")
prev+next

选择紧跟在符合prev选择器的元素后面的符合next选择器的元素
//选择紧跟div元素后的p元素,即使div后有多个p,也只要第一个p

$("div+p")
prev~siblings

选择符合prev选择器的元素后面的根据siblings选择器过滤的元素
//选择div元素后的所有的p元素

$("div~p")

基本过滤器

选择器说明例子
:first

匹配元素集中的第一个元素
$("tr:first")
:last

匹配元素集中的最后一个元素
$("tr:last")
:even

匹配元素集中索引值为偶数的元素
$("tr:even")
:odd

匹配元素集中索引值为奇数的元素
$("tr:odd")
:eq(index)

匹配元素集中索引值为index的元素
$("tr:eq(1)")
:gt(index)

匹配元素集中索引大于index的元素
$("tr:gt(1)")
:lt(index)

匹配元素集中索引小于index的元素
$("tr:lt(1)")
:header

选择h1,h2,h3等header元素
$("div>:header")
:animated

匹配正在执行动画效果的元素
$("div:animated")
:not(selector)

匹配元素中不符合selector选择器的元素
//选择div下的子元素中不是div的元素

$("div>:not(div)")

注意:

索引值均从0开始计算.

内容过滤器

选择器说明例子
:contains(text)

包含给定文本的元素
$("td:contains(张三)").css("color","red");
:empty

不包含子元素或文本的空元素
$("td:empty").html("red");
:has(selector)

匹配所有包含了匹配了selector选择器元素的元素
$("td:has(input)").css("background-color","red");
:parent

匹配包含了子元素或文本的元素
//选择包含子元素的td

$("td:parent").css("background-color","red");

可见性过滤器

选择器

说明

例子

:hidden

匹配所有不可见的元素

<div>

    <span style="visibility:hidden">1</span>

    <span style="visibility:hidden">2</span>

    <span style="visibility:hidden">3</span>

    <span style="visibility:hidden">4</span>

    <span>5</span>

</div>

<script type="text/javascript">

    //获取span元素集中可见的span

    $("span:visible")

    //获取span元素集中不可见的span

    $("span:hidden");

</script>

:visible

匹配所有可见的元素

属性过滤器

选择器说明例子
[attribute]

包含给定属性的元素
//选择div中包含title属性的元素

$("div[title]")
[attribute=value]

包含指定属性,并且属性值是value的元素
//选择div中title属性为div的元素

$("div[title=div]")
[attribute!=value]

包含指定属性,并且属性值不是value的元素
//选择div中title属性不为div的元素
$("div[title!=div]")
[attribute^=value]

包含指定属性,并且属性值以value开头的元素
//选择div中title属性值以another开头的元素

$("div[title^=another]")
[attribute$=value]

包含指定属性,并且属性值以value结尾的元素
//选择div中title属性值以division结尾的元素

$("div[title$=division]")
[attribute*=value]

包含指定属性,并且属性值包含value的元素
//选择div中title属性值中包含div的元素

$("div[title*=div]")
[attr1][attr2][attrN]

复合属性选择器
//选择div中title属性值中包含div并且cus属性等于customer的元素

$("div[title*=div][cus=customer]")

子元素过滤器

选择器说明例子
:nth-child(
index/even/
odd/equation
)

匹配其父元素下的第N个子或奇偶元素
//注意:eq()选择器索引从0开始,而nth-child索引值从1开始

//选择select元素下的option元素集中的第1个

$("select option:nth-child(1)"));

//选择select元素下的奇数个子元素

$("select option:nth-child(odd)");

//选择select元素下的偶数个子元素

$("select option:nth-child(even)")

//选择select元a素下的option元素集中的第2n+1个

$("select option:nth-child(2n+1)")
:first-child

匹配第一个子元素
//选择div下的第一个子元素

$("div>*:first-child")
:last-child

匹配最后一个子元素
//选择div下的最后一个子元素

$("div>*:last-child")
:only-child

如果某个元素是父元素中唯一的子元素,那么将匹配该子元素
//选择div下唯一的一个子元素

$("div>span:only-child")

表单选择器

选择器说明例子
:input

匹配所有的input,textarea,select,button元素
$(":input")
:text

匹配所有的文本框
$(":text")
:password

匹配所有的密码框
$(":password")
:radio

匹配所有的单选按钮
$(":radio")
:checkbox

匹配所有的复选框
$(":checkbox")
:submit

匹配所有的提交按钮
$(":submit")
:image

匹配所有的图像域
$(":image")
:reset

匹配所有的重置按钮
$(":reset")
:button

匹配所有的按钮
$(":button")
:file

匹配所有的文件域
$(":file")

表单过滤器

选择器说明例子
:enabled

匹配所有的可用的元素
$("input:enabled")
:disabled

匹配所有不可用的元素
$("input:disabled")
:checked

匹配所有被选中的元素(radio,checkbox中被选中的)
$("input:checked")
:selected

匹配所有被选中的option元素
$("option:selected")

--选自《从零开始学习jQuery》

巴特西

jQuery选择器全解

基础选择器

层次选择器

基本过滤器

内容过滤器

可见性过滤器

属性过滤器

子元素过滤器

表单选择器

表单过滤器

最新文章

热门文章