随笔 - 8, 文章 - 0, 评论 - 0, 阅读 - 202

题目：创建一个点击按钮显示/隐藏文本的功能

要求：

在 HTML 中创建一个按钮元素和一个文本元素。
使用 jQuery 实现点击按钮时，文本的显示和隐藏切换。
初始状态下，文本应该是隐藏的。
当用户点击按钮时，如果文本是隐藏的，则显示文本；如果文本是显示的，则隐藏文本。

提示：

可以使用 jQuery 的 click() 方法来监听按钮的点击事件。
使用 jQuery 的 toggle() 方法来切换文本的显示和隐藏状态。
```
<!DOCTYPE html>
<html>
<head>
    <title>点击按钮显示/隐藏文本</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggle-button").click(function(){
                $("#hidden-text").toggle();
            });
        });
    </script>
</head>
<body>
    <button id="toggle-button">显示/隐藏</button>
    <p id="hidden-text" style="display:none">这是要隐藏的文本。</p>
</body>
</html>
```
在这个例子中，一个按钮和一个段落元素被创建。按钮的 ID 被设置为 "toggle-button"，段落元素的 ID 被设置为 "hidden-text"，并且将其初始状态设置为隐藏。

在 JavaScript/jQuery 部分，我们在文档加载完成后使用 $(document).ready() 来确保页面完全加载后再执行代码。然后，我们使用 click() 方法来监听按钮的点击事件，当按钮被点击时，我们使用 toggle() 方法来切换段落元素的显示和隐藏状态。

这样，当用户点击按钮时，段落元素的显示和隐藏状态会切换。如果段落元素是隐藏的，则会显示出来，如果段落元素是显示的，则会隐藏。

题目：创建一个计数器功能

要求：

在 HTML 中创建一个按钮元素和一个显示计数的文本元素。
使用 jQuery 实现点击按钮时，计数器递增，并更新文本显示的计数值。
初始状态下，计数器的值为 0。
每次点击按钮时，计数器的值应该增加 1。
在文本元素中显示当前计数器的值。

提示：

可以使用 jQuery 的 click() 方法来监听按钮的点击事件。
使用 jQuery 的 text() 方法来更新文本元素的内容。
可以创建一个变量来保存计数器的值，并在每次点击按钮时进行递增操作。
```
<!DOCTYPE html>
<html>
<head>
    <title>计数器</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var counter = 0;
            $("#count-button").click(function(){
                counter++;
                $("#counter-text").text(counter);
            });
        });
    </script>
</head>
<body>
    <button id="count-button">计数</button>
    <p>计数器的值是：<span id="counter-text">0</span></p>
</body>
</html>
```
在这个例子中，一个按钮和一个段落元素被创建。按钮的 ID 被设置为 "count-button"，段落元素中的计数器文本的 ID 被设置为 "counter-text"。

在 JavaScript/jQuery 部分，我们在文档加载完成后使用 $(document).ready() 来确保页面完全加载后再执行代码。然后，我们创建一个变量 counter 来保存计数器的值，并将其初始值设置为 0。每次点击按钮时，我们将计数器值加 1，并使用 text() 方法将其更新到段落元素中的计数器文本中。

这样，每次点击按钮时，计数器的值会增加 1，并更新到文本元素中显示。

题目：添加/移除 CSS 类

要求：

在 HTML 中创建一个按钮元素和一个文本元素。
使用 jQuery 实现点击按钮时，为文本元素添加或移除一个特定的 CSS 类。
初始状态下，文本元素不包含该 CSS 类。
点击按钮时，如果文本元素已经包含该 CSS 类，则移除它；如果文本元素不包含该 CSS 类，则添加它。

提示：

可以使用 jQuery 的 click() 方法来监听按钮的点击事件。

使用 jQuery 的 toggleClass() 方法来添加或移除 CSS 类。

<!DOCTYPE html>
<html>
<head>
    <title>添加/移除 CSS 类</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggle-button").click(function(){
                $("#highlight-text").toggleClass("highlight");
            });
        });
    </script>
</head>
<body>
    <button id="toggle-button">添加/移除 CSS 类</button>
    <p id="highlight-text">这是一段文本。</p>
</body>
</html>

在这个例子中，一个按钮和一个段落元素被创建。段落元素的 ID 被设置为 "highlight-text"，并且设置了一个 CSS 类 "highlight"，其中包含一些样式。

在 JavaScript/jQuery 部分，我们在文档加载完成后使用 $(document).ready() 来确保页面完全加载后再执行代码。然后，我们使用 click() 方法来监听按钮的点击事件，当按钮被点击时，我们使用 toggleClass() 方法来添加或移除段落元素中的 CSS 类 "highlight"。

这样，每次点击按钮时，段落元素中的 CSS 类 "highlight" 会被添加或移除，以实现高亮或取消高亮的效果。

题目：滑动切换图像

要求：

在 HTML 中创建一个图像元素和一个按钮元素。
使用 jQuery 实现点击按钮时，图像元素的滑动切换效果。
初始状态下，图像应该是隐藏的。
点击按钮时，如果图像是隐藏的，则以滑动效果显示出来；如果图像是显示的，则以滑动效果隐藏起来。

提示：

可以使用 jQuery 的 click() 方法来监听按钮的点击事件。
使用 jQuery 的 slideToggle() 方法来切换元素的滑动显示和隐藏效果。
```
<!DOCTYPE html>
<html>
<head>
    <title>滑动切换图像</title>
    <style>
        #slide-image {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggle-button").click(function(){
                $("#slide-image").slideToggle();
            });
        });
    </script>
</head>
<body>
    <button id="toggle-button">切换图像</button>
    <img id="slide-image" src="https://via.placeholder.com/300x200.png?text=Slide+Image" alt="滑动图像">
</body>
</html>
```
在这个例子中，一个按钮和一个图像元素被创建。图像元素的 ID 被设置为 "slide-image"，并且设置了一个 CSS 样式，将其初始状态设置为隐藏。

在 JavaScript/jQuery 部分，我们在文档加载完成后使用 $(document).ready() 来确保页面完全加载后再执行代码。然后，我们使用 click() 方法来监听按钮的点击事件，当按钮被点击时，我们使用 slideToggle() 方法来切换图像元素的滑动显示和隐藏效果。

这样，每次点击按钮时，图像元素会以滑动效果显示出来或隐藏起来。如果图像元素是隐藏的，则会以滑动效果显示出来；如果图像元素是显示的，则会以滑动效果隐藏起来。