jQUery(基本介绍+示例代码）

最新推荐文章于 2024-04-27 18:00:34 发布

Keep forward upup

最新推荐文章于 2024-04-27 18:00:34 发布

阅读量209

点赞数

分类专栏：前端web Java基础文章标签： jquery okhttp 前端

本文链接：https://blog.csdn.net/weixin_45594172/article/details/134529605

版权

Java基础同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

前端web

8 篇文章 0 订阅

订阅专栏

一、JQUery基本介绍和特点

jQuery 是一个快速、轻量级、跨浏览器的 JavaScript 库。它简化了在网页开发中处理诸多任务的过程，提供了易于使用的 API，使得开发者能够更容易地操作 HTML 文档、处理事件、执行动画、发送 AJAX 请求等。

以下是一些 jQuery 的主要特点：

简化 DOM 操作： jQuery 提供了简洁而强大的 DOM 操作方法，使得选择元素、修改内容、添加/移除元素等操作更加便捷。
事件处理： 提供了简单而一致的事件处理机制，使得添加和移除事件处理程序变得容易。
动画和效果： 提供了丰富的动画和效果方法，例如淡入淡出、滑动、隐藏显示等，简化了实现动态效果的过程。
AJAX： 简化了使用 AJAX 进行异步通信的过程，通过 $.ajax() 方法方便地发送 HTTP 请求。
跨浏览器兼容性： jQuery 处理了许多浏览器兼容性问题，使得开发者可以更加专注于功能的实现而不必过多关注浏览器差异。
链式操作： 支持链式调用，可以在一行代码中执行多个操作，提高了代码的简洁性。
插件架构： 允许开发者通过编写插件来扩展 jQuery 的功能，使得社区能够共享和重用各种实用工具。
轻量级： jQuery 的文件体积相对较小，加载速度快，适用于各种网络环境。
丰富的文档： jQuery 提供了详细而易懂的官方文档，方便开发者学习和参考。

尽管现代前端开发中有更多使用原生 JavaScript 或其他框架的趋势，但 jQuery 仍然在许多项目中得到广泛使用，尤其是在早期的网页开发中。在使用 jQuery 时，建议使用最新版本，并根据项目的实际需求选择是否使用。

二、JQUery示例\

当使用 jQuery 时，以下是一些简单的示例，展示了一些常见的操作，如选择元素、修改内容、处理事件等。这些示例假设已经在 HTML 文档中引入了 jQuery 库。你可以通过从 jQuery 官方网站下载最新版本的 jQuery 或使用 CDN 引入。

1. 选择元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myDiv">Hello, jQuery!</div>

<script>
// 选择元素并修改内容
$(document).ready(function(){
  $("#myDiv").text("Hello, New Content!");
});
</script>

</body>
</html>

2. 处理事件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

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

<script>
// 处理点击事件
$(document).ready(function(){
  $("#myButton").click(function(){
    alert("按钮被点击了！");
  });
});
</script>

</body>
</html>

3. 动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #myBox {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>

<div id="myBox"></div>

<script>
// 使用动画效果
$(document).ready(function(){
  $("#myBox").animate({
    width: "200px",
    height: "200px",
    opacity: 0.5
  }, 1000);
});
</script>

</body>
</html>