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

我最近了解到（这里是stackoverflow:）在每次编写时使用jquery时

$("...")

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

基本上，我总是通过编写$（“#myDiv”）来引用元素。如何以有效的方式重复操作DOM元素（使用jquery函数，而不是普通的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");

感谢您提供的任何见解。：）

---

lara

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

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

从您的示例来看，您似乎从未使用过以前的HTML，因此根本不需要获取它。我想你可以这样做：

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

两者是一样的

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”））来测试这一点。

---

要回答你的问题“我应该用哪一个”：DRY（不要重复你自己）建议使用链锁。只是不要忘记可读性（不要将许多方法调用集中到一行中；我的可读性秘诀在上面）

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

仅仅因为没有人提到它，使用第一个方法也会起作用并保存DOM搜索

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

---

祝你好运

我也同意链接是最好的使用方法，但是其他一些没有人在这里有地址的东西是在链接时使用的

.andSelf（）

（）和

.end（）

（）

下面将“border”类添加到包含在中的

div

和

p

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

使用

.end（）

“重置”选择器

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

---

---

更新：

.andSelf（）

已被弃用，基本上已重命名为，请以相同的方式使用它。

lou flye，谢谢！获取previousHtml只是作为jquery对象上的附加操作。有时不可能链接所有操作，因为某些jquery函数不返回jquery对象（例如，.attr（））。在这种情况下，将$（）对象存储在变量中，然后对该变量执行操作就相当于在它触发的查找方面进行链接，对吗？谢谢你，jvilalta！这正是我在lo_flye回复下发表的评论中所担心的。在这些情况下，我只将$（“…”）返回的对象存储在一个变量中。严格来说，jQuery函数从不返回DOM元素——它们返回的jQuery对象可能包含一个或多个DOM元素的数组。

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