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

我最近才知道（在这里计算器：）），其使用jQuery每一次当我写jquery newbie：如何高效地在同一个DOM元素上执行多个操作？

$("...")

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

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");

谢谢你的任何见解。：）

拉拉

来源

2009-12-11 laramichaels

没有人联系过jQuery Performance Rules，所以我会留言，因为这是一篇很棒的文章，也是新的jQuery开发人员必读的文章！

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

来源

2009-12-11 17:37:00

了不起的资源，非常感谢！ – laramichaels 2009-12-11 17:48:20

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

来源

2009-12-11 17:15:20 Daff

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

从你的例子来看，它看起来并不像你曾经使用过的previousHtml，所以你根本不需要去抓它。我认为你可以这样做：

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

来源

2009-12-11 17:18:04

lo_flye，谢谢！ Getting previousHtml只是作为jquery对象的附加操作。有时候不可能链接所有的操作，因为一些jquery函数不返回jquery对象（例如.attr（））。在这些情况下，将$（）对象存储在变量中，然后对该变量执行操作相当于根据它触发的查找进行链接，对吗？ – laramichaels 2009-12-11 17:27:22

jvilalta在下面解决了这个问题，非常感谢你！ – laramichaels 2009-12-11 17:30:41

这两个是一样的。

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"))

测试这个回答你的问题“，这我应该使用“：干（不要重复自己）会建议链接。只是不要忘记可读性（不要把许多方法调用放到一行中;我的可读性方法在上面）

来源

2009-12-11 17:20:45

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

来源

2009-12-11 17:26:21 jvilalta

谢谢你，jvilalta！这正是我在lo_flye的回复下发表的评论中所关心的。在这些情况下，我只会将由$（“...”）返回的对象存储在var中。 – laramichaels 2009-12-11 17:29:34

严格地说，jQuery函数从不返回DOM元素 - 它们返回一个可能包含一个或多个DOM元素数组的jQuery对象。 – 2009-12-11 17:51:45

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

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

祝你好运！

来源

2009-12-11 17:26:52 Ken

我也同意链接是用最好的方法，但别的东西没有人在这里有地址使用.andSelf()（1）和.end()（2），而链接。

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

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

使用.end() “复位” 时，选择

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

更新：.andSelf()已被弃用，基本上是重命名为.addBack()，以同样的方式使用它。

来源

2009-12-11 19:55:21 Mottie

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

回答

相关问题