当前位置：首页 > jquery

jquery入门

2026-03-16 08:52:37jquery

jQuery 入门指南

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是入门 jQuery 的基本步骤和核心功能。

引入 jQuery

在 HTML 文件中通过 CDN 引入 jQuery。推荐使用最新版本（如 3.6.0）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

也可以下载 jQuery 文件并本地引入：

<script src="path/to/jquery.min.js"></script>

基本语法

jQuery 的核心是通过选择器选取 DOM 元素并对其操作。语法结构为 $(selector).action()：

$(document).ready(function() {
    // 文档加载完成后执行代码
    $("button").click(function() {
        $("p").hide(); // 点击按钮时隐藏所有段落
    });
});

常用选择器

jQuery 使用 CSS 选择器语法选取元素：

$("#id")：通过 ID 选取元素。
$(".class")：通过类名选取元素。
$("element")：通过标签名选取元素。
$("parent > child")：选取直接子元素。

示例：

$("#header").css("color", "red"); // 设置 ID 为 header 的元素文字颜色为红色
$(".item").fadeOut(); // 隐藏所有类名为 item 的元素

DOM 操作

jQuery 提供了丰富的 DOM 操作方法：

获取或设置内容：

$("#div").text(); // 获取文本内容
$("#div").html("<p>New content</p>"); // 设置 HTML 内容

修改属性：

$("#img").attr("src", "new-image.jpg"); // 修改图片的 src 属性

添加或移除元素：

$("#list").append("<li>New item</li>"); // 在列表末尾添加项
$("#item").remove(); // 移除元素

事件处理

jQuery 简化了事件绑定：

$("#btn").click(function() {
    alert("Button clicked!");
});

$("input").keypress(function(event) {
    console.log("Key pressed: " + event.key);
});

支持的事件包括 click、dblclick、mouseenter、keypress 等。

动画效果

jQuery 内置了简单的动画方法：

$("#box").hide(1000); // 1 秒内隐藏元素
$("#box").slideUp(); // 向上滑动隐藏
$("#box").fadeIn("slow"); // 淡入显示

可以自定义动画：

$("#box").animate({
    opacity: 0.5,
    left: "+=50px"
}, 1000);

Ajax 请求

jQuery 简化了 Ajax 调用：

$.get("url", function(data) {
    console.log("Data received: " + data);
});

$.post("url", { key: "value" }, function(response) {
    alert("Response: " + response);
});

链式调用

jQuery 支持链式调用，允许多个操作串联：

$("#div")
    .css("color", "blue")
    .slideUp(500)
    .slideDown(500);

插件扩展

jQuery 的插件生态丰富，可以通过引入插件扩展功能。例如，使用 jQuery UI 添加高级交互：

jquery入门

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
    $("#datepicker").datepicker(); // 启用日期选择器
</script>