选择器

图灵学院--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()方法与前后位置无关,只要是同辈节点就都能匹配
posted @ 2018-07-02 13:34  jieya  阅读(174)  评论(0编辑  收藏  举报