关于javascript：使用jQuery对象理解

Using jQuery object understanding

本问题已经有最佳答案，请猛点这里访问。

我不得不跳进jQuery开发而没有花太多时间学习所有相关的基础知识，所以有一件事让我失望了很多。

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

情况1：

1
2
3
4

var container = $("#containerId");

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

案例2：

1
2
3
4

var container = $("#containerId");

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

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

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

编辑：建议重复的问题是询问最佳实践，尽管类似，我的问题纯粹是对jQuery对象包装的理解。

相关讨论

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

1
2
3
4
5
6
7
8
9

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

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

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

1
2
3
4

var container = $("#containerId");

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

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

1
2
3
4

var container = $("#containerId");

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

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

1
2
3
4

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

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

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

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

1
2
3
4
5
6
7
8
9

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

container.hide();
}

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

看看这些jsPerf测试用例，你会发现Case 2比Case 1慢得多(在我的情况下，在Chrome上慢了40％)。

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

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

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

字符串：var container = $("#containerId");

一个html元素：var document = $(document);

一个jQuery元素：var container = $($("#containerId"))

在第三个例子中，对Selector功能的第二次调用有效，但它没有问题。