jQuery 语法

通过 jQuery，您可以选取（查询）HTML 元素，并对它们执行"操作"。它的核心语法只有一句话：$(选择器).动作()。这一节我们把它拆开讲清楚。

基础语法

jQuery 语法是为选取 HTML 元素和操作元素而生的：

$(selector).action()

$：定义 jQuery，等价于 jQuery。
selector：使用 CSS 选择器语法查找 HTML 元素。
action()：对选中的元素执行的操作，例如 hide() 隐藏、css() 设置样式。

几个常见示例：

$(this).hide();        // 隐藏当前元素
$('p').hide();         // 隐藏所有 <p> 元素
$('.test').hide();     // 隐藏所有 class="test" 的元素
$('#test').hide();     // 隐藏 id="test" 的那个元素

文档就绪事件

为了防止在文档完全加载前就运行 jQuery 代码（此时元素还不存在，操作会失败），应把代码放在文档就绪事件里：

// 写法一：完整形式
$(document).ready(function () {
    // 页面加载完成后执行的代码
});

// 写法二：简写形式（效果相同）
$(function () {
    // 页面加载完成后执行的代码
});

实际开发中写法二更常见，本教程后面的示例都默认包在 $(function () { ... }) 里。

完整示例

下面这个例子演示了"选取 + 操作"的完整流程。把代码存成 .html 文件双击打开即可运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 引入 jQuery（https://example.com 为占位地址，实际使用时请替换为真实 CDN 或本地文件） -->
<script src="https://example.com/jquery.min.js"></script>
</head>
<body>
<p>第一段：普通段落</p>
<p class="test">第二段：class 为 test</p>
<p id="one">第三段：id 为 one</p>
<button id="go">开始演示</button>

<script>
// 文档就绪后绑定按钮事件
$(function () {
    $('#go').click(function () {
        $('p').css('background', '#ffe08a');   // 效果：所有段落变黄底
        $('.test').css('color', 'blue');        // 效果：第二段文字变蓝
        $('#one').css('font-weight', 'bold');   // 效果：第三段文字加粗
    });
});
</script>
</body>
</html>

$ 与 jQuery 的关系

$ 只是 jQuery 的简写别名，二者完全等价：

$('#box').hide();
// 等价于
jQuery('#box').hide();

当页面里同时使用了其他也占用 $ 的库（如 Prototype）时，可以改用 jQuery 全名，或用后面要讲的 noConflict() 解决冲突。

小结

记住 $(选择器).动作() 这个万能句式：先选中元素，再对它执行操作；所有代码放进文档就绪事件里，就能安全地写出 jQuery 交互了。

笔记加载中…

标签：#jQuery

返回知识库