草庐IT

dom-selection

全部标签

javascript - 为什么通过缓存变量访问 DOM 会更快?

我正在努力提高我对javascript的了解,在搜索一些“最佳实践”时,有人向我指出,缓存DOM文档然后通过该var访问它比直接访问文档对象更快.您可以在此处查看我在jsperf上所做的编辑的结果:http://jsperf.com/jquery-document-cached-vs-uncached/3(编辑:标题为“jsquery”,因为那是原始测试,我的编辑包含vanillajavascript,框架没有区别)这让我很好奇。基本上我在等式中引入了一个新变量,这如何使事情变得更快而不是更慢?据我所知,“printa”应该比“b=a;printb”(比喻)好这种情况有什么不同?

javascript - JQuery 加载 gif 在繁重的 dom 操作期间卡住

这个问题在这里已经有了答案:关闭9年前。PossibleDuplicate:HowtomakeGIFrotatewhenthetreeisloadinginJavascript正如标题所说,我的加载gif在通过ajax成功调用时卡住。成功调用需要执行一些繁重的DOM操作,并且由于UI是单线程的,它会导致我的加载gif卡住。到目前为止我已经尝试过优化我的功能,但是有太多的数据需要同时加载。使用setTimeout(),但它会在加载所有内容后显示所有gif。使用spin.js,但在DOM操作期间它也会卡住。有什么办法可以解决这个问题吗?非常感谢任何帮助。编辑1:与ArcGIS有关javas

javascript - 为尚未附加的元素绑定(bind) "insertion into DOM event"

我正在寻找这样的东西:vardiv=document.createElement('div');div.id='proprioceptiveDiv';$(div).on('appendedToDOM',function(){//...});document.body.appendChild(div);//triggersabovehandler这存在吗?我正在使用jQuery,不想仅仅为了这种能力而导入整个插件或另一个库,所以我只对一个简短的解决方案感兴趣。 最佳答案 您可以使用MutationEvents但这些事件已在DOM事件规

javascript - 修改与 jQuery X-Editable 库一起使用时 Select2 下拉选择的输出

我一直在尝试使用X-Editablehttp://vitalets.github.io/x-editable/使用Select2https://select2.github.io/几个星期以来运气不佳。最初我试图从AJAX请求中加载数据,然后使用该库,但我只能看到旧代码是否应该适用于这两个库的旧版本。为了稍微简化一些事情,我现在决定单独加载我的数据,这样X-Editable和Select2只需处理一组已经可用的数据。我现在的问题是修改数据的显示。默认情况下,我对编辑字段的外观感到满意,它看起来像被选中的“标签”。当编辑完成并在初始页面加载时,它会将我选择的项目显示为逗号分隔的字符串。我

javascript - Angular : Selectively compile templates

我知道ng-non-bindable允许给定元素及其子元素不被编译为模板。它似乎被设计为根据需要在整个模板中穿插。有没有办法告诉Angular不要处理给定的元素,而是在其中“戳洞”并允许处理选定的子元素?例如,我很想能够做这样的事情:{{2+2}}{{2+2}}并让它输出:{{2+2}}4我知道ng-non-bindable甚至不允许处理ng-bindable,即使它存在。但是,是否存在允许像我所表达的那样处理模板的方法?更彻底地说,我理想的解决方案是在找到ng-bindable之前不会处理任何Angular,而不仅仅是大括号表达式。例如:{{n+2}}{{n+2}}会导致:{{n+2

javascript - 使用 Webpack 将 SVG 附加到 DOM

目前,我的公司在我们的AngularJS网络应用程序的index.html中包含一个相当大的SVGSprite图,其中包含各种图标。主SVG由CSS隐藏,我们通过按ID选择它们来显示SVG中的各个图标:我们现在正尝试通过拆分SVG并将生成的部分内联到需要它们的页面上来减少我们网站的加载时间。由于我们也转向Webpack来捆绑我们的应用程序,我们希望在Angular模块中指定特定SVG文件的依赖项,然后让Webpack将SVG的内容(可能包装在div中)插入DOM.有没有办法用现有的装载机实现这一目标?我找到了基本上导出SVG内容的raw-loader。但是,我不知道如何将它与另一个将插

javascript - 在 jquery UI 对话框上使用 select2 (v 4.0) 时,如何让 allowClear 选项在使用远程数据源时起作用?

我正在使用select2dropdown并且刚刚升级到版本4。似乎损坏的一个功能(或者我做错了什么)是allowClear选项当您有远程数据源并且select2位于jqueryUI对话框上时如果您的数据源是本地的(没有ajax)或者没有涉及jqueryUI对话框,它工作正常,但是当我尝试在jqueryUI对话框上使用远程数据源时,我看到了问题。有趣的是,当设置allowClear=true时,“X”DOES会在我搜索并选择一个项目后显示在下拉框的右侧,但是当我单击它时,所有select2代码都会运行,但不会删除先前选择的值。我已经调试了select2.js代码,所有看起来应该被触发的代

javascript - 如何用 selenium 重新加载 html DOM,以便新命令定位新节点?

所以我正在做一些测试,其中一个页面会在单击某些按钮和链接后更改它的html树。但是webdriver一直只在旧的htmlDOM中搜索。那么如何定位新添加的网络元素呢?或者如何让webdriver加载新的HtmlDOM以便它以新元素为目标?谢谢 最佳答案 WebDriver会自动轮询DOM。只需在与最近添加的网络元素交互之前使用隐式或显式等待:http://www.seleniumhq.org/docs/04_webdriver_advanced.jsp#explicit-and-implicit-waits

javascript - select2 multiple 防止其他输入在输入时提交表单

我有一个带有简单输入和select2输入的表单,如下所示:http://codepen.io/anon/pen/QyBxwE在第一个输入获得焦点时按enter应该提交表单(在这种情况下,重定向到404页面)。出于某种原因,多个select2输入阻止了表单提交。如果我删除select2类或multiple属性,表单将正常运行。在Safari、Chrome和Firefox上的MacOSXYosemite上测试,它在所有浏览器上一致发生。(我正在使用jQuery2.1.3和select24.0.1) 最佳答案 表单的工作原理是,当您单击回

javascript - react - 在不破坏封装的情况下访问 DOM

是否有一种规范的方法可以在不破坏封装的情况下执行类似以下的操作?importReact,{Component,PropTypes}from'react';classDashboardextendsComponent{constructor(props,context){super(props,context);this.setRef=::this.setRef;}componentDidMount(){constnode=ReactDOM.findDOMNode(this.someRef);constnewHeight=window.innerHeight-node.offsetTop