当前位置：首页 > jquery

jquery例子

2026-03-02 20:30:35jquery

jQuery 基本选择器示例

使用 jQuery 选择器可以快速定位 DOM 元素。以下是一些常见的选择器示例：

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

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

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

jQuery 事件处理示例

jQuery 提供了简洁的事件绑定方法：

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

// 鼠标悬停事件
$(".item").hover(
    function() { $(this).addClass("hover"); },
    function() { $(this).removeClass("hover"); }
);

jQuery AJAX 请求示例

使用 jQuery 发送 AJAX 请求：

$.ajax({
    url: "api/data",
    method: "GET",
    dataType: "json",
    success: function(data) {
        console.log("获取数据成功:", data);
    },
    error: function(xhr, status, error) {
        console.error("请求失败:", error);
    }
});

jQuery 动画效果示例

实现简单的动画效果：

// 淡入淡出
$("#box").fadeIn(1000).delay(500).fadeOut(1000);

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

// 自定义动画
$("#animate").animate({
    left: "250px",
    opacity: "0.5"
}, 1000);

jQuery DOM 操作示例

常见的 DOM 操作方法：

// 添加元素
$("#container").append("<p>新内容</p>");

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

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

// 获取输入值
var inputVal = $("#username").val();

jQuery 实用工具方法示例

jQuery 提供了一些实用工具函数：

// 遍历数组
$.each([1, 2, 3], function(index, value) {
    console.log(index + ": " + value);
});

// 扩展对象
var settings = { speed: "fast" };
$.extend(settings, { color: "red" });

// 检测类型
if ($.isArray(myVar)) {
    console.log("这是一个数组");
}

jquery例子