本篇介绍jQuery的选择器,jQuery选择器按照功能上分为"选择"和"过滤",并且是配合使用的.过滤的主要作用是从前面选定的选择器中选择的内容重进行筛选.
下面我们进入到选择器大全.
基础选择器
选择器说明例子#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》
转载于:https://www.cnblogs.com/oneword/archive/2010/11/15/1877355.html
相关资源：数据结构—成绩单生成器
