当前位置：首页 > jquery

js jquery

2026-01-13 15:33:19jquery

jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器，提供易于使用的 API，使开发者能够更高效地操作 DOM 和处理事件。

jQuery 的基本用法

引入 jQuery

在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从 CDN 加载或下载本地文件：

<!-- 使用 CDN 引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

基本语法

jQuery 的核心是通过 $ 或 jQuery 函数选择元素并执行操作：

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

选择器

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

$("#id")         // 通过 ID 选择
$(".class")      // 通过类名选择
$("div")         // 通过标签名选择
$("div p")       // 层级选择器
$("input[type='text']") // 属性选择器

DOM 操作

常见的 DOM 操作方法：

$("#element").text("新内容");    // 设置文本内容
$("#element").html("<b>加粗文本</b>"); // 设置 HTML
$("#element").val("输入值");     // 设置表单值
$("#element").attr("href", "https://example.com"); // 设置属性

事件处理

绑定事件的方法：

$("#btn").click(function() { 
    alert("按钮被点击"); 
});

$("#input").keyup(function() {
    console.log($(this).val()); // 输入框内容变化时触发
});

Ajax 请求

通过 $.ajax() 或简写方法（如 $.get、$.post）发送异步请求：

$.ajax({
    url: "api/data",
    method: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

// 简写形式
$.get("api/data", function(response) {
    console.log(response);
});

动画效果

内置动画方法：

js jquery

$("#box").hide(1000);          // 淡出
$("#box").show(1000);         // 淡入
$("#box").toggle(1000);       // 切换显示/隐藏
$("#box").fadeIn(1000);       // 淡入效果
$("#box").slideUp(1000);      // 向上滑动隐藏

注意事项

链式调用：jQuery 支持链式操作，例如 $("#div").css("color", "red").slideUp(1000);。
性能优化：避免频繁操作 DOM，优先缓存选择器结果（如 var $element = $("#element");）。
现代替代方案：随着原生 JavaScript 的改进（如 querySelector、fetch），jQuery 的使用逐渐减少，但在旧项目或简化开发时仍具价值。

如需进一步学习，可参考 jQuery 官方文档。