Appearance
第3章：jQuery 核心语法与选择器（核心中的核心）
3.1 jQuery 核心语法结构（$(selector).action()，牢记格式）
jQuery的核心语法结构非常简洁明了，遵循$(selector).action()的格式：
$：jQuery的别名，用于选择元素(selector)：选择器，用于定位DOM元素.action()：方法，对选中的元素执行操作
语法示例：
javascript
// 选择id为btn的元素，并绑定点击事件
$('#btn').click(function() {
// 执行操作
});
// 选择class为item的元素，并修改样式
$('.item').css('color', 'red');
// 选择所有p元素，并修改文本内容
$('p').text('新文本');链式调用：
jQuery支持方法链式调用，可以在一个语句中执行多个操作：
javascript
// 链式调用示例
$('#btn')
.text('点击我')
.css('background-color', 'blue')
.click(function() {
alert('按钮被点击了');
});3.2 美元符号 $ 的含义（jQuery的别名，与jQuery关键字等价）
$是jQuery的别名，与jQuery关键字完全等价。在jQuery库中，$被定义为jQuery的简写形式。
示例：
javascript
// 使用$符号
$('#id').text('内容');
// 使用jQuery关键字（与上面等价）
jQuery('#id').text('内容');解决$冲突：
如果页面中其他库也使用了$符号，可能会导致冲突。此时可以使用jQuery.noConflict()方法解决：
javascript
// 释放$的控制权
const jq = jQuery.noConflict();
// 使用jq代替$
jq('#id').text('内容');3.3 基础选择器（高频使用，重点掌握）
ID选择器（#id）：选中单个元素
- 语法：
$('#id') - 作用：根据元素的id属性选中单个元素
- 示例：javascript
// 选中id为header的元素 $('#header').css('background-color', 'gray');
类选择器（.class）：选中多个同类元素
- 语法：
$('.class') - 作用：根据元素的class属性选中多个元素
- 示例：javascript
// 选中所有class为item的元素 $('.item').css('color', 'blue');
元素选择器（element）：选中指定标签元素
- 语法：
$('element') - 作用：根据HTML标签名选中元素
- 示例：javascript
// 选中所有p元素 $('p').text('新文本');
通配符选择器（*）：选中所有元素（慎用）
- 语法：
$('*') - 作用：选中页面中的所有元素
- 注意：性能较差，尽量避免使用
- 示例：javascript
// 选中所有元素 $('*').css('box-sizing', 'border-box');
组合选择器（多选择器组合，如#id .class）
- 语法：
$('selector1, selector2, selector3') - 作用：同时选中多个不同类型的元素
- 示例：javascript
// 同时选中id为header、class为item和所有p元素 $('#header, .item, p').css('margin', '10px');
3.4 层级选择器（按DOM层级选择，常用）
后代选择器（parent child）：选中父元素下所有后代
- 语法：
$('parent child') - 作用：选中父元素下的所有后代元素（包括直接子元素和嵌套的子元素）
- 示例：javascript
// 选中ul下的所有li元素 $('ul li').css('list-style', 'none');
子选择器（parent > child）：选中父元素下直接子元素
- 语法：
$('parent > child') - 作用：只选中父元素的直接子元素，不包括嵌套的子元素
- 示例：javascript
// 只选中ul的直接子元素li $('ul > li').css('color', 'red');
相邻兄弟选择器（prev + next）：选中相邻的下一个元素
- 语法：
$('prev + next') - 作用：选中紧邻在prev元素后面的next元素
- 示例：javascript
// 选中h1后面紧邻的p元素 $('h1 + p').css('font-weight', 'bold');
3.5 过滤选择器（筛选指定元素，简化操作）
基本过滤（:first、:last、:eq(index)、:odd、:even）
:first：选中第一个元素
javascript// 选中第一个p元素 $('p:first').css('color', 'red');:last：选中最后一个元素
javascript// 选中最后一个p元素 $('p:last').css('color', 'blue');:eq(index)：选中指定索引的元素（索引从0开始）
javascript// 选中第二个p元素（索引为1） $('p:eq(1)').css('color', 'green');:odd：选中索引为奇数的元素
javascript// 选中索引为奇数的tr元素 $('tr:odd').css('background-color', '#f2f2f2');:even：选中索引为偶数的元素
javascript// 选中索引为偶数的tr元素 $('tr:even').css('background-color', '#ffffff');
内容过滤（:empty、:contains(text)）
:empty：选中没有子元素和文本内容的元素
javascript// 选中空的div元素 $('div:empty').css('height', '20px');:contains(text)：选中包含指定文本的元素
javascript// 选中包含"jQuery"文本的p元素 $('p:contains("jQuery")').css('color', 'red');
可见性过滤（:visible、:hidden）
:visible：选中可见的元素
javascript// 选中可见的div元素 $('div:visible').css('border', '1px solid red');:hidden：选中隐藏的元素
javascript// 选中隐藏的div元素 $('div:hidden').show();
3.6 实操案例：用不同选择器选中页面元素，验证效果
案例：选择器练习
HTML结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery选择器练习</title>
<style>
.item { margin: 10px; padding: 10px; border: 1px solid #ccc; }
.highlight { background-color: yellow; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<h1>选择器练习</h1>
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">包含jQuery的项目</div>
<div class="item"></div> <!-- 空元素 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
<button id="testBtn">测试选择器</button>
<script>
$(document).ready(function() {
$('#testBtn').click(function() {
// 测试ID选择器
$('#container').css('border', '2px solid blue');
// 测试类选择器
$('.item').css('border-color', 'green');
// 测试元素选择器
$('h1').css('color', 'red');
// 测试后代选择器
$('#container li').css('list-style', 'none');
// 测试子选择器
$('#container > .item').addClass('highlight');
// 测试基本过滤选择器
$('.item:first').css('font-weight', 'bold');
$('.item:last').css('font-style', 'italic');
$('.item:eq(1)').css('color', 'purple');
// 测试内容过滤选择器
$('.item:contains("jQuery")').css('text-decoration', 'underline');
$('.item:empty').css('background-color', 'gray');
});
});
</script>
</body>
</html>测试步骤：
- 保存文件为
selector-practice.html - 用浏览器打开该文件
- 点击"测试选择器"按钮
- 观察页面元素的变化，验证各种选择器的效果
3.7 新手易错点：选择器语法错误、选中不到元素的排查方法
常见错误：
选择器语法错误：
- 忘记添加#或.前缀
- 选择器拼写错误
- 层级选择器语法错误
选中不到元素：
- DOM未加载完成
- 选择器与元素不匹配
- 元素在iframe中
- 动态生成的元素
排查方法：
检查选择器语法：
- 确认选择器格式正确
- 使用浏览器开发者工具检查元素
检查DOM加载：
- 确保代码在入口函数内
- 检查元素是否在代码执行时已存在
使用console.log调试：
javascript// 检查选择器是否选中元素 console.log('选中元素数量：', $('.nonexistent').length); // 打印选中的元素 console.log('选中的元素：', $('.item'));检查动态元素：
- 使用事件委托
- 在元素生成后再绑定事件
检查iframe：
- 需要先获取iframe的内容文档
javascriptconst iframe = $('#myiframe')[0]; const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; const iframeElement = $(iframeDoc).find('.element');
实例：排查选择器问题
javascript
$(document).ready(function() {
// 检查DOM是否加载完成
console.log('DOM加载状态：', document.readyState);
// 检查选择器是否正确
const $element = $('#myElement');
console.log('选中元素：', $element);
console.log('元素数量：', $element.length);
// 如果未选中元素，检查元素是否存在
if ($element.length === 0) {
console.log('元素不存在，请检查选择器或DOM结构');
} else {
// 执行操作
$element.text('找到元素了！');
}
});