27149
jQuery 是一个非常流行的 JavaScript 库，它提供了许多实用的效果和功能，让我们可以更加轻松地开发 Web 应用程序。在本文中，我们将介绍一些 jQuery 的效果，包括动画效果、事件处理、DOM 操作等。
首先，让我们看一下如何使用 jQuery 实现简单的动画效果。下面的代码演示了如何在点击按钮时将一个 div 元素向右移动 200 像素的动画效果：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Animation Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
$(document).ready(function() {
$("#move").click(function() {
$("#box").animate({left: '200px'}, "slow");
});
});
</script>
</head>
<body>
<div id="box"></div>
<button id="move">Move</button>
</body>
</html>代码注释：
- 第 4 行：引入 jQuery 库的 JavaScript 文件。
- 第 6-15 行：定义一个样式为红色的 div 元素，并设置其初始位置为左上角。
- 第 17-22 行：在文档加载完成后，绑定一个点击事件处理程序。当点击按钮时，调用 animate() 方法，将 box 元素的 left 属性从 0 移动到 200 像素，动画时间为 “slow”。
- 第 24-25 行：定义一个包含按钮和 div 元素的简单页面。
接下来，让我们看一下如何使用 jQuery 处理事件。下面的代码演示了如何在输入框中输入文本时，动态地更新另一个元素的文本内容：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Event Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#name").on("input", function() {
var name = $(this).val();
$("#greeting").text("Hello, " + name + "!");
});
});
</script>
</head>
<body>
<label for="name">Name:</label>
<input type="text" id="name">
<div id="greeting"></div>
</body>
</html>
微信扫一扫 
支付宝扫一扫