选择器 |
css |
jquery |
解释 | ||
基本选择器 |
* |
通配选择器 |
*{} |
$("*") |
所有元素 |
E |
元素选择器 |
p{} |
$("p") |
所有p标签 | |
#id |
ID选择器 |
#hd{} |
$("#hd") |
id是hd的元素 | |
.class |
类选择器 |
.logo{} |
$(".logo") |
class是logo的元素 | |
selector1,selectN |
群组选择器 |
div,span,p{} |
$("div,span,p") |
所有div、span、p | |
层次选择器 |
E F |
后代选择器 |
body div{} |
$("body div") |
页面上所有div |
E>F |
子选择器 |
body>div{} |
$("body>div") |
页面上所有第一层div | |
E+F |
相邻兄弟元素 |
.logo+div |
$(".logo+div")或$(".logo").next(F) |
紧邻class是logo的元素后面的div | |
E~F |
通用兄弟选择器 |
.logo~div |
$(".logo~div")或$(".logo").nextAll(F) |
class是logo的元素后面的所有div | |
动态伪类选择器 |
E:link |
链接伪类选择器 |
a:link{} |
no |
未被点击的所有a标签 |
E:visited |
链接伪类选择器 |
a:visited{} |
no |
被点过的所有a标签 | |
E:active |
用户行为伪类选择器 |
input:active{} |
no |
所有点击过的input框 | |
E:hover |
用户行为伪类选择器 |
a:hover |
no |
鼠标停留在的a标签 | |
E:focus |
用户行为伪类选择器 |
inupt:focus |
no |
点击着的input框 | |
基础内容过滤器 |
E:focus |
焦点 |
no |
$(":focus") |
**** |
E:even |
偶 |
no |
$("input:even") |
选取索引是偶数的input | |
E:odd |
奇 |
no |
$("input:odd") |
选取索引是奇数的input | |
E:eq(n)/E:gt(n)/E:lt(n) |
前后 |
no |
$("input:eq(1)")/$("input:gt(1)")/$("input:lt(1)") |
选取索引等于/大于/小于index元素的input | |
E:header |
h标签 |
no |
$(":header") |
选取所有的标题元素 | |
E:animated |
动画 |
no |
$("div:animated") |
选取当前正在执行的动画元素 | |
E:first |
第一个 |
no |
$("ul>li:first") |
**** | |
E:last |
最后一个 |
no |
$("ul>li:last") |
**** | |
否定选择器 |
E:not(F) |
否定选择器 |
input:not([type=submit]){} |
$("input:not(type=submit)") |
**** |
结构伪类选择器 |
E:first-child |
第一个子元素 |
ul>li:first-child |
no |
选取div中第一个div |
E:last-child |
最后一个子元素 |
ul>li:last-child |
no |
选取div中最后一个div | |
F E:nth-child(n) |
F的第n个E类型的子元素 |
ul>li:nth-child(2) |
no |
**** | |
F E:nth-last-child(n) |
F的最后一个E类型的子元素 |
ul>li:nth-last-child |
no |
**** | |
E:root |
匹配根元素,始终是html |
div:root |
no |
**** | |
E:nth-of-type(n) |
第E类型的子元素 |
div>p:nth-of-type(2) |
no |
**** | |
E:first-of-type |
第一个e类型的子元素 |
div:first-of-type |
no |
**** | |
E:nth-last-of-type(n)或E:last-of-type |
最后一个e类型的子元素 |
div>p:nth-last-of-type |
no |
**** | |
E:only-child |
选择父元素只包含一个子元素,且类型为E |
p:only-child |
no |
**** | |
E:only-of-type |
选择父元素只包含一个同类型的元素,且类型为E |
p:only-child |
no |
**** | |
E:empty |
选择没有子元素的元素,且没有任何文本节点 |
p:empty |
no |
**** | |
UI元素状态伪类选择器 |
E:checked或E[checked] |
选中状态伪类选择器 |
.chekbox:checked |
$("input:checked") |
所有选中的class为chekbox的元素 |
E:enabled |
启用状态伪类选择器 |
yes |
$("#form1:enabled") |
**** | |
select option:selected |
选取被选中的元素 |
no |
$("select option:selected") |
**** | |
E:disabled |
不可用状态伪类选择器 |
yes |
$("#form2:disabled |
**** | |
伪元素选择器 |
::first-letter |
选择文本块的第一个字母 |
yes |
no |
**** |
::first-line |
选择第一行文本 |
yes |
no |
**** | |
::befor和::after |
额外内容位置,不加入DOM,需要content属性辅助,通常用来做ICON |
yes |
no |
**** | |
::selection |
匹配突出显示的文本,仅接受两个属性background和color |
yes |
no |
**** | |
属性选择器 |
E[attr] |
选择具有属性attr的元素 |
yes |
$("div[id]") |
**** |
E[attr=val] |
选择具有attr属性,且属性值等于val的元素 |
yes |
$("div[title=test]") |
**** | |
E[attr!=val] |
不等于val的元素 |
no |
$("div[title!=test]") |
**** | |
E[attr|=val] |
属性值等于val或以val-开头 |
yes |
$("div[title|=test]") |
**** | |
E[attr~=val] |
属性值以空格分隔,有一个属性为val |
yes |
$("div[title~=test]") |
**** | |
E[attr*=val] |
属性值中任意位置包含val |
yes |
$("div[title*=test]") |
**** | |
E[attr^=val] |
属性值以val开头 |
yes |
$("div[title^=test]") |
**** | |
E |
|
no |
$("div[id=a][title$=test]") |
**** | |
E[attr$=val] |
属性值以val结尾 |
yes |
$("div[title$=test]") |
**** | |
可见性过滤器 |
E:hidden |
选取不可见元素 |
no |
$(":hidden") |
**** |
E:visible |
选取可见元素 |
no |
$(":visible") |
**** | |
内容过滤器 |
E:contains(text) |
选取文本中含有test的元素 |
no |
$("div:contains('aaa')") |
**** |
E:empty |
选取不含子元素和文本元素的元素 |
no |
$("div:empty") |
**** | |
E:has(selector) |
选取含有选择器所匹配的元素 |
no |
$("div:has(p)") |
**** | |
E:parent |
选取含有子元素和文本元素的元素 |
no |
$("div:parent") |
**** | |
表单选择器 |
$(":input") |
选取所有input、textara、select、button |
no |
$(":input") |
**** |
$(":text") |
选取所有单行文本 |
no |
$(":text") |
**** | |
$(":password") |
|
no |
$(":password") |
**** | |
$(":radio") |
|
no |
$(":radio") |
**** | |
$(":checkbox") |
|
no |
$(":checkbox") |
**** | |
$(":submit") |
选取所有提交按钮 |
no |
$(":submit") |
**** | |
$(":image") |
|
no |
$(":image") |
**** | |
$(":reset") |
|
no |
$(":reset") |
**** | |
$(":button") |
|
no |
$(":button") |
**** | |
$(":file") |
|
no |
$(":file") |
**** | |
$(":hidden") |
|
no |
$(":hidden") |
**** |
选择器
最新推荐文章于 2024-12-17 20:42:14 发布