jQuery-选择器
一:JQuery和DOM转换
转换:
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)
$('#i1')[0] <=====>document.getElementById('i1') d=document.getElementById("i1") $(d)
二:选择器
选择器分为:基本选择器,层级选择器,属性选择器,基本筛选器
1)基本选择器
选择器 | 使用 | 说明 | 例子 |
ID | #id | 根据给定的ID匹配一个元素 | $("#li") |
元素 | element | 根据给定的元素标签名匹配所有元素 | $("a") |
类 | .class | 根据给定的css类名匹配元素 | $(".li") |
* | * | 匹配所有元素 | |
组合 |
selector1,selector2 |
将每一个选择器匹配到的元素合并后一起返回 |
|
2)层级选择器
使用 | 说明 | 例子 | 备注 |
ancestor descendant |
在给定的祖先元素下匹配所有的后代元素 |
|
|
parent>child | 在给定的父元素下匹配所有的子元素 |
|
|
prev+next | 匹配所有紧接在 prev 元素后的 next 元素 |
|
|
prev ~siblings | 匹配 prev 元素之后的所有 siblings 元素 |
|
|
3)属性选择器
使用 | 说明 | 例子 | 备注 |
[attribute] |
匹配包含给定属性的元素 |
|
|
[attribute=value] |
匹配给定的属性是某个特定值的元素 |
|
|
[attribute!=value] |
匹配所有不含有指定的属性 |
|
|
[attribute^=value] |
匹配给定的属性是以某些值开始的元素 |
|
|
[attribute$=value] | 匹配给定的属性是以某些值结尾的元素 |
|
|
[attribute*=value] |
匹配给定的属性是以包含某些值的元素 |
|
|
[attrSel1][attrSel2][attrSelN] |
复合属性选择器,需要同时满足多个条件时使用 |
|
4)基本筛选器
使用 | 说明 | 例子 | 备注 |
:first |
获取第一个元素 |
|
|
去除所有与给定选择器匹配的元素 |
|
||
匹配所有索引值为偶数的元素,从 0 开始计数 |
|
||
匹配所有索引值为奇数的元素,从 0 开始计数 |
|
||
匹配一个给定索引值的元素 |
|
||
匹配所有大于给定索引值的元素 |
|
||
:last | 获取最后个元素 |
|
|
匹配所有小于给定索引值的元素 | |||
:header | 匹配如 h1, h2, h3之类的标题元素 |
|