当前位置：首页 > jquery

jquery案例

2026-03-02 17:44:16jquery

jquery案例

以下是一些常见的 jQuery 案例，涵盖 DOM 操作、事件处理、动画效果及 AJAX 请求等典型应用场景：

基础 DOM 操作

// 修改元素内容
$("#elementId").text("新的文本内容");

// 修改 HTML 结构
$("#container").html("<p>动态插入的段落</p>");

// 添加/移除类名
$("#button").addClass("active");
$("#button").removeClass("inactive");

事件绑定与处理

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

// 表单提交事件
$("#form").submit(function(e) {
    e.preventDefault();
    console.log("表单提交阻止默认行为");
});

// 动态事件委托
$("#parent").on("click", ".child", function() {
    $(this).toggleClass("highlight");
});

动画效果

// 显示/隐藏元素
$("#box").fadeIn(1000);
$("#box").fadeOut(500);

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

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

AJAX 请求

// GET 请求
$.get("api/data", function(response) {
    console.log("获取数据:", response);
});

// POST 请求
$.post("api/save", { name: "John" }, function(result) {
    alert("保存成功: " + result);
});

// 完整 AJAX 配置
$.ajax({
    url: "api/user",
    type: "PUT",
    data: { id: 1 },
    success: function(data) {
        console.log("更新结果:", data);
    },
    error: function(xhr) {
        console.error("请求失败:", xhr.status);
    }
});

实用工具函数

// 遍历元素
$(".items").each(function(index) {
    console.log(index, $(this).text());
});

// 扩展对象
const settings = $.extend({}, defaults, options);

// 检测浏览器类型
if ($.browser.webkit) {
    console.log("WebKit 内核浏览器");
}

插件使用示例

// 使用日期选择器插件
$("#datepicker").datepicker({
    format: "yyyy-mm-dd"
});

// 自定义简单插件
$.fn.highlight = function(color) {
    return this.css("background-color", color || "#ffff99");
};
$("p").highlight();

这些案例展示了 jQuery 的核心功能，实际开发中可根据需求组合使用。注意 jQuery 3.0+ 版本移除了部分过时 API（如 $.browser），推荐使用现代替代方案。