JQuery之选择器篇

Posted 2020-11-25 lijianming180

??今天回顾了之前学习的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选择器中的基本选择器和层次选择器,后两者改天再总结。