当前位置：首页 > jquery

jquery 步骤

2026-02-03 15:40:32jquery

jQuery 基本使用步骤

安装或引入 jQuery
在 HTML 文件中通过 <script> 标签引入 jQuery，可以使用 CDN 或本地文件：

<!-- 使用 CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 或本地文件 -->
<script src="jquery.min.js"></script>

等待 DOM 加载完成
使用 $(document).ready() 或简写形式 $() 确保代码在 DOM 完全加载后执行：

$(document).ready(function() {
    // 代码逻辑
});

// 简写形式
$(function() {
    // 代码逻辑
});

选择元素
使用 jQuery 选择器获取 DOM 元素：

jquery 步骤

// 通过 ID 选择
$("#elementId");

// 通过类名选择
$(".className");

// 通过标签名选择
$("div");

操作元素
对选中的元素进行属性修改、内容更新或样式调整：

// 修改文本内容
$("#elementId").text("新文本");

// 修改 HTML 内容
$("#elementId").html("<strong>加粗文本</strong>");

// 修改 CSS
$("#elementId").css("color", "red");

// 添加或移除类
$("#elementId").addClass("newClass");
$("#elementId").removeClass("oldClass");

事件绑定
使用 .on() 或简写方法（如 .click()）绑定事件：

jquery 步骤

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

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

发送 AJAX 请求
使用 $.ajax() 或简写方法（如 $.get()、$.post()）进行异步请求：

// GET 请求
$.get("https://api.example.com/data", function(response) {
    console.log(response);
});

// POST 请求
$.post("https://api.example.com/submit", { key: "value" }, function(response) {
    console.log(response);
});

// 完整 AJAX 配置
$.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error("请求失败", error);
    }
});

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

$("#elementId")
    .css("color", "blue")
    .text("更新后的文本")
    .addClass("highlight");

动画效果
使用内置动画方法实现动态效果：

// 隐藏与显示
$("#elementId").hide(1000); // 1 秒内隐藏
$("#elementId").show(1000); // 1 秒内显示

// 淡入淡出
$("#elementId").fadeOut(500); // 0.5 秒淡出
$("#elementId").fadeIn(500); // 0.5 秒淡入

// 滑动效果
$("#elementId").slideUp(300); // 0.3 秒上滑隐藏
$("#elementId").slideDown(300); // 0.3 秒下滑显示