目录
开发时遇到些不太好获取的元素时，需要去查获取元素的方式，由此总结了一下jQuery选择器，便于开发中快速获取DOM元素。
一、基本选择器
1. 标签选择器（元素选择器）
- 语法：
$("标签名") - 示例：
$("p")会选择文档中所有的<p>段落元素。这种选择器类似于原生 JavaScript 中的document.getElementsByTagName("p")，但 jQuery 选择器返回的是一个 jQuery 对象，可以方便地进行链式操作。 - 用途：用于对同一类型的所有元素进行统一操作，如改变所有
<p>元素的字体颜色为红色：$("p").css("color", "red");。
2. ID 选择器
- 语法：
$("#id名称") - 示例：如果有一个元素的 ID 为
myId，如<div id="myId"></div>，那么$("#myId")就会选中这个特定的<div>元素。这类似于原生 JavaScript 中的document.getElementById("myId")，但同样，jQuery 返回的是一个可进行链式操作的对象。 - 用途：用于精准定位具有特定 ID 的元素，因为在 HTML 中 ID 是唯一的。例如，获取 ID 为
myId的元素的内容：var content = $("#myId").html();。
3. 类选择器
- 语法：
$(".类名") - 示例：对于具有类名
myClass的元素，如<div class="myClass"></div>和<p class="myClass"></p>，$(".myClass")会选择所有带有myClass类的元素。这类似于原生 JavaScript 中的document.getElementsByClassName("myClass")，但更具灵活性。 - 用途：可以对具有相同类的一组元素进行操作，比如为所有具有
myClass类的元素添加一个点击事件：$(".myClass").click(function () { console.log("元素被点击"); });。
4. 通配符选择器
- 语法：
$("*") - 示例：这个选择器会选择文档中的所有元素，包括
<html>、<body>、各种标签等。 - 用途：一般用于在需要对整个文档进行某些初始化操作时，比如清除所有元素的默认边距和填充：
$("*").css("margin", 0).css("padding", 0);。不过，在实际应用中，由于性能原因，要谨慎使用通配符选择器，因为它会选择大量元素，可能导致操作效率低下。
二、层次选择器
1. 后代选择器
- 语法：
$("祖先元素 后代元素") - 示例：
$("div p")会选择所有<div>元素内部的<p>元素，不管<p>元素在<div>内部嵌套了多少层。例如，在以下 HTML 结构中：<div><section><p>这是一个段落</p></section></div>，<p>元素会被$("div p")选中。 - 用途：用于对某个容器元素内部的特定后代元素进行操作。比如，为一个
<div>容器内的所有<a>链接设置样式：$("div a").css("text - decoration", "none");。
2. 子选择器
- 语法：
$("父元素 > 子元素") - 示例：
$("ul > li")会选择所有<ul>元素的直接子元素<li>。与后代选择器不同的是，它只选择直接子元素。例如，对于 HTML 结构<ul><li>直接子元素1</li><li>直接子元素2</li><ol><li>间接子元素</li></ol></ul>，$("ul > li")只会选择 “直接子元素 1” 和 “直接子元素 2” 这两个<li>元素。
在这个HTML结构中，大部分元素是动态生成的，但元素结构是固定的。<td>下方第一层的id是我们定义的，不会动态变化，能够稳定获取。因此可以通过以下方式获取左侧框中的input元素（利用子选择器）：
$('#sellerAddressPhone >span >input')- 用途：当需要对父元素的直接子元素进行操作时很有用。比如，为一个导航栏
<ul>的直接<li>子元素设置背景颜色：$("nav > ul > li").css("background - color", "lightgray");。
3. 相邻兄弟选择器
- 语法：
$("前一个元素 + 后一个元素") - 示例：
$("h1 + p")会选择紧挨着<h1>元素之后的<p>元素。例如，在 HTML 结构<h1>标题</h1><p>紧挨着标题的段落</p><p>另一个段落</p>中，只有第一个<p>元素会被选中。 - 用途：用于对紧挨着某个元素的兄弟元素进行操作。比如，当一个
<h2>标题后紧跟着一个<div>元素时，为这个<div>元素添加一个边框：$("h2 + div").css("border", "1px solid black");。
4. 一般兄弟选择器
- 语法：
$("前一个元素 ~ 后一个元素") - 示例：
$("h1 ~ p")会选择所有与<h1>元素同级并且在其后的<p>元素。在 HTML 结构<h1>标题</h1><p>段落1</p><p>段落2</p>中，两个<p>元素都会被选中。 - 用途：可以对与某个元素同级且在其后的一组元素进行操作。比如，为一个
<h3>标题后的所有<img>元素添加一个加载动画：$("h3 ~ img").addClass("loading - animation");。
三、属性选择器
1. 简单属性选择器
- 语法：
$("[属性名]") - 示例：
$("[href]")会选择所有带有href属性的元素，通常用于选择所有的<a>链接元素（因为<a>元素通常有href属性）和其他带有href属性的元素（如<area>等）。 - 用途：可以根据元素是否具有某个属性来进行选择。比如，为所有带有
title属性的元素添加一个提示框：$("[title]").attr("data - tooltip", "这是一个提示").mouseenter(function () { $(this).tooltip(); });。
2. 属性值等于选择器
- 语法：
$("[属性名='属性值']") - 示例：
$("[class='myClass']")会选择所有class属性值恰好为myClass的元素。如果有一个元素<div class="myClass"></div>，它会被选中，但<div class="myClass otherClass"></div>不会被选中。 - 用途：用于精准选择属性值完全匹配的元素。比如，选择所有
src属性值为image.jpg的<img>元素：$("[src='image.jpg']").addClass("highlight");。
3.属性值包含选择器
- 语法：
$("[属性名*='属性值']") - 示例：
$("[href*='google']")会选择所有href属性值包含google字样的元素。这可能包括<a href="https://www.google.com">、<a href="https://google - maps.com">等元素。 - 用途：当需要选择属性值中包含特定字符串的元素时很有用。比如，在一个网页中找到所有链接到包含
blog字样网站的<a>元素：$("[href*='blog']").css("color", "blue");。
4.属性值以特定字符串开头选择器
- 语法：
$("[属性名^='属性值开头']") - 示例：
$("[src^='https://']")会选择所有src属性值以https://开头的元素，通常用于选择安全链接的<img>元素或其他资源元素。 - 用途：用于选择属性值具有特定开头的元素。比如，选择所有以
data -开头的自定义属性的元素：$("[id^='data -']").each(function () { console.log($(this).attr("id")); });。
5.属性值以特定字符串结尾选择器
- 语法：
$("[属性名$='属性值结尾']") - 示例：
$("[href$='.pdf']")会选择所有href属性值以.pdf结尾的元素，主要用于选择指向 PDF 文件的链接。 - 用途：可以方便地筛选出具有特定结尾属性值的元素。比如，选择所有
class属性值以- active结尾的元素并添加一个样式：$("[class$='- active']").addClass("highlight - active");。
四、表单选择器
1. 表单元素选择器
- 语法：
$(":input") - 示例：这个选择器会选择所有的表单输入元素，包括
<input>、<textarea>、<select>和<button>。例如，在一个表单中，可以通过$(":input").css("border", "1px solid gray");为所有表单输入元素添加一个灰色边框。 - 用途：用于对整个表单的输入元素进行统一操作，如设置样式、添加事件监听器等。
2. 文本框选择器
- 语法：
$(":text") - 示例：
$(":text")会选择所有类型为文本的<input>元素，如<input type="text">。它不包括<textarea>。可以用于设置文本框的默认值，如$(":text").val("请输入内容");。 - 用途：主要用于对文本输入框进行特定操作，如验证输入内容、设置格式等。
3. 密码框选择器
- 语法：
$(":password") - 示例：选择所有密码输入框（
<input type="password">）。可以用于设置密码框的安全提示，如$(":password").attr("placeholder", "请输入密码");。 - 用途：用于对密码框进行特殊操作，如增强安全性相关的设置、验证密码强度等。
4. 单选按钮选择器
- 语法：
$(":radio") - 示例：选择所有单选按钮（
<input type="radio">）。可以用于检查单选按钮的选中状态，如$(":radio").each(function () { if ($(this).is(":checked")) { console.log("选中的单选按钮的值：" + $(this).val()); } });。 - 用途：方便对单选按钮组进行操作，如获取选中的值、设置默认选中项等。
5. 复选框选择器
- 语法：
$(":checkbox") - 示例：选择所有复选框（
<input type="checkbox">）。可以用于批量操作复选框，如全选或全不选操作：var allCheckBoxes = $(":checkbox"); function checkAll() { allCheckBoxes.prop("checked", true); } function uncheckAll() { allCheckBoxes.prop("checked", false); }。 - 用途：用于对复选框组进行操作，包括统计选中数量、设置选中状态等。
6. 提交按钮选择器
- 语法：
$(":submit") - 示例：选择所有表单提交按钮（
<input type="submit">和<button type="submit">）。可以用于为提交按钮添加点击事件，如$(":submit").click(function () { console.log("表单提交"); });。 - 用途：用于处理表单提交相关操作，如验证表单数据、提交表单数据到服务器等。
7. 重置按钮选择器
- 语法：
$(":reset") - 示例：选择所有表单重置按钮（
<input type="reset">和<button type="reset">）。可以用于为重置按钮添加点击事件，如$(":reset").click(function () { console.log("表单重置"); });。 - 用途：用于处理表单重置相关操作，如清除表单输入内容、恢复表单初始状态等。