开启辅助访问
帐号登录 |立即注册

关于JQuery选择器归纳的总结

 
1、基本选择器

选择符      匹配元素
*           所有元素
id          给定ID的元素
element     给定类型的所有元素
.class      给定类的所有元素
a,b         与a或b匹配的元素
a b         a的后代元素中与b匹配的元素
a>b         a的直接子元素中与b匹配的元素
a+b         a的直接同辈元素中与b匹配的元素
a~b      a的同辈元素中与b匹配的元素


2、位置选择器

选择符                  匹配元素
a b:nth-child(index)    a的子元素中,第index个与b匹配的元素(从1开始计数)
a b:nth-child(even)     a的子元素中,第偶数个与b匹配的元素(从1开始计数)
a b:nth-child(odd)      a的子元素中,第奇数个与b匹配的元素(从1开始计数)
a b:nth-child(2n+2)     a的子元素中,第2n+2个与b匹配的元素(从1开始计数),n为自然数
a b:nth-last-child()    同:nth-child(),从最后一个元素开始计数
a b:first-child         a的子元素中,第1个与b匹配的元素
a b:last-child          a的子元素中,最后一个个与b匹配的元素
:only-child             作为其父元素唯一一个子元素的元素
a b:nth-of-type()       同:nth-child(),只计同类元素
a b:nth-last-of-type()  同:nth-last-child(),只计同类元素
a b:first-of-type()     同:first-child(),只计同类元素
a b:last-of-type()      同:last-child(),只计同类元素
a b:only-of-type()      没有同名元素的元素


3、属性选择器

选择符                  匹配元素
[attr]                  带有属性attr的元素
[attr="value"]          attr属性值为value的元素
[attr!="value"]         attr属性值不为value的元素)
[attr^="value"]         attr属性值以value开头的元素
[attr$="value"]      attr属性值以value结尾的元素
[attr*="value"]         attr属性值包含value字符串的元素
[attr~="value"]      attr属性值是空格分隔的字符串,其中一个字符串值是value的元素
[attr|="value"]         attr属性值等于value或value后跟一个连字符(-)的元素


4、表单选择器

选择符             匹配元素
:input             所有<input>、<textarea>、<select>和<button>元素
:text              type=”text”的<input>元素
:password          type=”password”的<input>元素
:file              type=”file”的<input>元素
:radio             type=”radio”的<input>元素
:checkbox          type=”checkbox”的<input>元素
:submit            type=”submit”的<input>元素
:image             type=”image”的<input>元素
:reset             type=”reset”的<input>元素
:button            type=”button”的<input>元素
:enabled           启用的表单元素
:disabled          禁用的表单元素
:checked           选中的复选框和单选按钮
:selected          选中的<option>元素


5、过滤选择器

选择符                   匹配元素
:root                   文档根元素
:header                 标题元素,h1~h6
:animated               动画正在运行的元素
:contains(text)         包含文本text的元素
a:empty                 不包含子节点的a元素
a:has(b)                至少包含一个b元素匹配的a元素(返回父元素a而非子元素b)
:parent                 与:empty相反,返回包含子节点的元素
:hidden                 隐藏的元素,包括<input type="hidden">
:visible                可见元素
:focus                  获得焦点的元素
:lang(language)         给定语言代码的元素
:target                 URI标识符指向的目标元素,具体见::target用法


6、用于结果集中的选择器

这类选择器在CSS中不存在,但可以用于JQuery的结果中进行筛选。

选择符          匹配元素
:first          结果集中的第一个元素,对应方法为first(),如$("a b:first")<==>$("a b").first()
:last           结果集中的最后一个元素,对应方法为last(),如$("a b:last")<==>$("a b").last()
:not(a)         结果集中不与a匹配的元素,对应方法为not(),如$("a b:not(c)")<==>$("a b").not(c)
:even           结果集中索引是偶数的元素(从0开始),如$("a b:even")
:odd            结果集中索引是奇数的元素(从0开始),如$("a b:odd")
:eq(index)      结果集中索引是index的元素(从0开始),对应方法是eq(index),如$("a b:eq(2)")<==>$("a b").eq(2)
:gt(index)      结果集中索引大于index的元素(从0开始),如$("a b:gt(2)")
:lt(index)      结果集中索引小于index的元素(从0开始),如$("a b:lt(2)")


回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。