当前位置：首页 > jquery

jquery实例

2026-04-08 00:10:05jquery

jquery实例

以下是几个常见的jQuery实例，涵盖基础操作、DOM处理、事件绑定和动画效果等场景：

基础选择器与DOM操作

// 通过ID选择元素并修改内容
$("#myElement").text("Hello, jQuery!");

// 通过类名选择元素并隐藏
$(".myClass").hide();

// 修改所有<p>元素的背景色
$("p").css("background-color", "yellow");

事件处理

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

// 表单提交事件
$("#myForm").submit(function(e) {
    e.preventDefault();
    console.log("Form submitted");
});

// 动态事件委托
$("#parentElement").on("click", ".dynamicChild", function() {
    $(this).toggleClass("active");
});

AJAX请求

// GET请求
$.get("https://api.example.com/data", function(response) {
    $("#result").html(response);
});

// POST请求
$.post("https://api.example.com/save", 
    { name: "John", age: 30 },
    function(data) {
        console.log("Server response:", data);
    }
);

// 使用AJAX加载HTML片段
$("#container").load("partial.html #content");

动画效果

// 淡入淡出
$("#fadeElement").fadeOut(500).fadeIn(500);

// 滑动效果
$(".slideContent").slideUp(300).delay(500).slideDown(300);

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

实用工具方法

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

// 检测浏览器窗口大小
$(window).resize(function() {
    if ($(window).width() < 768) {
        $("body").addClass("mobile");
    }
});

// 延迟执行
$("#delayedAction").delay(2000).fadeOut();

表单处理

// 获取表单值
$("#submitBtn").click(function() {
    var username = $("#username").val();
    var password = $("#password").val();
});

// 表单验证
$("#loginForm").submit(function() {
    if ($("#email").val() === "") {
        $("#email").addClass("error");
        return false;
    }
});

这些实例展示了jQuery的核心功能，实际开发中可根据需求组合使用。注意现代前端开发中，原生JavaScript和框架如React/Vue已逐渐取代jQuery的部分功能，但在遗留项目或简单场景中jQuery仍有其优势。