jquery 点击按钮复制

基础概念

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

类型

jQuery 主要有以下几种类型：

选择器：用于选择 DOM 元素。
事件处理：用于绑定和处理事件。
动画效果：用于创建动画效果。
Ajax：用于进行异步数据交互。

应用场景

jQuery 广泛应用于各种网页开发中，包括但不限于：

动态网页效果
表单验证
数据交互
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 Copy Text</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="textToCopy" value="Hello, World!">
    <button id="copyButton">Copy</button>

    <script>
        $(document).ready(function() {
            $('#copyButton').click(function() {
                // 获取要复制的文本
                var text = $('#textToCopy').val();

                // 创建一个临时的 textarea 元素
                var $temp = $('<textarea></textarea>');

                // 将要复制的文本赋值给 textarea
                $temp.val(text);

                // 将 textarea 添加到 DOM 中
                $('body').append($temp);

                // 选中 textarea 中的文本
                $temp.select();

                // 复制选中的文本到剪贴板
                document.execCommand('copy');

                // 移除临时创建的 textarea
                $temp.remove();

                // 提示复制成功
                alert('Text copied to clipboard!');
            });
        });
    </script>
</body>
</html>