📅 最后修改于: 2023-12-03 15:32:14.677000 🧑 作者: Mango
jQuery是一个快速、小巧、功能丰富的JavaScript库，旨在使HTML文档遍历、操作和事件处理变得更加简单。
jQuery提供了多种不同的选择器，可以帮助您轻松地选择特定的HTML元素并对其进行操作。
以下是一些常用的jQuery选择器：
*选择所有元素。
示例代码：
$("*"); // 选中文档中的所有元素
element按元素名称选择元素。
示例代码：
$("p"); // 选中网页中所有的 <p> 元素
.class按 class 名称选择元素。
示例代码：
$(".intro"); // 选中所有 class="intro" 的元素
#id按 id 名称选择元素。
示例代码：
$("#firstname"); // 选中所有 id="firstname" 的元素
parent child选择 parent 元素内的 child 元素。
示例代码：
$("div p"); // 选中所有 <div> 元素内的 <p> 元素
ancestor descendant与上述选择器相似，但不限于直接父元素-子元素的关系，它可以是先祖和后代之间的关系。
示例代码：
$("div a"); // 选中所有 <div> 元素内的 <a> 元素（不仅仅是直接子元素）
prev + next选择紧接着 prev 元素之后的 next 元素。
示例代码：
$("div + p"); // 选中紧接着 <div> 元素之后的 <p> 元素
prev ~ siblings选择 prev 元素之后的所有 siblings元素。
示例代码：
$("div ~ p"); // 选中跟在 <div> 元素之后的所有 <p> 元素
:first选择第一个匹配元素。
示例代码：
$("p:first"); // 选中第一个 <p> 元素
:last选择最后一个匹配元素。
示例代码：
$("p:last"); // 选中最后一个 <p> 元素
:even选择序号为偶数的匹配元素（序号从0开始）。
示例代码：
$("tr:even"); // 选中表格中所有偶数行
:odd选择序号为奇数的匹配元素。
示例代码：
$("tr:odd"); // 选中表格中所有奇数行
:eq(index)选择索引为 index 的匹配元素（从0开始）。
示例代码：
$("p:eq(1)"); // 选中第二个 <p> 元素
:gt(index)选择索引大于 index 的匹配元素（从0开始）。
示例代码：
$("p:gt(1)"); // 选中第三个及更多的 <p> 元素
:lt(index)选择索引小于 index 的匹配元素（从0开始）。
示例代码：
$("p:lt(2)"); // 选中前两个 <p> 元素
:not(selector)选择所有不匹配给定选择器的元素。
示例代码：
$("p:not(:first)"); // 选中除了第一个 <p> 元素之外的所有 <p> 元素
:header选择所有标题元素，如 <h1>、<h2>等。
示例代码：
$(":header"); // 选中网页中所有标题元素
:contains(text)选择包含给定文本的元素。
示例代码：
$("p:contains('Hello')"); // 选中所有包含 'Hello' 的 <p> 元素
:has(selector)选择包含给定选择器匹配元素的元素。
示例代码：
$("div:has(p)"); // 选中所有包含 <p> 元素的 <div> 元素
:empty选择不包含任何子元素或文本的元素。
示例代码：
$("p:empty"); // 选中所有不包含任何内容的 <p> 元素
:animated选择当前正在执行动画效果的所有元素。
示例代码：
$(":animated"); // 选中当前正在执行动画的元素
[attribute]选择带有指定属性的元素。
示例代码：
$("a[target]"); // 选中所有带有 target 属性的 <a> 元素
[attribute=value]选择属性值等于 value 的元素。
示例代码：
$("a[target='_blank']"); // 选中所有 target 属性的值为 '_blank' 的 <a> 元素
[attribute!=value]选择属性值不等于 value 的元素。
示例代码：
$("a[target!='_blank']"); // 选中所有 target 属性的值不为 '_blank' 的 <a> 元素
[attribute^=value]选择属性值以 value 开始的元素。
示例代码：
$("a[href^='https']"); // 选中所有 href 属性的值以 'http' 开头的 <a> 元素
[attribute$=value]选择属性值以 value 结尾的元素。
示例代码：
$("a[href$='.pdf']"); // 选中所有 href 属性的值以 '.pdf' 结尾的 <a> 元素
[attribute*=value]选择属性值包含 value 的元素。
示例代码：
$("input[name*=username]"); // 选中所有 name 属性包含 'username' 的 <input> 元素
:input选择所有 input、textarea、select 和 button 元素。
示例代码：
$(":input"); // 选中网页中所有表单元素
:text选择所有 type="text" 的 input 元素。
示例代码：
$("input:text"); // 选中所有 type="text" 的 <input> 元素
:password选择所有 type="password" 的 input 元素。
示例代码：
$("input:password"); // 选中所有 type="password" 的 <input> 元素
:radio选择所有 type="radio" 的 input 元素。
示例代码：
$("input:radio"); // 选中所有 type="radio" 的 <input> 元素
:checkbox选择所有 type="checkbox" 的 input 元素。
示例代码：
$("input:checkbox"); // 选中所有 type="checkbox" 的 <input> 元素
:button选择所有 type="button" 的 button 元素。
示例代码：
$(":button"); // 选中所有 type="button" 的 <button> 元素
:submit选择所有 type="submit" 的 button 元素。
示例代码：
$("button:submit"); // 选中所有 type="submit" 的 <button> 元素
:reset选择所有 type="reset" 的 button 元素。
示例代码：
$("button:reset"); // 选中所有 type="reset" 的 <button> 元素
:selected选择所有被选中的 option 元素。
示例代码：
$("option:selected"); // 选中所有被选中的 <option> 元素
:enabled选择所有可用的表单元素。
示例代码：
$(":enabled"); // 选中所有可用的表单元素
:disabled选择所有禁用的表单元素。
示例代码：
$(":disabled"); // 选中所有禁用的表单元素
:root选择文档的根元素。
示例代码：
$(":root"); // 选中 <html> 元素
:focus选择当前激活的元素。
示例代码：
$(":focus"); // 选中当前获得焦点的元素
:target选择表示文档中某个特定部分的唯一元素。
示例代码：
$(":target"); // 选中用 URL 锚将页面滚动到的元素
以上就是一些常用的jQuery选择器，它们可以帮助您轻松地选择和处理特定的HTML元素。如果您想深入了解更多相关内容，建议您查阅官方文档。