基本选择器
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类匹配元素 | 集合元素 | $(".test")选取所有的class为test的元素 |
| element | 根据匹配的元素名匹配元素 | 集合元素 | $("p")选取所以的<p>元素 |
| * | 匹配所以元素 | 集合元素 | $("*")选取所有的元素 |
| selector1,select2,...selectN | 将每一个选择器匹配到元素后一起返回 | 集合元素 |
$("div,span,p.mayclass")选取所有<div>,<span>和 拥有class为myclass的<p>标签的一组元素 |
层次选择器
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 选取ancestor元素里的所有descendant（后代元素） | 集合元素 | $("div span")选取<div>里所有的<span>元素 |
| $("parent>child") | 选取parent元素下的child(子)元素，与$("ancestor descendant")有区别,$("ancestor descendant")选择的是后代元素 | 集合元素 | $("div>span")选取<div>元素下元素名是<span>的子元素 |
| $("prev+next") | 选取紧接着在prev元素后的next元素 | 集合元素 | $(".one+div")选取class为one元素后<div>兄弟元素 |
| $(prev~siblings) | 选取prev元素之后的多有siblings | 集合元素 | $("#two~div")选取id为two的元素后面的所以<div>兄弟元素 |
注:
<body>
<div >
标题
<div style="background-color:#0000FF">这个人怎么这样！</div>
</div>
<p>
<div id="aa">
舍么么额
</div>
</body>
$("body div").css("background","#bbffaa");
效果：
$("body>div").css("background","#FF0000");
效果：
$("prev+next")选择器与next()方法的等价关系
| 选择器 | 方法 | |
| 等价关系 | $(".one+div"); | $(".one").next("div") |
$("prev~siblings")选择器与nextAll()方法的等价关系
| 选择器 | 方法 | |
| 等价关系 | $("#prev~div") | $("#prev").nextAll("div") |
扫一扫
1215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
