jQuery基础选择器与层次选择器详解

"jQuery笔记1" jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这篇笔记主要介绍了jQuery的基本选择器和层次选择器，这些都是理解和使用jQuery进行网页开发的基础。 ### 一、基本选择器 1. **ID选择器** ID选择器通过DOM元素的唯一标识符id来定位元素。使用`$("#id")`，例如`$("#box")`将选取id为"box"的元素。 2. **元素选择器** 元素选择器基于HTML元素的标签名来选取元素。如`$("div")`将选取所有`<div>`元素。 3. **类名选择器** 类选择器依据元素的CSS类来选取元素。使用`$(".class")`，如`$(".box")`将选取所有具有"box"类的元素。 4. **复合选择器** 复合选择器允许同时选取多个选择器匹配的元素。用逗号分隔不同的选择器，如`$("selector1,selector2,selectorN")`。例如`$("div,#btn")`将选取所有`<div>`元素和id为"btn"的元素。请注意，这并不意味着元素必须同时满足所有条件，而是满足任一条件即可。 5. **通配符选择器** `$("*")`可以选取页面上的所有DOM元素。 ### 二、层次选择器 1. **ancestordescendant选择器** 这个选择器用于选取指定祖先元素下的所有子孙元素。如`$("ancestor descendant")`。例如，`$("div p")`会选取所有在`<div>`元素内的`<p>`元素。 2. **child选择器** child选择器（`parent > child`）选取父元素的直接子元素。例如，`$("ul > li")`选取所有`<ul>`元素内的直接`<li>`子元素。 3. **next_sibling选择器** next_sibling选择器（`element ~ siblings`）选取指定元素后的所有同级元素。例如，`$("div ~ p")`选取所有紧跟在`<div>`后面的`<p>`元素。 4. **adjacent_sibling选择器** adjacent_sibling选择器（`element + sibling`）选取指定元素后的第一个同级元素。例如，`$("div + p")`选取紧跟在`<div>`后面的第一个`<p>`元素。 掌握这些基本选择器和层次选择器，开发者可以高效地选取和操作DOM元素，实现丰富的交互效果和动态更新。在实际应用中，jQuery还提供了更多的选择器和方法，如属性选择器、过滤选择器等，它们共同构成了jQuery强大的功能基础。