使用jQuery对象理解[重复]答案

【问题标题】：Using jQuery object understanding [duplicate]使用jQuery对象理解[重复]
【发布时间】：2016-02-08 15:40:37
【问题描述】：

我不得不在没有太多时间学习所有相关基础知识的情况下跳入 jQuery 开发，所以有一件事让我很不爽。

我看到我们的开发人员访问 jQuery 对象的两种不同方式：

案例一：

var container =  $("#containerId");

// Then use it as:
container.hide();

案例 2：

var container =  $("#containerId");

// Then use it as:
$(container).hide();

根据我最新的知识，通过像var obj = $(container) 一样包装一个容器，我们得到一个 jQuery 对象obj，我们可以进一步使用它。

但是为什么我看到开发人员在使用 $(obj).doSomething() 时会间歇性地再次包装它？

编辑：建议作为重复的问题是询问最佳实践，虽然类似，但我的问题纯粹是关于对 jQuery 对象包装的理解。

【问题讨论】：

案例二是多余的
您会看到，因为 (a) 他们在代码中不确定它是 jQuery 对象还是选择器（有时，例如函数参数可能不知道它是 jQuery 对象还是选择器），或（b）因为他们不知道更好。
也许他们将obj 误认为是 dom 对象，而不是 jquery 对象？通常认为在 jquery 对象前加上一美元表示它们确实是 jquery 对象是一种很好的做法
正如所说的@MysterX 是多余的，大多数开发人员这样做是因为他们不识别jQuerized 对象。幸运的是，jQuery 知道这一点，当它接收到一个 jquery 对象时，它会忽略重新声明
可能不止一位开发人员参与了代码 - 其中一位出现了语法错误。案例 2 是多余的。通常，当有人想要创建（并表示）一个 DOM 节点作为 jQuery 对象时，您会看到如下内容：var $foo = $(".foo"); 这样，当有人稍后更新代码时，他们可以立即告诉 $foo 是一个 jQuery对象而不是变量或其他东西。

标签： javascript jquery object

【解决方案1】：

我记得第二次包装什么也没做。因此，如果可以有一个选择器、一个 dom 元素或一个 jQuery 对象，您可以只包装它而不必关心它是什么。

但是如果你知道它是一个 jquery 对象，你就不应该使用包装。

【讨论】：

没有一个包含代码的答案会捕捉到人们正确或错误地包装现有 jQuery 对象的所有情况。这是对OP问题的最佳答案。问题的“为什么”部分往往是一个永远不会知道的谜

【解决方案2】：

当开发人员开发一个函数时，例如在一个 jQuery 插件中，它可以获取一个 DOM 元素或一个 jQuery 对象或一个选择器的参数，然后他们使用它：

function x(container) {
    container = $(container);
    // use container as a jquery object
}

// these both work:
x("#containerId");
x($("#containerId"));
x(document.getElementById("containerId"));

【讨论】：

【解决方案3】：

案例 1： 使用 jQuery 选择器查找 dom 元素并返回 jQuery 对象：

var container =  $("#containerId");

// Then use it as:
container.hide();

案例 2：冗余/错误（或者如果您不确定变量是否已经是 jQuery 对象但您需要它）： 使用 jQuery 选择器查找 dom 元素并返回 jQuery 对象，然后将其传递给新的 jQuery 对象：

var container =  $("#containerId");

// Then use it as:
$(container).hide();

案例 3： 选择一个 dom 元素，然后在构造函数中使用它来创建一个新的 jQuery 对象（然后在其上调用 hide() ）

var container =  document.getElementById("#containerId");

// Then use it as:
$(container).hide();

【讨论】：

【解决方案4】：

简答：案例 2 从现有的 jQuery 对象创建一个 jQuery 对象，这是不必要的。

$ 是 jQuery Selector function 的别名。该函数可以采用几个不同的参数，例如...

一个字符串：var container = $("#containerId");
一个html元素：var document = $(document);
一个 jQuery 元素：var container = $($("#containerId"))

在第 3 个示例中，对 Selector 函数的第二次调用有效，但它并不重要。

【讨论】：

【解决方案5】：

Case 1 始终是首选。如果可能，请始终缓存和重用 jQuery 对象。这将提供最佳性能。

Case 2 是确保您使用 jQuery 对象的最简单方法。有更好的方法，你可以看到in this SO post。我永远不会建议选择这样的对象。如果我期待一个 jQuery 对象，我会这样做。例如

function hideContainer(container)
{
    if(!(container instanceof jQuery))
    {
         container =  $("#containerId");
    }

    container.hide();
}

通过选择器字符串再次选择对象实际上更快（而不是使用对象引用），因为它不必访问对象属性来确定选择器。

Take a look at these jsPerf test cases 你会看到Case 2 比Case 1 慢得多（在我的情况下，它在 Chrome 上慢了 40%）。

但是，我认为Case 2 只是确保您拥有jQuery 对象的最简单、最快捷的方法；这就是你经常看到它的原因。

【讨论】：