jquery 复制内容

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的目标是“write less, do more”，即用更少的代码实现更多的功能。

复制内容

在 jQuery 中，复制内容通常涉及到获取某个元素的 HTML 或文本内容，并将其复制到剪贴板或另一个元素中。

类型

复制 HTML 内容：将元素的 HTML 结构复制到另一个元素或剪贴板。
复制文本内容：仅复制元素的文本内容，不包括 HTML 标签。

应用场景

用户交互：在用户点击按钮时，将特定内容复制到剪贴板，方便用户粘贴使用。
数据导出：将页面上的数据复制到剪贴板，然后通过其他方式导出。
内容分享：将页面上的内容复制并分享到社交媒体或其他平台。

示例代码

复制文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Copy Text</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p id="text">这是一段要复制的文本。</p>
    <button id="copyBtn">复制文本</button>

    <script>
        $(document).ready(function() {
            $('#copyBtn').click(function() {
                var text = $('#text').text();
                var tempInput = $('<input type="text" value="' + text + '" />');
                $('body').append(tempInput);
                tempInput.select();
                document.execCommand('copy');
                tempInput.remove();
                alert('文本已复制到剪贴板！');
            });
        });
    </script>
</body>
</html>

复制 HTML 内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Copy HTML</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="source">
        <p>这是一段要复制的 HTML 内容。</p>
    </div>
    <button id="copyBtn">复制 HTML</button>
    <div id="target"></div>

    <script>
        $(document).ready(function() {
            $('#copyBtn').click(function() {
                var html = $('#source').html();
                $('#target').html(html);
                alert('HTML 内容已复制！');
            });
        });
    </script>
</body>
</html>