当前位置：首页 > jquery

jquery用法

2026-04-07 23:12:16jquery

jQuery 基本用法

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

引入 jQuery

在 HTML 文件中引入 jQuery 库，可以通过 CDN 或本地文件引入。推荐使用 CDN 方式：

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

选择器

jQuery 使用 CSS 选择器来选取元素。以下是一些常见的选择器示例：

// 选取所有段落元素
$("p");

// 选取 ID 为 "myId" 的元素
$("#myId");

// 选取类名为 "myClass" 的元素
$(".myClass");

// 选取所有 div 元素中的段落元素
$("div p");

事件处理

jQuery 简化了事件处理，可以通过简洁的语法绑定事件：

jquery用法

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

// 鼠标悬停事件
$("#myElement").hover(
    function() {
        $(this).css("background-color", "yellow");
    },
    function() {
        $(this).css("background-color", "white");
    }
);

DOM 操作

jQuery 提供了丰富的 DOM 操作方法：

// 获取或设置元素内容
$("#myElement").text("新内容");
var content = $("#myElement").text();

// 获取或设置 HTML 内容
$("#myElement").html("<strong>加粗文本</strong>");
var htmlContent = $("#myElement").html();

// 添加类
$("#myElement").addClass("highlight");

// 移除类
$("#myElement").removeClass("highlight");

// 切换类
$("#myElement").toggleClass("highlight");

动画效果

jQuery 提供了简单的动画效果：

// 隐藏元素
$("#myElement").hide();

// 显示元素
$("#myElement").show();

// 淡入
$("#myElement").fadeIn();

// 淡出
$("#myElement").fadeOut();

// 滑动效果
$("#myElement").slideUp();
$("#myElement").slideDown();

Ajax 请求

jQuery 简化了 Ajax 请求：

jquery用法

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

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

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

链式调用

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

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

遍历元素

jQuery 提供了多种遍历元素的方法：

// each 方法
$("li").each(function(index) {
    console.log(index + ": " + $(this).text());
});

// 查找子元素
$("ul").find("li").css("color", "blue");

// 过滤元素
$("li").filter(".highlight").css("font-weight", "bold");

实用工具方法

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

// 检查类型
$.isArray([1, 2, 3]); // true

// 合并对象
var newObj = $.extend({}, obj1, obj2);

// 遍历对象
$.each(obj, function(key, value) {
    console.log(key + ": " + value);
});

以上是 jQuery 的基本用法，涵盖了选择器、事件处理、DOM 操作、动画效果、Ajax 请求等常见功能。

标签: jquery