在学习Jquery选择器之前我们先简单的回想一下CSS选择器;
以下为CSS常用选择器:
选择器 | 语法 | 描述 | 示例 |
标签选择器 |
E{CSS规则 } |
以文档元素作为选择器 |
1 tr{ 2 border: solid 1px red; 3 width: 120px; 4 } 5 a{ 6 text-decoration: none; 7 } |
ID选择器 | #ID{CSS规则 } | 以文档的唯一标识符ID作为选择符 |
1 #note{ 2 border: solid 1px red; 3 width: 120px; 4 } |
类选择器 | E.className{CSS规则 } | 以文档元素的class作为选择符 |
1 div.note{ 2 border: solid 1px red; 3 width: 120px; 4 } 5 .note{ 6 border: solid 1px red; 7 width: 120px; 8 } |
群组选择器 | E1,E2,E3{CSS规则 } | 多个选择符应用同样的样式 |
td,p,div.aa{ font-size: 12px; width: 120px; } |
后代选择器 | E F{CSS规则 } | 元素E的任意后代元素F |
#main div{ border: solid 1px red; width: 120px; } |
通配选择符 | *{CSS规则 } | 以文档的所有元素作为选择符 |
*{ font-size:12px; } |
- Jquery基本选择器
基本选择器是Jquery中最常用的选择器,也是最简单的选择器,它通过元素ID、class和标签等查找DOM元素。在网页中每一个ID名称只能出现一次,class允许出现多次。基本选择器的介绍说明如下:
选择器 | 说明 | 示例 | 返回结果 |
#id | 根据给定的id匹配一个元素 | $('#test'):选取id为test的元素 | 单个元素 |
.class | 根据给定的类名匹配元素 | $('.test'):远去所有的class为test的元素 | 集合元素 |
element | 根据给定的元素名匹配元素 | $('p'):选取所有的p元素 | 集合元素 |
* | 匹配所有的元素 | $('*'):选取所有的元素 | 集合元素 |
selector1, selector2, selector3... | 将每一个选择器匹配到的元素合并后一起返回 | $('div,span,p.myClass'):选取所有的div,span和拥有class为myClass的p元素 | 集合元素 |
- Jquery层次选择器