当前位置：首页 > jquery

jquery案例

2026-02-03 09:43:37jquery

以下是几个实用的 jQuery 案例，涵盖常见的前端交互场景，可直接用于项目或学习参考。

动态加载内容（AJAX）

通过 AJAX 从服务器获取数据并动态更新页面，无需刷新：

$('#loadDataBtn').click(function() {
    $.ajax({
        url: 'api/data',
        type: 'GET',
        success: function(response) {
            $('#contentContainer').html(response);
        },
        error: function(xhr) {
            alert('Error loading data: ' + xhr.status);
        }
    });
});

表单验证

实时验证用户输入并显示错误提示：

$('#submitForm').submit(function(e) {
    e.preventDefault();
    var email = $('#email').val();
    if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(email)) {
        $('#emailError').text('Invalid email format').show();
        return false;
    }
    this.submit(); // 验证通过后提交
});

图片轮播

创建自动切换的图片轮播效果：

let currentIndex = 0;
const slides = $('.slider img');
function showSlide(index) {
    slides.hide().eq(index).fadeIn(500);
}
$('#nextBtn').click(function() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
});
setInterval(function() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
}, 3000);

下拉菜单交互

实现鼠标悬停显示二级菜单：

$('.nav-item').hover(
    function() {
        $(this).find('.submenu').stop().slideDown(200);
    },
    function() {
        $(this).find('.submenu').stop().slideUp(200);
    }
);

元素拖拽

使元素可通过鼠标拖拽移动：

jquery案例

$('.draggable').draggable({
    containment: 'parent',
    cursor: 'move',
    revert: 'invalid'
});
$('.droppable').droppable({
    drop: function(event, ui) {
        $(this).append(ui.draggable);
    }
});

注意事项

使用前需引入 jQuery 库：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
现代浏览器已原生支持部分功能（如 fetch 替代 AJAX），但 jQuery 仍提供兼容性解决方案
动画效果可通过调整参数（如 fadeIn(500) 中的毫秒数）控制速度