当前位置：首页 > jquery

jquery 使用

2026-03-02 10:38:42jquery

jQuery 基本用法

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的核心用法：

引入 jQuery
在 HTML 文件中通过 <script> 标签引入 jQuery 库：

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

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

$("p") // 选择所有 <p> 元素
$("#id") // 选择 id="id" 的元素
$(".class") // 选择 class="class" 的元素

DOM 操作
修改元素内容或属性：

$("#id").text("新内容"); // 修改文本
$("#id").html("<b>加粗文本</b>"); // 修改 HTML
$("#id").attr("href", "https://example.com"); // 修改属性

事件处理

jQuery 简化了事件绑定，语法为 on() 或直接使用事件方法：

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

// 等效于
$("#button").on("click", function() {
    alert("按钮被点击");
});

动画效果

jQuery 提供内置动画方法：

$("#box").hide(); // 隐藏元素
$("#box").show(); // 显示元素
$("#box").fadeIn(); // 淡入
$("#box").fadeOut(); // 淡出
$("#box").slideUp(); // 向上滑动隐藏

Ajax 请求

jQuery 简化了 Ajax 请求：

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

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

链式调用

jQuery 支持链式调用，连续操作同一组元素：

$("#box")
    .css("color", "red")
    .slideUp()
    .slideDown();

实用工具方法

jQuery 提供工具函数简化常见操作：

$.trim(" 字符串 "); // 去除空格
$.isArray([]); // 检查是否为数组
$.each(array, function(index, value) {
    console.log(index, value);
});

插件扩展

jQuery 支持通过插件扩展功能，例如表单验证插件：

<script src="jquery.validate.min.js"></script>
<script>
    $("#form").validate();
</script>

注意事项

避免过度使用 jQuery，现代浏览器原生 API 已足够强大。
检查 jQuery 版本兼容性，尤其是升级时。
使用 $(document).ready() 确保 DOM 加载完成后再执行脚本：
```
$(document).ready(function() {
    // 代码逻辑
});
```

jquery 使用