jQuery实现复制到粘贴板功能

jQuery可以通过clipboard.js库实现将内容复制到剪贴板。下面将详细讲解“jQuery实现复制到粘贴板功能”的完整攻略，包括创建复制按钮和绑定事件等步骤。

步骤一：引入clipboard.js库

在head标签中引入clipboard.js库的js文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

步骤二：创建复制按钮

在HTML文档中创建一个按钮元素，用于复制其父级元素的内容。

<div class="copy-box">要复制的文本<span class="copy-button">复制</span></div>

这里创建了一个包含文本和复制按钮的div元素，其中复制按钮的类名为copy-button，它是我们用来绑定复制事件的元素。

步骤三：绑定复制事件

使用clipboard.js库的new ClipboardJS()方法将复制按钮与复制事件绑定起来，在点击复制按钮时触发复制事件。

<script>
  new ClipboardJS('.copy-button', {
    text: function(trigger) {
      return trigger.parentNode.innerText.trim();
    }
  });
</script>

上述代码中，.copy-button为要绑定复制事件的元素，text方法返回的是我们要复制的文本，其中trigger参数指的是当前点击的元素，即复制按钮，trigger.parentNode指的就是复制按钮的父级元素，也就是我们要复制的那段文本，最后使用innerText方法获取文本内容。

示例一：复制文本框内容

下面是一个复制文本框内容的示例，参考上述步骤：

<div class="copy-box">
  <textarea id="copy-text" cols="30" rows="10">要复制的文本</textarea>
  <span class="copy-button">复制</span>
</div>
<script>
  new ClipboardJS('.copy-button', {
    text: function(trigger) {
      return document.querySelector('#copy-text').value.trim();
    }
  });
</script>

这里我们先创建了一个包含文本框和复制按钮的div元素，然后使用document.querySelector()方法获取文本框内容，最后将其作为要复制的文本返回。

示例二：复制链接地址

下面是一个复制链接地址的示例，参考上述步骤：

<div class="copy-box">
  <a href="https://www.baidu.com">要复制的链接</a>
  <span class="copy-button">复制</span>
</div>
<script>
  new ClipboardJS('.copy-button', {
    text: function(trigger) {
      return trigger.parentNode.querySelector('a').href;
    }
  });
</script>

这里我们先创建了一个包含链接和复制按钮的div元素，然后使用querySelector()方法获取链接的地址，最后将其作为要复制的文本返回。