JQuery之选择器篇(一)

89510194 2020-02-02

??今天回顾了之前学习的JQuery选择器,现在简单的总结一下。


JQuery选择器类型

??主要分为四类

  1. 基本选择器
  2. 层级选择器
  3. 过滤选择器
  4. 表单选择器

基本选择器

??基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能用一次,class允许重复使用。

  1. 标签选择器??div { color:Red;}
  2. ID选择器??#myDiv {color:Red;}
  3. 类选择器??.divClass {color:Red;}
  4. 后代选择器(类选择器的后代选择器)??.divClass span { color:Red;}
  5. 群组选择器??div,span,img {color:Red} ?? 即具有相同样式的标签分组显示

层级选择器

??如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等 大专栏  JQuery之选择器篇(一),那么层次选择器是一个非常好的选择。

  1. 后代??$(“ancestor descendant”)??选取ancestor元素里所有
    descendant(后代)元素
  2. 子元素 ?? $(“parent>child”) ??选取parent元素下的child(子)元素
  3. next元素 ??$(“prev+next”) ??选取紧接在prev元素后的next元素
  4. siblings元素 ??$(“prev~siblings”) ??选取prev元素之后的所有siblings元素

?? 在层次选择器中,第1个和第2个比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以使用的机率相对较少,可以用相应的方法代替。

??可以用next()方法来代替$(“prev+next”)选择器,即$(“.one+div”)与$(“.one”).next(“div”)等效

??可以用nextAll()方法来代替$(“prev~siblings”)选择器,即$(“.one~div”)与$(“.one”).nextAll(“div”)等效


小结
本文主要介绍了jQuery选择器中的基本选择器和层次选择器,后两者改天再总结。

相关推荐

Web全栈笔记 / 0评论 2020-06-15