当前位置：首页 > jquery

jquery调用方法

2026-03-17 16:35:47jquery

jQuery 调用方法

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

引入 jQuery 库

在 HTML 文件中引入 jQuery 库，可以通过 CDN 或本地文件加载：

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

基本语法

jQuery 的基本语法是通过 $ 符号或 jQuery 关键字调用函数，选择器用于选取 HTML 元素：

$(selector).action()

常用调用方法

选择元素

通过选择器选取元素，类似于 CSS 选择器：

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

事件处理

为元素绑定事件处理函数：

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

DOM 操作

jquery调用方法

修改元素内容或属性：

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

CSS 操作

动态修改元素样式：

$("#id").css("color", "red"); // 修改颜色
$("#id").addClass("highlight"); // 添加类
$("#id").removeClass("highlight"); // 移除类

动画效果

实现简单的动画效果：

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

Ajax 请求

jquery调用方法

发送异步 HTTP 请求：

$.ajax({
    url: "https://example.com/api",
    method: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.error(error);
    }
});

链式调用

jQuery 支持链式调用，可以在一个语句中执行多个操作：

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

实用工具方法

jQuery 提供了一些实用工具方法：

$.trim("  text  "); // 去除字符串两端空格
$.each(array, function(index, value) { // 遍历数组
    console.log(index, value);
});

注意事项

确保在调用 jQuery 方法之前已正确加载 jQuery 库。
使用 $(document).ready() 确保 DOM 完全加载后再执行 jQuery 代码：
```
$(document).ready(function() {
  // jQuery 代码
});
```
简写形式：
```
$(function() {
  // jQuery 代码
});
```

通过以上方法，可以高效地使用 jQuery 进行 DOM 操作、事件处理、动画和 Ajax 交互。