选择器
图灵学院--Java高级架构师-互联网企业级实战VIP课程(价值6380)(qq:1197852132)
基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它是通过元素id、class和标签名等来查找dom元素。基本选择器是速度最快的,建议使用
基本选择器 | |||
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
.class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的p元素 |
* | 匹配所有元素 | 集合元素 | $("*")选取所有的元素 |
selector1,selector2...,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass")选取所有<div>,<span>和拥有class为p标签的一组元素 |
层次选择器是通过dom元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等。
层次选择器 | |||
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里的所有descendant(后代)元素 | 集合元素 | $("div span")选取<div>里的所有的<span>元素 |
$("parent>child") | 选取parent元素下的child元素 | 集合元素 | $("div>span")选取<div>元素下元素名<span>的元素 |
$("prev + next") | 选取紧接在prev元素后面的next元素 | 集合元素 | $(".one + div")选取class为one的下一个<div>同辈元素 |
$("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面的所有<div>同辈元素 |
层次选择器中第一个和第二个是大家常用的,第三四个是不常用的,一般都使用其他方法替代。
$("prev + next")选择器与next()方法的等价关系 | ||
选择器 | 方法 | |
等价关系 | $(".one + div") | $(".one").next("div") |
$("prev~siblings")选择器与nextAll()方法的等价关系 | ||
等价关系 | $("#prev~div") | $("#prev").nextAll("div") |
siblings()方法与前后位置无关,只要是同辈节点就都能匹配 |