当前位置：首页 > jquery

使用jquery

2026-03-02 10:40:26jquery

jQuery 基础使用

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的基本用法和常见操作。

引入 jQuery

在 HTML 文件中通过 CDN 引入 jQuery：

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

DOM 操作

通过选择器获取元素并操作：

使用jquery

// 获取元素
$("#id")      // 通过 ID 选择
$(".class")   // 通过类名选择
$("div")      // 通过标签名选择

// 修改内容
$("#element").text("新文本");  // 设置文本
$("#element").html("<b>加粗文本</b>"); // 设置 HTML

// 修改属性
$("#element").attr("href", "https://example.com"); // 设置属性
$("#element").css("color", "red"); // 修改样式

事件处理

绑定和触发事件：

// 点击事件
$("#button").click(function() {
    alert("按钮被点击");
});

// 表单提交事件
$("form").submit(function(event) {
    event.preventDefault(); // 阻止默认提交
    console.log("表单已提交");
});

// 动态事件委托
$(document).on("click", ".dynamic-element", function() {
    console.log("动态元素被点击");
});

Ajax 请求

发送异步 HTTP 请求：

使用jquery

$.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    dataType: "json",
    success: function(response) {
        console.log("请求成功", response);
    },
    error: function(xhr, status, error) {
        console.error("请求失败", error);
    }
});

// 简化写法
$.get("https://api.example.com/data", function(data) {
    console.log(data);
});

$.post("https://api.example.com/submit", { name: "John" }, function(response) {
    console.log(response);
});

动画效果

实现简单的动画：

// 显示/隐藏
$("#element").hide();      // 隐藏元素
$("#element").show();      // 显示元素
$("#element").toggle();    // 切换显示状态

// 滑动效果
$("#element").slideUp();   // 向上滑动隐藏
$("#element").slideDown(); // 向下滑动显示

// 自定义动画
$("#element").animate({
    opacity: 0.5,
    left: "+=50px"
}, 1000); // 1 秒内完成动画

链式调用

jQuery 支持链式调用，允许多个操作连续执行：

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

插件扩展

通过插件扩展 jQuery 功能：

// 示例：自定义插件
$.fn.highlight = function(color) {
    this.css("background-color", color);
    return this; // 保持链式调用
};

// 使用插件
$("#element").highlight("yellow");