Question

我最近学到了（在这里的stackoverflow：）），每当我写

时使用jquery

$("...")

执行DOM搜索以定位匹配元素。我的问题非常简单：如何在我使用jquery定位的DOM元素上有效地执行一系列操作（使用jquery对象的漂亮方法）？目前，我正在做（例如）：

var previousHtml = $("#myDiv").html();
$("#myDiv").addClass("tangoClass");
$("#myDiv").html("bla bla bla");
//...

基本上，我总是通过写$（“＃myDiv”）来引用元素。如何以有效的方式重复操作DOM元素（使用jquery函数，而不是vanilla Javascript）？以下是否避免了昂贵的DOM搜索？

var myDiv = $("#myDiv");
var previousHtml = myDiv.html();
myDiv.addClass("tangoClass");
myDiv.html("bla bla bla");

或者我应该尝试尽可能多地链接jquery调用，例如：

var previousHtml = $("#myDiv").addClass("tangoClass").html(); //saves me 1 $("#myDiv") call
$("#myDiv").html("bla bla bla");

感谢您的任何见解。：）

拉拉

Answer 1

还没有人链接jQuery Performance Rules，所以我会参与进来，因为这是一篇很棒的文章，也是新jQuery开发人员必读的内容！

正如您所看到的那样可以证实您的怀疑：caching your jQuery objects将它们存储在变量中与链接一样有效。

Answer 2

我也同意链接是最好的方法，但是其他人没有解决的问题是使用.andSelf()（1）和.end()（2）而链条。

以下内容将“border”类添加到其中包含的div和p。

$("div").find("p").andSelf().addClass("border");

使用.end()“重置”选择器

$("div")
  .find("p").addClass("myParagraph").end()
  .find("span").addClass("mySpan");

更新：.andSelf()已弃用且基本上已重命名为.addBack()，请以相同方式使用。

Answer 3

每次使用jQuery函数时，它都会从初始查询中返回完整的jQuery对象。这允许您将操作链接在一起，因此实际查询仅在第一次发生。

从您的示例来看，它看起来并不像您使用过的HTML，因此您根本不需要抓取它。我想你可以这样做：

$("#myDiv").html('bla bla bla').addClass('tangoClass');

Answer 4

这取决于您在该元素上调用哪些函数，因为并非所有函数都将返回DOM元素。但是，如果您必须调用的所有函数将始终返回DOM元素，那么它肯定会使您的代码更具可读性。

Answer 5

是的我建议使用链接，因为jQuery方法通常返回您修改的元素，因此不需要再次在DOM中查找它。我发现它也更具可读性（你知道哪些操作属于哪个元素）。

Answer 6

两者是相同的。

var myDiv = $("#myDiv"); // $("#myDiv") runs document.getElementById,
                         // wraps the DOMElement, returns the wrapper.
myDiv.addClass("tangoClass"); // obviously reuses the object
myDiv.html("bla bla bla"); // ditto

链接完全相同，因为jQuery方法返回this，它们附加到的对象：

myDiv
    .addClass("tangoClass")
    .html("bla bla bla")
;

您可以使用(myDiv === myDiv.html("bla bla bla"))

进行测试

回答你的问题“我应该使用哪种”：干（不要重复自己）会建议链接。只是不要忘记可读性（不要将许多方法调用集成到一行;我的可读性配方在上面）

Answer 7

因为没有人提到它，使用你的第一个方法也可以工作并保存DOM搜索。

然而，正如其他人所说的那样，链接将是使用相同元素并对其应用不同操作的更“恰当”的方式。

祝你好运！

jquery新手：如何在同一DOM元素上有效地执行多个操作？

7 个答案: