jquery菜鸟:如何在同一个DOM元素上高效地执行多个操作？
提问于 2009-12-11 17:12:12
我最近了解到(在stackoverflow：))在每次我编写代码时使用jquery
$("...")执行DOM搜索以定位匹配的元素。我的问题很简单:如何有效地对使用jquery定位的DOM元素执行一系列操作(使用jquery对象的优秀方法)？目前，我正在做(例如)：
var previousHtml = $("#myDiv").html();
$("#myDiv").addClass("tangoClass");
$("#myDiv").html("bla bla bla");
//...基本上，我总是通过写$("#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");感谢你的见解。：)
劳拉
回答 6
Stack Overflow用户
发布于 2009-12-11 19:55:21
我也同意链接是最好的方法，但这里没有人提到的是在链接时使用.andSelf()(1)和.end()(2)。
下面的代码将“边框”类添加到其中包含的div和p中。
$("div").find("p").andSelf().addClass("border");使用.end()“重置”选择器
$("div")
.find("p").addClass("myParagraph").end()
.find("span").addClass("mySpan");更新：.andSelf()已被弃用，本质上已重命名为.addBack()，请以相同的方式使用它。
Stack Overflow用户
发布于 2009-12-11 17:18:04
每次使用jQuery函数时，它都会返回初始查询中的完整jQuery对象。这使您可以将操作链接在一起，因此实际的查询只在第一次发生。
从您的示例来看，您似乎从未使用过previousHtml，所以您根本不需要使用它。我认为你可以这样做：
$("#myDiv").html('bla bla bla').addClass('tangoClass');Stack Overflow用户
发布于 2009-12-11 17:26:21
这取决于您对该元素调用了哪些函数，因为并非所有函数都会返回DOM元素。但是，如果您必须调用的所有函数都将始终返回DOM元素，那么它肯定会使您的代码更具可读性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1889474
复制
相似问题
使用JavaScript高效地执行多个DOM更新
菜鸟jQuery问题，动态创建DOM元素
更高效地执行多个父级操作
高效地在同一个模型上执行多个查询
如何高效地创建和附加多个dom元素
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
