jQuery 常见小例汇总

jQuery 是一个流行的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果等常见的 Web 开发任务。下面整理了一些 jQuery 小例子，帮助大家学习和理解 jQuery 的使用方法。

示例一：页面加载事件

当页面加载完成后，执行某些操作是常见的需求，可以使用 jQuery 的 ready() 函数。以下示例演示了如何在页面加载完成后弹出一个提示框：

$(document).ready(function() {
    alert('页面加载完成！');
});

示例二：显示、隐藏和淡入淡出效果

以下示例演示了如何使用 jQuery 显示、隐藏和淡入淡出元素，并设置相应的动画效果：

// 显示元素
$('#myElement').show('slow');

// 隐藏元素
$('#myElement').hide('fast');

// 淡入元素
$('#myElement').fadeIn('slow');

// 淡出元素
$('#myElement').fadeOut('fast');

示例三：响应按钮点击事件

以下示例演示了如何使用 jQuery 响应按钮的点击事件，并执行相应的操作。

HTML 代码：

<button id="myButton">点击我</button>

JavaScript 代码：

$(document).ready(function() {
    $('#myButton').click(function() {
        alert('按钮被点击了！');
    });
});

示例四：动态修改元素内容

以下示例演示了如何使用 jQuery 动态修改元素的内容：

HTML 代码：

<div id="myDiv">原始内容</div>

JavaScript 代码：

$(document).ready(function() {
    $('#myDiv').text('新的内容');
});

以上是 jQuery 常见小例汇总 的一些示例，希望能够帮助大家更好地掌握 jQuery 的使用方法。