拿jQuery当手术刀，解锁10+种精准查找元素的方法

jQuery：元素查找的终极指南

jQuery 就像一个精密的工具，帮助我们轻松高效地查找和操作网页元素。掌握其元素查找方法至关重要，让你成为一名真正的 jQuery 高手。让我们深入探索十种常用的查找方法，助你登峰造极！

1. 精准定位：id 选择器

id 选择器就像给元素贴上独一无二的标签，让你精准锁定特定元素。使用 "#id" 语法，例如 $("#my-element") ，即可定位 id 为 "my-element" 的元素。

// 获取 id 为 "my-element" 的元素
const element = $("#my-element");

2. 多元定位：class 选择器

class 选择器可以同时获取所有带有指定 class 的元素。使用 ".class" 语法，例如 $(".my-class") ，即可定位所有拥有 "my-class" class 的元素。

// 获取所有带有 "my-class" class 的元素
const elements = $(".my-class");

3. 标签名直达：标签名选择器

标签名选择器直接指定元素的标签名，查找所有匹配的元素。使用 "element" 语法，例如 $("p") ，即可定位所有段落元素。

// 获取所有段落元素
const paragraphs = $("p");

4. 无所不包：通配符选择器

通配符选择器就像一个百搭小精灵，可以匹配页面上所有元素。使用 "*" 语法，例如 $("*") ，即可查找所有元素。

// 获取页面上所有元素
const allElements = $("*");

5. 上下级关系：后代选择器

后代选择器可以精准定位特定父元素下的子元素。使用 "parent > child" 语法，例如 $("div > p") ，即可定位所有属于 "div" 元素的段落元素。

// 获取所有属于 "div" 元素的段落元素
const paragraphsInDiv = $("div > p");

6. 反向追踪：子选择器

子选择器与后代选择器类似，但它反向定位，即找到特定子元素下的父元素。使用 "parent child" 语法，例如 $("p div") ，即可定位所有包含 "div" 元素的段落元素。

// 获取所有包含 "div" 元素的段落元素
const divsInParagraph = $("p div");

7. 比邻而居：相邻兄弟选择器

相邻兄弟选择器可以找到紧挨着指定元素的兄弟元素。使用 "prev ~ next" 语法，例如 $("p ~ h1") ，即可定位所有紧挨着 "p" 元素的标题元素。

// 获取所有紧挨着 "p" 元素的标题元素
const headingsNextToParagraphs = $("p ~ h1");

8. 全部兄弟：通配符兄弟选择器

通配符兄弟选择器可以找到与指定元素相邻的所有兄弟元素，无论它们有多远。使用 "prev + next" 语法，例如 $("p + h1") ，即可定位所有紧挨着 "p" 元素后面的标题元素。

// 获取所有紧挨着 "p" 元素后面的标题元素
const headingsAfterParagraphs = $("p + h1");

9. 属性精查：Attribute 选择器

Attribute 选择器可以根据元素的属性来查找元素。使用 "[attribute]" 语法，例如 $("[type=text]") ，即可定位所有具有 "type" 属性值为 "text" 的元素。

// 获取所有 "type" 属性值为 "text" 的元素
const textInputs = $("[type=text]");

10. 属性值精准：Attribute 值选择器

Attribute 值选择器更进一步，可以根据元素的属性值来查找元素。使用 "[attribute=value]" 语法，例如 $("[name=my-input]") ，即可定位所有名称为 "my-input" 的元素。

// 获取所有名称为 "my-input" 的元素
const myInput = $("[name=my-input]");

11. 多重条件：多个条件选择器

多个条件选择器可以同时使用多个选择器来定位元素。使用 "selector1, selector2" 语法，例如 $("p, h1") ，即可定位所有段落或标题元素。

// 获取所有段落或标题元素
const paragraphsOrHeadings = $("p, h1");

高级查找方法

子元素选择器：parent > child

指定父元素，子元素选择器可以找到特定父元素下的所有子元素。使用 "parent > child" 语法，例如 $("ul > li") ，即可定位所有属于 "ul" 元素的列表项元素。

// 获取所有属于 "ul" 元素的列表项元素
const listItemsInUl = $("ul > li");

前一个元素选择器：prev

找到上一个元素，前一个元素选择器可以定位紧挨着指定元素前面的元素。使用 "prev" 语法，例如 $("p prev") ，即可定位所有紧挨着 "p" 元素前面的元素。

// 获取所有紧挨着 "p" 元素前面的元素
const elementsBeforeParagraphs = $("p prev");

后一个元素选择器：next

找到下一个元素，后一个元素选择器可以定位紧挨着指定元素后面的元素。使用 "next" 语法，例如 $("p next") ，即可定位所有紧挨着 "p" 元素后面的元素。

// 获取所有紧挨着 "p" 元素后面的元素
const elementsAfterParagraphs = $("p next");

子元素选择器：child

覆盖更广，子元素选择器可以找到所有子元素，无论它们在哪个层级。使用 "child" 语法，例如 $("div child") ，即可定位所有属于 "div" 元素的子元素。

// 获取所有属于 "div" 元素的子元素
const childrenOfDiv = $("div child");

nth-child 选择器：nth-child(n)

精准选出第 n 个子元素，nth-child 选择器让你掌控每一个子元素的位置。使用 "nth-child(n)" 语法，例如 $("div:nth-child(2)") ，即可定位 "div" 元素的第二个子元素。

// 获取 "div" 元素的第二个子元素
const secondChildOfDiv = $("div:nth-child(2)");

nth-last-child 选择器：nth-last-child(n)

同样精准，nth-last-child 选择器从最后一个子元素开始数，让你反向选择。使用 "nth-last-child(n)" 语法，例如 $("div:nth-last-child(1)") ，即可定位 "div" 元素的最后一个子元素。

// 获取 "div" 元素的最后一个子元素
const lastChildOfDiv = $("div:nth-last-child(1)");

first-child 选择器：first-child

直奔第一个子元素，first-child 选择器可以定位父元素下的第一个子元素。使用 "first-child" 语法，例如 $("div:first-child") ，即可定位 "div" 元素的第一个子元素。

// 获取 "div" 元素的第一个子元素
const firstChildOfDiv = $("div:first-child");

last-child 选择器：last-child

同样直奔最后一个子元素，last-child 选择器让你轻松找到父元素下的最后一个子元素。使用 "last-child" 语法，例如 $("div:last-child") ，即可定位 "div" 元素的最后一个子元素。

// 获取 "div" 元素的最后一个子元素
const lastChildOfDiv = $("div:last-child");

odd 选择器：:odd

只选奇数，odd 选择器会找到所有奇数位置的子元素。使用 ":odd" 语法，例如 $("div:odd") ，即可定位所有位于 "div" 元素奇数位置的子元素。

// 获取 "div" 元素所有奇数位置的子元素
const oddChildrenOfDiv = $("div:odd");

even 选择器：:even

只选偶数，even 选择器会找到所有偶数位置的子元素。使用 ":even" 语法，例如 $("div:even") ，即可定位所有位于 "div" 元素偶数位置的子元素。

// 获取 "div" 元素所有偶数位置的子元素
const evenChildrenOfDiv = $("div:even");

not 选择器：:not(selector)

反向思维，not 选择器会找到不符合指定选择器的元素。使用 **