jQuery选择器探究：语法汇总

Posted 2023-02-23 程序猿子

首先概略汇总一下jQuery常见选择器，大概分为这么几类：基本选择器、层次选择器、过滤选择器。基本选择器包含id/class/tag等，层次选择器包含祖孙、父子、兄弟、同级选择器四种，过滤选择器比较多样化，有根据当前元素在同级元素集合中的位置选择的，有根据相对父元素的子元素选择的，有根据属性选择的，也有根据内容选择的，还有表单元素等多种过滤选择器。


一 基本选择器
ID选择器 #id
类选择器 .class
标签选择器 tag,*
群组选择器 s1,s2,s3


二 层次选择器
祖孙选择器 ancestor descendant
父子选择器 parent>child
兄弟选择器 prev+next
同级选择器 prev~siblings


三 过滤选择器
位置过滤选择器
:first
:last
:even
:odd
:nth(index)
:eq(index)
:gt(index)
:lt(index)
子元素过滤选择器
:first-child
:last-child
:nth-child(index/even/odd/equation)
:only-child
属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attribute|=value]
[attribute~=value]
内容过滤选择器
:contains(text)
:empty
:parent
可见性过滤选择器
:hidden
:visible
表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:reset
:button
:image
:file
:hidden
其他过滤选择器
:has(selector)
:not(selector)
:header
:animated
:focus