理论讲解
什么是jQuery选择器？
jQuery选择器是jQuery库中用于选择DOM元素的一种机制，它允许开发者使用简洁的语法来定位和操作HTML文档中的元素。jQuery选择器基于CSS选择器语法，并扩展了一些自定义选择器，使元素选择更加灵活和强大。
jQuery选择器的优势
- 简洁的语法：jQuery选择器语法简洁明了，使代码更加易读和易维护。
- 强大的功能：jQuery选择器支持多种选择方式，可以精确选择各种复杂的DOM结构。
- 跨浏览器兼容：jQuery选择器解决了不同浏览器之间的兼容性问题。
- 链式调用：选择器返回的jQuery对象支持链式调用，使代码更加简洁。
基本选择器
基本选择器是jQuery中最常用的选择器，包括元素选择器、ID选择器、类选择器、通配符选择器和多元素选择器。
| 选择器 | 描述 | 示例 |
|---|---|---|
| 元素选择器 | 选择指定类型的所有元素 | $('p') |
| ID选择器 | 选择具有指定ID的元素 | $('\#demo') |
| 类选择器 | 选择具有指定类的所有元素 | $('.test') |
| 通配符选择器 | 选择所有元素 | $('*') |
| 多元素选择器 | 选择多个指定的元素 | $('p, div, span') |
层次选择器
层次选择器用于根据元素之间的层次关系选择元素，包括后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器。
| 选择器 | 描述 | 示例 |
|---|---|---|
| 后代选择器 | 选择指定元素的所有后代元素 | $('div p') |
| 子元素选择器 | 选择指定元素的直接子元素 | $('div > p') |
| 相邻兄弟选择器 | 选择指定元素的下一个相邻兄弟元素 | $('div + p') |
| 通用兄弟选择器 | 选择指定元素的所有兄弟元素 | $('div ~ p') |
过滤选择器
过滤选择器用于根据元素的状态或位置来过滤元素，包括基本过滤选择器、内容过滤选择器、可见性过滤选择器和属性过滤选择器等。
基本过滤选择器
| 选择器 | 描述 | 示例 |
|---|---|---|
| :first | 选择第一个元素 | $('p:first') |
| :last | 选择最后一个元素 | $('p:last') |
| :eq(index) | 选择指定索引的元素 | $('p:eq(2)') |
| :gt(index) | 选择索引大于指定值的元素 | $('p:gt(2)') |
| :lt(index) | 选择索引小于指定值的元素 | $('p:lt(2)') |
| :even | 选择索引为偶数的元素 | $('p:even') |
| :odd | 选择索引为奇数的元素 | $('p:odd') |
表单选择器
表单选择器用于选择表单元素，包括输入框、按钮、复选框等。
| 选择器 | 描述 | 示例 |
|---|---|---|
| :input | 选择所有表单元素 | $(':input') |
| :text | 选择所有文本输入框 | $(':text') |
| :password | 选择所有密码输入框 | $(':password') |
| :radio | 选择所有单选按钮 | $(':radio') |
| :checkbox | 选择所有复选框 | $(':checkbox') |
| :submit | 选择所有提交按钮 | $(':submit') |
| :button | 选择所有按钮 | $(':button') |
代码示例
示例1：基本选择器的使用
<!DOCTYPE html>
<html>
<head>
<title>jQuery基本选择器示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 元素选择器：选择所有p元素并修改其内容
$("p").text("Hello jQuery!");
// ID选择器：选择id为demo的元素并修改其背景色
$("#demo").css("background-color", "yellow");
// 类选择器：选择class为test的元素并添加边框
$(".test").css("border", "1px solid red");
// 多元素选择器：选择所有p和div元素并添加内边距
$("p, div").css("padding", "10px");
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p class="test">这是一个带有class的段落。</p>
<p id="demo">这是一个带有id的段落。</p>
<div>这是一个div元素。</div>
</body>
</html>
示例2：层次选择器的使用
<!DOCTYPE html>
<html>
<head>
<title>jQuery层次选择器示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 后代选择器：选择div内的所有p元素
$("div p").css("color", "blue");
// 子元素选择器：选择div的直接子元素p
$("div > p").css("font-weight", "bold");
// 相邻兄弟选择器：选择p后的第一个div元素
$("p + div").css("background-color", "lightgray");
// 通用兄弟选择器：选择p后的所有div元素
$("p ~ div").css("margin-top", "10px");
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<div>
<p>这是div内的段落。</p>
<span>
<p>这是div内span内的段落。</p>
</span>
</div>
<div>这是另一个div元素。</div>
</body>
</html>
示例3：过滤选择器的使用
<!DOCTYPE html>
<html>
<head>
<title>jQuery过滤选择器示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 基本过滤选择器
$("p:first").css("color", "red");
$("p:last").css("color", "green");
$("p:eq(2)").css("color", "blue");
$("p:even").css("background-color", "lightgray");
// 内容过滤选择器
$("p:contains('jQuery')").css("font-weight", "bold");
// 可见性过滤选择器
$("p:hidden").show();
// 属性过滤选择器
$("[href]").css("text-decoration", "none");
$("[href='https://www.jquery.com']").css("color", "orange");
});
</script>
</head>
<body>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落，包含jQuery关键字。</p>
<p>这是第四个段落。</p>
<p style="display: none;">这是一个隐藏的段落。</p>
<a href="https://www.jquery.com">jQuery官网</a>
<a href="https://www.google.com">Google</a>
</body>
</html>
实践案例
案例：表格行选择器
使用jQuery选择器实现一个表格行选择器，支持单击选择行、全选/取消全选功能。
<!DOCTYPE html>
<html>
<head>
<title>表格行选择器</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
tr.selected {
background-color: #e3f2fd;
}
.select-all {
margin: 10px 0;
}
</style>
<script>
$(document).ready(function() {
// 全选/取消全选
$('#select-all').click(function() {
const isChecked = $(this).prop('checked');
$('.row-checkbox').prop('checked', isChecked);
if (isChecked) {
$('tbody tr').addClass('selected');
} else {
$('tbody tr').removeClass('selected');
}
});
// 单击选择行
$('tbody tr').click(function(event) {
// 避免点击复选框时触发行点击事件
if (!$(event.target).is(':checkbox')) {
const checkbox = $(this).find('.row-checkbox');
checkbox.prop('checked', !checkbox.prop('checked'));
$(this).toggleClass('selected');
}
});
// 复选框变化时更新行状态
$('.row-checkbox').change(function() {
const row = $(this).closest('tr');
if ($(this).prop('checked')) {
row.addClass('selected');
} else {
row.removeClass('selected');
}
// 更新全选复选框状态
const allChecked = $('.row-checkbox:checked').length === $('.row-checkbox').length;
$('#select-all').prop('checked', allChecked);
});
});
</script>
</head>
<body>
</body>
</html>
| 姓名 | 年龄 | 城市 | |
|---|---|---|---|
| 张三 | 25 | 北京 | |
| 李四 | 30 | 上海 | |
| 王五 | 28 | 广州 | |
| 赵六 | 35 | 深圳 |
互动练习
练习：选择器测试器
创建一个选择器测试器，使用jQuery选择器来选择指定的元素。
- 在输入框中输入jQuery选择器（如p、#demo、.test等）
- 点击"测试选择器"按钮，查看选择器匹配的元素
- 点击"清除选择"按钮，清除所有高亮显示
这是一个普通段落。
这是一个带有id的段落。
这是一个带有class的段落。
这是div内的段落。
推荐链接
相关教程
- jQuery基础概念 - 了解jQuery的基本概念、优势和安装方法，掌握jQuery的基本语法和工作原理。
- jQuery DOM操作 - 掌握jQuery的DOM操作方法，包括元素的创建、修改、删除和属性操作等。
- jQuery事件处理 - 学习jQuery的事件处理机制，包括事件绑定、事件委托和自定义事件等。