jQuery的核心思想是“写得更少，做得更多”，这一理念在其基础语法中体现为简洁的选取元素和操作方式。其中，核心语法结构与链式调用是构成jQuery编程范式的两大基石。掌握这两部分内容，是熟练运用jQuery进行开发的关键。
核心语法结构
jQuery的基础语法结构极为清晰，主要围绕选取页面元素并对它们执行某些操作而展开。其核心格式可归纳为：
$(selector).action()
该格式由三个基本部分组成，各部分的作用如下表所示：
| 组成部分 | 名称 | 功能描述 |
|---|---|---|
$() | 工厂函数 | jQuery的核心函数，用于将DOM元素转换为jQuery对象。只有通过该函数包装后，才能调用jQuery提供的方法。$是jQuery的简写形式。 |
selector | 选择器 | 作为$()函数的参数，用于“查找”页面中的HTML元素。选择器语法与CSS选择器一致，如标签名、类名、ID等。 |
.action() | 方法 | 定义了对选取的元素集合所要执行的特定操作，例如隐藏元素(hide())、显示元素(show())、修改样式(css())等。 |
示例
以下代码选取页面中所有<p>元素，并将它们的文本内容设置为“段落已更新”。
$('p').text('段落已更新');示例
$(this).hide() – 隐藏当前元素
$(“p”).hide() – 隐藏所有段落
$(“.test”).hide() – 隐藏所有 class=”test” 的所有元素
$(“#test”).hide() – 隐藏所有 id=”test” 的元素
提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。
链式调用
示例：
以下通过修改同一元素的多个属性，展示非链式写法与链式写法的差异。
| 写法 | 代码示例 | 特点 |
|---|---|---|
| 非链式 | $('#myElement').css('color', 'red');$('#myElement').show();$('#myElement').text('文本已更新'); | 需要重复选取元素，代码冗余，执行效率较低。 |
| 链式 | $('#myElement').css('color', 'red').show().text('文本已更新'); | 仅选取元素一次，后续方法直接串联，代码简洁，执行效率高。 |
链式调用的优势主要体现在以下几个方面：
| 优势维度 | 说明 |
|---|---|
| 代码简洁 | 避免重复书写选择器和$()函数，使代码量大幅减少。 |
| 性能优化 | 减少了重复查询和包装DOM元素的次数，尤其在选择器复杂时，性能提升更为明显。 |
| 逻辑清晰 | 一系列相关操作串联在一起，阅读代码时可直观地看到对同一组元素依次执行的操作流程。 |
示例：
以下示例展示了链式调用在实际交互中的运用。当按钮被点击时，目标元素的文本、样式和可见性依次被修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链式调用示例</title>
<script src="jquery.js"></script>
<script>
$(function(){
$('#actionBtn').click(function(){
$('#targetBox')
.text('操作已执行') // 修改文本
.css('background-color', '#ff0') // 添加背景色
.fadeIn(500); // 以淡入效果显示
});
});
</script>
</head>
<body>
<div id="targetBox" style="display:none;">原始内容</div>
<button id="actionBtn">执行操作</button>
</body>
</html>在该示例中，$('#targetBox')选取元素后，连续调用了.text()、.css()和.fadeIn()三个方法。每个方法执行完毕均返回当前jQuery对象，使得下一方法得以继续调用，最终以流畅的代码实现了复合效果。
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
// jQuery functions go here
});这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。