探索jQuery：网页交互的利器

// 确保DOM完全加载完成
$(document).ready(function() {
    // 为所有具有class 'clickable' 的元素绑定点击事件
    $('.clickable').click(function() {
        // 当点击元素时，切换其class 'active'
        $(this).toggleClass('active');
    });
 
    // 为id为 'hover-toggle' 的元素绑定鼠标悬停和离开事件
    $('#hover-toggle').hover(function() {
        // 鼠标悬停时，切换class 'hovered'
        $(this).toggleClass('hovered');
    });
 
    // 为所有的提交按钮绑定事件以阻止表单提交
    $('input[type="submit"]').click(function(e) {
        e.preventDefault();
        alert('表单不会被提交！');
    });
 
    // 为id为 'fade-out' 的元素绑定一个事件，当触发时淡出元素
    $('#fade-out').click(function() {
        $(this).fadeOut('slow');
    });
});

这段代码展示了如何使用jQuery来处理常见的交互情境，包括点击事件、悬停事件、阻止表单提交，以及淡出元素等。这些基本的交互模式是学习现代Web开发的一个重要部分。