jQuery层次与基本选择器详解及应用

在jQuery中，选择器是核心功能之一，它允许开发者精确地定位并操作DOM元素。本文将详细介绍几种常用的jQuery选择器，包括层次选择器、相邻元素选择器、兄弟元素选择器以及基础和属性过滤选择器。 1. **层次选择器**： - `$(‘div p’)`: 用于选取`div`下的所有`<p>`元素，这是直接选取嵌套关系。 - `$(‘div > p’)`: 仅选取`div`的直接子元素`<p>`，即不包括孙子元素或其他后代`<p>`。 2. **相邻元素选择器**： - `$(‘div ~ p’)`: 等价于`$(‘div’).nextAll(‘p’)`, 选取紧跟在`div`后面的所有`<p>`兄弟元素。 - `$(‘div ~ *’)`: 选取`div`后面的所有兄弟元素，不限于特定类型。 - `$(‘div + p’)`: 等价于`$(‘div’).next(‘p’)`, 仅选取紧挨着`div`后第一个`<p>`兄弟元素。 3. **兄弟元素选择器**： - `next()` 和 `prev()`: 分别获取当前元素后的紧邻兄弟元素和前一个兄弟元素。 - `nextAll()` 和 `prevAll()`: 获取当前元素后或前的所有兄弟元素。 - `siblings()`: 获取当前元素的所有兄弟元素，不包括父元素。 4. **基本过滤选择器**： - `$(‘p:first’)` 和 `$(‘p’).first()`: 获取第一个`<p>`元素。 - `$(‘p:last’)` 和 `$(‘p’).last()`: 获取最后一个`<p>`元素。 - `$(‘p:eq(2)’)`: 选取索引号为2的`<p>`元素。 - `$(‘p:even’)`: 选取所有偶数索引的`<p>`元素。 - `$(‘p:odd’)`: 选取所有奇数索引的`<p>`元素。 - `$(‘p:not(.tst)’)`: 选取所有未应用`.tst`类的`<p>`元素。 - `$(‘p:gt(1)’)`: 选取索引值大于1的`<p>`元素。 - `$(‘p:lt(3)’)`: 选取索引值小于3的`<p>`元素。 - `$(‘:header’)`: 选取所有`<h1>`到`<h6>`元素，注意写法要求连续，无空格。 5. **属性过滤选择器**： - `$(“div[id]”)`: 选取具有`id`属性的`<div>`元素。 - `$(“div[title=test]”)`: 选取`title`属性为`test`的`<div>`。 - `$(“input[name=abc]”)`: jQuery并未封装`getElementsByTagName`，因此这里用于选取`name`属性为`abc`的`<input>`元素。 - `$(“div[title!=test]”)`: 选取`title`属性不等于`test`的`<div>`。 这些选择器的组合使用能极大地提高开发者在处理复杂DOM结构时的效率。通过熟练掌握它们，你可以精确地定位并操作页面上的元素，进而实现丰富的前端交互效果。