jQuery的简单使用示例

朋友们，你们忙，我先溜了

于 2023-05-05 20:37:59 发布

阅读量175

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/JimmyWangJimmy/article/details/130514825

版权

一个简单的 jQuery 示例，演示了如何使用 jQuery 来为按钮添加点击事件监听器，并在点击时显示一个弹框：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="my-button">点击我</button>

  <script src="./main.js"></script>
</body>
</html>

在这个 HTML 代码中，我们引入了 jQuery 库，并在页面中添加了一个按钮元素，其 id 为 "my-button"。

JavaScript 代码（main.js）：

$(document).ready(function() {
  // 获取按钮元素，并添加点击事件监听器
  $('#my-button').click(function() {
    // 在点击时显示一个弹框
    alert('你点击了按钮！');
  });
});

在这个 JavaScript 代码中，我们首先使用 $(document).ready() 方法来等待页面加载完成后再执行代码。接下来，我们使用 jQuery 选择器获取了按钮元素，并使用 click() 方法为其添加了一个点击事件监听器。当用户点击按钮时，我们使用 alert() 方法显示一个弹框。

通过这个简单的示例，我们可以看到，使用 jQuery 可以方便地获取页面元素，并为其添加事件监听器，从而实现交互效果。

朋友们，你们忙，我先溜了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的简单使用示例

在这个 JavaScript 代码中，我们首先使用 $(document).ready() 方法来等待页面加载完成后再执行代码。接下来，我们使用 jQuery 选择器获取了按钮元素，并使用 click() 方法为其添加了一个点击事件监听器。在这个 HTML 代码中，我们引入了 jQuery 库，并在页面中添加了一个按钮元素，其 id 为 "my-button"。通过这个简单的示例，我们可以看到，使用 jQuery 可以方便地获取页面元素，并为其添加事件监听器，从而实现交互效果。
复制链接

扫一扫