查找标签
jQuery中的选择器都是基于CSS选择器的。
基本选择器
| 基本选择器 |
描述 |
| $('#id') |
id选择器 |
| $('.class') |
class选择器 |
| $('tagName') |
标签选择器 |
| 例子 |
描述 |
| $('div#d1') |
选择div标签中id值为d1的 |
| $('div,#d1') |
同时选择div标签、id值为d1的 |
| $("div p") |
div标签后代中的p标签 |
| $("div > p") |
div标签为儿子的p标签 |
属性选择器
| 属性选择器 |
描述 |
| $("[属性]") |
选中有这项属性的标签 |
| $("[属性=值]") |
选中有这项属性的标签，并且值也要等于 |
| $("[属性!=值]") |
选中有这项属性的标签，并且值不等于 |
| 例子 |
描述 |
| $('input[type="text"]') |
选中input中type值为text的标签 |
属性筛选器
属性选择器中有着专门针对form表单内的标签的简化选择方法。
| 原写法 |
简化 |
| input标签中的type属性 |
|
| $('input[type="text"]') |
$(':text') |
| $('input[type="password"]') |
$(':password') |
| ... |
|
| 其他属性 |
|
| $('[checked="checked"]') |
$(':checked') |
| $('[selected="selected"]') |
$(':selected') |
| ... |
|
注意：$(':checked')会同时找到option标签中的属性，而$(':selected')只会找到option标签中的属性。
基本筛选器
| 基本筛选器 |
描述 |
| :first |
第一个 |
| :last |
最后一个 |
| :eq(index) |
索引index位置的那个元素 |
| :even |
匹配所有索引值为偶数的元素，从 0 开始计数 |
| :odd |
匹配所有索引值为奇数的元素，从 0 开始计数 |
| :gt(index) |
匹配所有大于给定索引值的元素 |
| lt(index) |
匹配所有小于给定索引值的元素 |
| :not(元素选择器) |
移除所有满足not条件的标签 |
| :has(元素选择器) |
选取(含有元素选择器选中的标签)的标签 |
| 例子 |
描述 |
| $('p:first') |
选取第一个p标签 |
| $('p:eq(2)') |
选取第三个p标签(索引从0开始的) |
| $('div:not(.d1)') |
选中div中class值不等于d1的标签 |
| $('ul:has(#d1)') |
选取内部含有id是d1的ul标签 |
筛选器方法
| 方法 |
描述 |
| $().next() |
同级别往下查找一个 |
| $().nextAll() |
同级别往下查找所有 |
| $().nextUntil("选择器") |
同级别往下查找所有，直到满足选择器条件 |
| $().prev() |
同级别往上查找一个 |
| $().prevAll() |
同级别往上查找所有 |
| $().prevUntil("选择器") |
同级别往上查找所有，直到满足选择器条件 |
| $().parent() |
查找一个父标签 |
| $().parents() |
查找所有父标签(一直向上一个级别查找) |
| $().parentsUntil("选择器") |
查找所有父标签，直到满足选择器条件 |
| $().children() |
查找儿子标签 |
| $().siblings() |
同级别上下所有标签(兄弟标签) |
