jquery 点击弹出文本框

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地实现复杂的 JavaScript 功能。

类型

jQuery 主要有以下几种类型：

选择器：用于选择 DOM 元素。
事件处理：用于绑定和处理事件。
动画效果：用于实现页面元素的动画效果。
Ajax：用于实现异步数据交互。

应用场景

jQuery 广泛应用于各种 Web 开发项目中，特别是在需要简化 DOM 操作和事件处理的场景中。

示例代码

以下是一个使用 jQuery 实现点击按钮弹出文本框的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Click Popup</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #popup {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: white;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button id="popupButton">点击弹出文本框</button>
    <div id="popup">
        <input type="text" id="textInput" placeholder="请输入文本">
        <button id="closePopup">关闭</button>
    </div>

    <script>
        $(document).ready(function() {
            $('#popupButton').click(function() {
                $('#popup').show();
            });

            $('#closePopup').click(function() {
                $('#popup').hide();
            });
        });
    </script>
</body>
</html>