jQuery 的查询选择器 - Javascript

jQuery 是一个广泛使用的 JavaScript 库，它可以通过选择器来找到网页中的 HTML 元素。这些选择器类似于 CSS 选择器，能够以快速、易懂的方式操作 DOM 元素。

基础选择器

以下是 jQuery 的基础选择器，可以直接使用：

• *：选取所有元素。
• #id：根据 id 选择元素。
• .class：根据 class 选择元素。
• element：根据元素名称选择元素。
• element,element,...：选择多个元素。
• parent > child：选择 parent 元素中的 child 元素。
• prev + next：选择 prev 元素之后的第一个 next 元素。
• prev ~ siblings：选择 prev 元素之后的所有 siblings 元素。

以下是一个例子：

// 选择 id 为 "content" 的元素
$("#content");

// 选择 class 为 "list" 的元素
$(".list");

// 选择所有的 <div> 元素
$("div");

// 选择所有同时属于 "div" 和 "p" 元素的元素
$("div,p");

// 选择每个 <ul> 元素下的第一个 <li> 元素
$("ul > li:first-child");

// 选择 id 为 "prev" 元素之后的第一个同级元素
$("#prev + *");

// 选择 id 为 "prev" 元素之后的所有同级元素
$("#prev ~ .siblings");

属性选择器

除了上述选择器之外，jQuery 还提供了一系列属性选择器：

• [attribute]：选择含有该属性的元素。
• [attribute=value]：选择属性为指定值的元素。
• [attribute!=value]：选择属性不等于指定值的元素。
• [attribute^=value]：选择属性值以指定值开头的元素。
• [attribute$=value]：选择属性值以指定值结尾的元素。
• [attribute*=value]：选择属性值中包含指定值的元素。

以下是一个例子：

// 选择所有带有 "href" 属性的 <a> 元素
$("a[href]");

// 选择所有 href 值为 "https://" 的 <a> 元素
$('a[href="https://"]');

// 选择所有 title 值不为 "example" 的 <a> 元素
$('a[title!="example"]');

// 选择所有 href 值以 "https://" 开头的 <a> 元素
$('a[href^="https://"]');

// 选择所有 href 值以 ".pdf" 结尾的 <a> 元素
$('a[href$=".pdf"]');

// 选择所有 href 值中包含 "jquery" 的 <a> 元素
$('a[href*="jquery"]');

过滤选择器

jQuery 还提供了一系列过滤选择器，可以根据元素的状态和属性来进行过滤：

• :animated：选择正在执行动画效果的元素。
• :eq(index)：选择索引等于 index 的元素。
• :even：选择索引为偶数的元素。
• :odd：选择索引为奇数的元素。
• :first：选择第一个元素。
• :last：选择最后一个元素。
• :not(selector)：选择除了 selector 元素之外的所有元素。
• :has(selector)：选择含有 selector 元素的元素。
• :contains(text)：选择含有指定文本的元素。
• :empty：选择不含有任何子元素的元素。
• :parent：选择含有子元素的元素。
• :visible：选择可见的元素。
• :hidden：选择不可见的元素。

以下是一个例子：

// 选择正在执行动画效果的元素
$(":animated");

// 选择第二个 <li> 元素
$("li:eq(1)");

// 选择所有偶数的 <tr> 元素
$("tr:even");

// 选择最后一个 <div> 元素
$("div:last");

// 选择所有不含有 class 为 "example" 的 <p> 元素
$("p:not(.example)");

// 选择含有 class 为 "example" 的 <div> 元素
$("div:has(.example)");

// 选择含有文本 "example" 的 <p> 元素
$('p:contains("example")');

// 选择不含有任何子元素的 <span> 元素
$("span:empty");

// 选择含有子元素的 <div> 元素
$("div:parent");

// 选择可见的 <img> 元素
$("img:visible");

// 选择不可见的 <div> 元素
$("div:hidden");

总结

通过选择器，使用 jQuery 查找元素变得异常简单。借助于这些基础选择器、属性选择器和过滤器，开发者能够快速高效地操纵 DOM 元素，实现网页的各种动态效果和交互特性。