在前端开发中，jQuery 是一个非常流行和实用的 JavaScript 库。其中的 $() 函数是使用最广泛的方法之一，它可以方便地选取 DOM 元素并对其进行操作。
然而，有些人可能会误解 $() 函数的工作原理，尤其是在涉及事件绑定和克隆元素时。本文将详细介绍 $() 函数的用法，并讨论一些相关的问题和技巧。
$() 函数的基本用法
首先，让我们来看一下 $() 函数的基本用法。它的语法如下：
$(selector [, context])
其中 selector 是要选取的 DOM 元素的 CSS 选择器，而 context 则是可选的上下文元素。
举个例子，如果我们想选取 HTML 文档中所有的段落元素，可以这样写：
$('p')或者如果我们只想选取某个特定元素内部的所有段落，可以这样写：
$('.my-container p')在 $() 函数执行后，会返回一个 jQuery 对象，该对象包含了所有匹配的元素。我们可以对这些元素进行各种操作，例如修改属性、添加样式、绑定事件等等。
克隆元素和事件绑定
现在假设我们有一个 HTML 页面，其中包含一个按钮元素和一个 DIV 元素：
<button id="my-button">Click me</button> <div id="my-div"></div>
我们想要实现的功能是：当用户点击按钮时，在 DIV 元素中添加一段文字。
首先，我们可以使用 $() 函数选取这两个元素，并为按钮绑定一个 click 事件处理函数：
var $button = $('#my-button');
var $div = $('#my-div');
$button.on('click', function() {
$div.append('<p>Hello, world!</p>');
});这段代码的意思是，当用户点击按钮时，jQuery 会在 $div 中添加一个新的段落元素，其中包含文本 "Hello, world!"。
但是假设我们还有一个需求，那就是用户可以点击一次按钮后，再次点击时不会重复添加相同的内容。为了实现这个功能，我们可以考虑使用克隆元素的方法。
具体来说，我们可以通过调用 $div.clone() 方法来创建一个 $div 的副本，并将其添加到页面中。然后，我们为副本按钮绑定 click 事件处理函数，而不是原始的按钮。
-- -------------------- ---- ------- --- ------- - ---------------- --- ---- - ------------- --- ------ - ------------- ------------------------ --------------------------------- ---------- - ------------------------ ------------- ---
这样，当用户点击原始按钮时，jQuery 会创建一个 $div 的副本，并将其添加到页面中。然后，当用户点击副本按钮时，jQuery 会在副本 $div 中添加新的文本。
为什么事件绑定不会被克隆？
然而，有些人可能会对上述代码的行为感到困惑，认为副本按钮应该具有与原始按钮相同的 click 事件处理函数。但是事实上，并非如此。
这是因为 $() 函数并不会将事件处理函数复制到副本元素中。换句话说，即使在使用 on() 方法进行事件绑定时，也不会将绑定的事件复制到副本元素中。这可能会导致一些预期外的结果，例如在副本元素上绑定的事件没有执行等等。
那么，为什么 jQuery 不会将事件处理函数复制到副本元素中呢？
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12112
