当前位置：首页 > jquery

jquery代码

2026-04-07 19:21:24jquery

jquery代码

jQuery 代码示例

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是常见的 jQuery 代码示例：

基本语法

$(document).ready(function() {
    // 确保 DOM 完全加载后执行代码
    console.log("DOM is ready");
});

选择元素

// 选择所有段落元素
$("p").css("color", "blue");

// 选择 ID 为 "myId" 的元素
$("#myId").hide();

// 选择 class 为 "myClass" 的元素
$(".myClass").fadeOut();

事件处理

// 点击事件
$("#myButton").click(function() {
    alert("Button clicked!");
});

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

动画效果

// 淡入淡出
$("#myDiv").fadeIn(1000);
$("#myDiv").fadeOut(1000);

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

Ajax 请求

$.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    dataType: "json",
    success: function(response) {
        console.log("Data received:", response);
    },
    error: function(xhr, status, error) {
        console.error("Error:", error);
    }
});

DOM 操作

// 添加元素
$("#myDiv").append("<p>New paragraph</p>");

// 移除元素
$("#myElement").remove();

// 修改属性
$("#myImage").attr("src", "new-image.jpg");

链式调用

$("#myDiv")
    .css("color", "red")
    .slideUp(500)
    .slideDown(500)
    .fadeOut(500);

遍历元素

$("ul li").each(function(index) {
    console.log("Item " + index + ": " + $(this).text());
});

表单处理

$("#myForm").submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    console.log("Form data:", formData);
});

这些示例涵盖了 jQuery 的常见用法，可以根据实际需求进行调整和扩展。