jQuery 实例

在本章节中，我们将通过一些实际的 jQuery 示例来展示这个强大的库是如何简化前端开发的。在开始之前，请确保你已经引入了 jQuery 库。

示例 1: 隐藏元素

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>jQuery 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="hideButton">隐藏元素</button>
<p id="hideMe">这是一个要隐藏的段营</p>

<script>
$(document).ready(function(){
  $("#hideButton").click(function(){
    $("#hideMe").hide();
  });
});
</script>

</body>
</html>

在这个示例中，当用户点击按钮时，段落元素将被隐藏。这展示了 jQuery 如何通过简单的语法实现元素的操作。

示例 2: 动画效果

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>jQuery 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="animateButton">启动动画</button>
<div id="animatedDiv" style="width: 100px; height: 100px; background-color: red;"></div>

<script>
$(document).ready(function(){
  $("#animateButton").click(function(){
    $("#animatedDiv").animate({left: '250px', opacity: '0.5'}, "slow");
  });
});
</script>

</body>
</html>

在这个示例中，当用户点击按钮时，一个带有动画效果的 div 元素会向右移动并逐渐变为半透明状态。这展示了 jQuery 如何简单地实现动画效果。

以上是本章节的 jQuery 实例，希望通过这些示例能够帮助你更好地理解 jQuery 的强大功能。在接下来的章节中，我们将继续深入学习 jQuery 的更多用法。