目录
一、基本选择器
1. 标签选择器（元素选择器）
2. ID 选择器
3. 类选择器
4. 通配符选择器
二、层次选择器
1. 后代选择器
2. 子选择器
3. 相邻兄弟选择器
4. 一般兄弟选择器
三、属性选择器
1. 简单属性选择器
2. 属性值等于选择器
3.属性值包含选择器
4.属性值以特定字符串开头选择器
5.属性值以特定字符串结尾选择器
四、表单选择器
1. 表单元素选择器
2. 文本框选择器
3. 密码框选择器
4. 单选按钮选择器
5. 复选框选择器
6. 提交按钮选择器
7. 重置按钮选择器
开发时遇到些不太好获取的元素时，需要去查获取元素的方式，由此总结了一下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("表单重置"); });。 - 用途：用于处理表单重置相关操作，如清除表单输入内容、恢复表单初始状态等。
