十、选择器的学习 - 基础选择器、层级选择器
基础选择器是最简单的选择器，比如ID选择器、元素选择器都是javascript原生支持的功能，所以在jQuery内部可以直接调用，效率最高。
基础选择器列表
|
名称 |
中文常用叫法 |
说明 |
举例 |
|
#id |
ID选择器 |
根据元素ID选择 |
$(“divId”)选择ID为divId的元素 |
|
Element |
元素选择器 |
根据元素的名称选择 |
$(“a”)选择所有<a>元素 |
|
.class |
样式选择器 |
根据元素的CSS选择 |
$(“.bgRed”)选择所用CSS类为bgRed的元素 |
|
* |
全选择器 |
选择所有元素 |
$(“*”)选择页面所有元素 |
|
Selector1, Selector2, SelectorN |
多重选择器 |
可以将几个选择器用逗号“,”分隔开，然后再拼成一个选择器 。会同时选中这几个选择器匹配的内容 |
$(“#divId,a,.bgRed”) |
基础选择器使用要点，基础选择器定义的都是最基础最常使用的选择器。根据选择器优化原则，应该优先使用ID选择器和element选择器缩小查找范围。如果只是用过滤器，则相当于使用了“*”选择器在所有元素中过滤，应该尽量避免。
层次选择器
层次选择器用于带有层次关系的对象选择。页面开发时经常遇到获取一个元素中的某些元素，或者获取相邻节点元素的使用场景，此时层次选择器就可以帮助我们完成任务。
层次选择器列表
|
名称 |
常用中文叫法 |
说明 |
举例 |
|
Ancestor descendant |
后代选择器 |
使用“form input”的形式选中form中的所有input元素。即ancestor（祖先）为form，descendant（子孙为）input |
$(“.bgRed div”)选择CSS类为bgRed的元素中的所有<div>元素 |
|
Parent>child |
子代选择器 |
选择parent的直接子节点child，child必须包含在parent中并且父类是parent元素 |
$(“.myList>li”)选择CSS类为myList元素中的直接子结点<li>对象 |
|
Prev+next |
层次选择器 |
Prev和next是两个同级别的元素。选中在prev元素后面的next元素 |
$(“#hibiscus+img”)选在ID为hibiscus元素后面的img对象 |
|
Prev~siblings |
层次选择器 |
选择prev后面的根据siblings过滤的元素。 注：siblings是过滤器 |
$(“#someDiv~[title]”)选择ID为someDiv的对象后面所有带有title属性的元素 |
层次选择器使用要点
“ancestor descendant”后代选择器是最常用的选择器，但是要注意后代选择器和子代选择器的区别。
子代选择器要注意是直接子结点。如果中间多一个其他的层级就不是子代了。
