选择器归纳
- 基本选择器
- 位置选择器
- 属性选择器
- 表单选择器
- 过滤选择器
- 结果集中的选择器
- 方法选择器
- (结果集)方法选择器
1. 基本选择器
选择符 | 匹配元素 | 示例 |
---|
* | 所有元素 | $(’*’) |
id | 给定ID的元素 | $(’#:IDName’) |
.class | 给定类的所有元素 | $(’.:CalssName’) |
element | 给定类型的所有元素 | $(’:TagName’) |
a,b | 与a或b匹配的元素 | $(’[ID,Class,TagName],[ID,Class,TagName],’’) |
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后跟一个连字符(-)的元素 |
Example:$('[id]') //寻找有ID这个属性的所有元素
(注:attr - Attribute:属性的意思,上文是指有某“属性”)
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 | 启用的表单元素 (注:实验表明,A标签也会被算入之中) |
: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) | 给定语言代码的元素(元素中有lang属性) |
:target | URI标识符指向的目标元素.(描点) |
6. 结果集中的选择器
选择符 | 匹配元素 |
---|
:first | 结果集中的第一个元素,对应方法为first() |
:last | 结果集中的最后一个元素,对应方法为last() |
:not(a) | 结果集中不与a匹配的元素,对应方法为not() |
:even | 结果集中索引是偶数的元素(从0开始),如$(“a b:even”) |
:odd | 结果集中索引是奇数的元素(从0开始),如$(“a b:odd”) |
:eq(index) | 结果集中索引是index的元素(从0开始) |
:gt(index) | 结果集中索引大于index的元素(从0开始),换句话说:取Index后面的的结果集 |
:lt(index) | 结果集中索引小于index的元素(从0开始),换句话说:取Index前面的的结果集 |
7. 方法选择器
方法 | 描述 |
---|
$.fn.parent(expr) | 找父亲节点,可以传入expr进行过滤,比如$(“span”).parent()或者$(“span”).parent(".class") |
$.fn.parents(expr) | 类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 |
$.fn.closest(expr) | 找父亲节点,匹配expr,不同parents的是,匹配到就立马返回不再向上 |
$.fn.children(expr) | 返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 |
$.fn.contents() | 返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点 |
$.fn.prev() | 返回上一个兄弟节点,不是所有的兄弟节点 |
$.fn.prevAll() | 返回所有之前的兄弟节点 |
$.fn.next() | 返回下一个兄弟节点,不是所有的兄弟节点 |
$.fn.nextAll() | 返回所有之后的兄弟节点 |
$.fn.siblings() | 返回兄弟姐妹节点,不分前后 |
$.fn.find(expr) | 跟$.filter(expr)完全不一样。$.filter()是从初始的jQuery对象集合中筛选出一部分,而$.fn.find()的返回结果,不会有初始集合中的内容,比如$(“p”),find(“span”),是从元素开始找,等同于$(“p span”) |
8. (结果集)方法选择器
方法 | 描述 |
---|
$.fn.not() | 过滤不符合操作符的元素(只要不符合操作符的元素),同直接选择器“:not”效果一样,与"$.fn.filter()"筛选性质相反 |
$.fn.filter() | 过滤不符合操作符的元素(只要符合操作符的元素),与".not()"筛选性质相反 |
自己使用和总结,有误请指正。