jQuery中的选择器非常多,对于初学者来说,并没有必要全部掌握,只记住常用的选择器即可。当需要使用其他不熟悉的选择器时,可以通过查阅文档查看具体的解释。为了方便读者查阅,接下来简单介绍一些其他在发中可能会用到的选择器。
1.获取同级元素
选择器
功能描述
示例
prev+next
获取当前元素紧邻的下一个同级元素
$("div+.title")获取紧邻<div>的下一个class名为title的兄弟节
prev~siblings
获取当前元素后的所有同级元素
$(".bar~li")获取class名为bar的元素后的所有同级元素节<li>
2.筛选元素
在jQuery中还有一些选择器可以筛选元素,如表2所示。
表2筛选元素
选择器
功能描述
示例
:gt(index)
获取索引于index的元素
$("li:gt(3)")获取索引于3的所有<li>元素
:lt(index)
获取索引小于index的元素
$("li:lt(3)")获取索引小于3的所有<li>元素
:not(seletor)
获取除指定的选择器外的其他元素
$("li:not(li:eq(3))")获取除索引为3外的所有<li>元素
:focus
匹配当前获取焦的元素
$("input:focus")匹配当前获取焦的<input>元素
:animated
匹配所有正在执行动画的元素
$("div:not(:animated)")匹配当前没有执行动画的<div>元素
:target
选择由文档URI的格式化识别码表示的目标元素
若URI为example./#foo,则$("div:target")将获取<divid="foo">元素
:contains(text)
获取内容包含text文本的元素
$("li:contains('js')")获取内容中含“js”的<li>元素
:empty
获取内容为空的元素
$("li:empty")获取内容为空的<li>元素
:has(selector)
获取内容包含指定选择器的元素
$("li:has('a')")获取内容中含<a>元素的所有<li>元素
:parent
选取带有子元素或包含文本的元素
$("li:parent")选取带有子元素或包含文本的li元素
:hien
获取所有隐藏元素
$("li:hien")获取所有隐藏的<li>元素
:visible
获取所有可见元素
$("li:visible")获取所有可见的<li>元素
3.属性选择器
jQuery中还了根据元素的属性获取指定元素的。例如,含有class属性值为current的<div>元素。常用的属性选择器如表3所示。
表3属性选择器。
选择器
功能描述
示例
[attr]
获取具有指定属性的元素
$("div[class]")获取含有class属性的所有<div>元素
[attr=value]
获取属性值等于value的元素
$("div[class='current']")获取class等于current的所有<div>元素
[attr!=value]
获取属性值不等于value的元素
$("div[class!='current']")获取class不等于current的所有<div>元素
[attr^=value]
获取属性值以value始的元素
$("div[class^='box']")获取class属性值以box始的所有<div>元素
[attr$=value]
获取属性值以value结尾的元素
$("div[class$='er']")获取class属性值以er结尾的所有<div>元素
[attr*=value]
获取属性值包含value的元素
$("div[class*='-']")获取class属性值中含有“-”符号的所有<div>元素
[attr~=value]
获取元素的属性值包含一个value,以空格分隔
$("div[class~='box']")获取class属性值等于“box”或通过空格分隔并含有box的<div>元素,如“tbox”
[attr1][attr2]...[attrN]
获取同时拥有多个属性的元素
$("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的<input>元素
4.子元素选择器
利用子元素选择器可以对子元素进行筛选,常用的如表4所示。
表4子元素选择器
选择器
功能描述
:nth-child(index/even/o/公式)
索引index默认从1始,匹配指定index索引、偶数、奇数、或符合指定公式(如2n,n默认从0始)的子元素
:first-child
获取个子元素
:last-child
获取最后一个子元素
:only-child
如果当前元素的子元素,则匹配
:nth-last-child(index/even/o/公式)
选择所有它们父元素的第n个子元素。计数从最后一个元素始到个
:nth-of-type(index/even/o/公式))
选择同属于一个父元素之下,并且标签名相同的子元素中的第n个子元素
:first-of-type
选择所有相同的元素名称的个子元素
:last-of-type
选择所有相同的元素名称的最后一个子元素
:only-of-type
选择所有没有兄弟元素,且具有相同的元素名称的元素
:nth-last-of-type(index/even/o/公式)
选择属于父元素的特定类型的第n个子元素,计数从最后一个元素到个
jquery在线库5.表单选择器

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。