【Java 进阶篇】Java Web 开发之 JQuery 快速入门

在这里插入图片描述

嗨，各位小伙伴们！欢迎来到 Java Web 开发的继续学习之旅。在前面的博客中，我们学习了 Servlet、JSP、Filter、Listener 等基础知识，今天我们将进入前端领域，学习一下如何使用 JQuery 来简化和优化我们的前端开发。

1. 为什么使用 JQuery？

在众多的 JavaScript 框架和库中，JQuery 是最流行和最广泛使用的之一。为什么呢？因为 JQuery 简化了 JavaScript 的使用，提供了强大而灵活的 API，使得开发者能够更轻松地处理 DOM 操作、事件处理、动画效果等。

以下是使用 JQuery 的一些优势：

简洁的语法：JQuery 的语法相比原生 JavaScript 更加简洁，减少了代码量，提高了开发效率。
跨浏览器兼容性：JQuery 能够处理不同浏览器之间的兼容性问题，让你不用过多关心浏览器差异。
强大的选择器：JQuery 提供了强大的选择器，让你能够更便捷地选取和操作 DOM 元素。
丰富的插件：JQuery 生态系统中有大量的插件，可以轻松扩展和定制你的项目。

2. JQuery 的引入

在使用 JQuery 之前，我们需要将 JQuery 引入到项目中。有两种方式可以实现：

2.1 在线引入

你可以直接通过 CDN（内容分发网络）引入 JQuery。这样，当用户访问你的网站时，他们的浏览器就会自动下载 JQuery。在 HTML 文件的 <head> 或者 <body> 部分添加如下代码：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

2.2 本地引入

你也可以下载 JQuery 并将其存放在项目中，然后在 HTML 文件中引入。下载地址：JQuery 官方下载。在 HTML 文件的 <head> 或者 <body> 部分添加如下代码：

<script src="path/to/jquery-3.6.4.min.js"></script>

注意： 如果你的项目中有多个 JavaScript 文件，建议将 JQuery 的引入放在它们的前面，以确保 JQuery 在其他脚本之前加载。

3. JQuery 基础语法

JQuery 的基础语法主要包括选择器、事件处理和 DOM 操作。下面我们将分别介绍这些内容。

3.1 选择器

JQuery 使用 CSS 选择器来选取 HTML 元素。以下是一些基本的选择器示例：

选取所有 <p> 元素：$("p")
选取具有 class 属性为 “intro” 的所有元素：$(".intro")
选取所有 id 为 “myId” 的元素：$("#myId")

更多选择器可以参考 JQuery 官方文档：JQuery Selectors

3.2 事件处理

JQuery 使得事件处理变得更加简单。以下是一个点击事件的示例：

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

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

<script>javascript">
    // 等待文档加载完成
    $(document).ready(function(){
        // 给按钮添加点击事件处理
        $("#myButton").click(function(){
            alert("按钮被点击了！");
        });
    });
</script>

</body>
</html>

3.3 DOM 操作

JQuery 提供了丰富的 DOM 操作方法，让我们能够轻松地操纵 HTML 元素。以下是一些基本的 DOM 操作示例：

3.3.1 修改元素内容

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

<p id="myParagraph">Hello, World!</p>

<script>javascript">
    $(document).ready(function(){
        // 修改段落内容
        $("#myParagraph").text("新的内容");
    });
</script>

</body>
</html>

3.3.2 修改元素属性

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

<img id="myImage" src="old_image.jpg" alt="旧图">

<script>javascript">
    $(document).ready(function(){
        // 修改图片属性
        $("#myImage").attr("src", "new_image.jpg");
    });
</script>

</body>
</html>

3.3.3 隐藏和显示元素

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

<div id="myDiv">这是一个 div 元素</div>

<script>javascript">
    $(document).ready(function(){
        // 隐藏元素
        $("#myDiv").hide();

        // 3 秒后显示元素
        setTimeout(function(){
            $("#myDiv").show();
        }, 3000);
    });
</script>

</body>
</html>

3.3.4 添加和移除元素

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

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<script>javascript">
    $(document).ready(function(){
        // 添加新元素
        $("#myList").append("<li>Item 3</li>");

        // 移除元素
        $("li:first").remove();
    });
</script>

</body>
</html>

这只是 JQuery 基础语法的冰山一角。你可以根据项目的需要深入学习更多的 JQuery 方法和特性。

4. JQuery 动画效果

JQuery 还提供了丰富的动画效果，让你的页面更加生动有趣。以下是一个简单的动画效果示例：

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

<div id="myBox" style="width: 100px; height: 100px; background-color: lightblue;"></div>

<script>javascript">
    $(document).ready(function(){
        // 添加点击事件处理
        $("#myBox").click(function(){
            // 添加动画效果
            $(this).animate({width: "200px", height: "200px"}, "slow");
        });
    });
</script>

</body>
</html>