基本选择器
| 选择器 |
返回 |
示范描述 |
| #id |
单个元素 |
$("#test") |
| .class |
集合元素 |
$(".test") |
| element |
集合元素 |
$("p") 所有p原素 |
| * |
集合元素 |
$("*")所有原素 |
| select1,select2,selectn |
集合元素 |
$("div,span,p.myClass")所有匹配原素 |
层次选择器
| 选择器 |
返回 |
示范描述 |
| $("ancestor descendant") |
集合元素 |
$("div span") |
| $("parent>child") |
集合元素 |
$("div>span") 所有子元素 |
| $("prev+next") |
集合元素 |
$(".one + div") 选取类名为one的下一个div同辈原素 |
|
|
可用next()方法代替$(".one").next("div") |
| $("prev～siblings") |
集合元素 |
$(".two + div") 选取类名为two的所有div同辈原素 可用nextAll()方法代替 |
|
|
可用nextAll()方法代替$(".one").nextAll("div") |
基本过滤选择器
| 选择器 |
返回 |
示范描述 |
| :first |
单个元素 |
$("div:first") 选取第一个元素 |
| :last |
单个元素 |
$("div:last") 选取最后一个元素 |
| :not(selector) |
元素合集 |
$("input:not(.myclass)") 选取类名不是myclass的原素 |
| :even |
元素合集 |
$("input:even") 选取索引是偶数的匹配元素 |
| :odd |
元素合集 |
$("input:odd") 选取索引是奇数的匹配元素 |
| :eq(index) |
单个元素 |
$("input:eq(1)") 选取索引是1的匹配元素 |
| :gt(index) |
元素合集 |
$("input:gt(1)") 选取索引大于1的匹配元素 |
| :lt(index) |
元素合集 |
$("input:lt(1)") 选取索引小于1的匹配元素 |
| :header |
元素合集 |
$(":header") 选取标题元素 如h1，h2等 |
| :animated |
元素合集 |
$("div:animated") 当前正在执行动画的所有元素 |
| :focus |
元素合集 |
$(":focus") 当前获取焦点的元素 |
内容过滤选择器
| 选择器 |
返回 |
示范描述 |
| :contains(text) |
集合元素 |
$("div:contains("我")") 选取含有文本“我”的div元素 |
| :empty |
集合元素 |
$("div:empty)") 选取不包含子元素（包括文本元素）的div元素 |
| :has(selector) |
集合元素 |
$("div:has(p))") 选取含有p元素的div元素 |
| :parent |
集合元素 |
$("div:parent)") 选取拥有子元素（包括文本元素）的div元素 |
可见性过滤选择器
| 选择器 |
返回 |
示范描述 |
| :hidden |
集合元素 |
$(":hidden") 选取不可见元素包括<input type ="hidden"> <div style="display:none" > <div style="visibility:hidden "等> |
| :visible |
集合元素 |
$(" div:visible)") 选取可见的div元素 |
属性过滤选择器
| 选择器 |
返回 |
示范描述 |
| [attribute] |
集合元素 |
$("div[id]") 选取拥有id属性等div元素 |
| [attribute=value] |
集合元素 |
$("div[title=test]") 选取拥有title属性为test的div元素 |
| [attribute!=value] |
集合元素 |
$("div[title=test]") 选取拥有没有title属性和title属性不为test的div元素 |
| [attribute^=value] |
集合元素 |
$("div[title^=test]") 选取属性和title属性以test为开始的div元素 |
| [attribut$^=value] |
集合元素 |
$("div[title^=test]") 选取属性和title属性以test为结束的div元素 |
还有其他多种不常用属性过滤选择器
注意1.3.1之前的版本属性选择器需要加@符号 注意代码报错的问题
之前 ![("div[@title='test']"); 之后](https://math.jianshu.com/math?formula=(%22div%5B%40title%3D'test'%5D%22)%3B%20%E4%B9%8B%E5%90%8E)
("div[title='test']");
子元素过滤选择器
| 选择器 |
返回 |
示范描述 |
| :nth-child(index/even/odd/equation) |
集合元素 |
:eq()只匹配一个元素 index值 从0开始 :nth-child()为每一个父元素匹配子元素 且index值从1开始 |
| :first-child |
集合元素 |
:first只返回单个元素 而:first-child将为每一个父元素匹配第一个字节 |
| :last-child |
集合元素 |
同上 |
| :only-child |
集合元素 |
$("ul li:only-child")在ul中选取是唯一子元素li 的li标签 |
:nth-child是常用选择器
- :nth-child(even)选取偶数元素
- :nth-child(odd)选取奇数元素
- :nth-child(2)选取每个父元素下索引值为2的元素
- :nth-child(3n)选取每个父元素下索引值是3的倍数的元素（n从1开始）
- :nth-child(3n+1)选取每个父元素下索引值是3的倍数的元素（n从1开始）
表单对象属性过滤选择器
| 选择器 |
返回 |
示范描述 |
| :enabled |
集合元素 |
$("#form1:enabled")选取id为form1的表单内的所有可用元素 |
| :disabled |
集合元素 |
$("#form1:enabled")选取id为form1的表单内的所有不可用元素 |
| :checked |
集合元素 |
$("input:checked")选取所有被选中的元素（单选框 复选框） |
| :selected |
集合元素 |
$("input:checked")选取所有被选中的元素（下拉列表） |
表单选择器
| 选择器 |
返回 |
示范描述 |
| :input |
集合元素 |
$("input")选取所有<input><textarea><select><button>元素 |
| :text |
集合元素 |
$(":text")选取所有单行文本框 |
| :password |
集合元素 |
$(":password")选取所有密码框 |
| :radio |
集合元素 |
$(":radio")选取所有单选框 |
| :checkbox |
集合元素 |
$(":checkbox")选取所有复选框 |
| :submit |
集合元素 |
$(":submit")选取所有提交按钮 |
| :image |
集合元素 |
$(":image")选取所有图像按钮 |
| :reset |
集合元素 |
$(":reset")选取所有重置按钮 |
| :button |
集合元素 |
$(":button")选取所有按钮 |
| :file |
集合元素 |
$(":file")选取所有上传域 |
| :hidden |
集合元素 |
$(":hidden")选取所有不可见元素 |
网友评论