javascript - 当我的脚本开头有多个 Jquery 选择器时，如何优化页面的负载？

Question

我的 javascript 开头有几个 jquery 选择器。

jQuery('.enter').show();
jQuery('.btnsecond').show();
jQuery('#id div.my-class').hide();
jQuery('.classes p:last').hide();

此 jquery 代码在页面的任何重新加载时运行...

我认为这是一个选择正确 DOM 的过程，哪种解决方案可以简化或优化这个加载过程？也许使用 Css 以不同的方式定位 dom。

谢谢。

Answer 1

jQuery('.enter, .btnsecond').show();
jQuery('#id div.my-class, .classes p:last').hide();

Answer 2

由于您没有在这些 javascript/jQuery 语句中应用编程逻辑，因此应用这些初始条件的最快方法是在样式表中使用 CSS 规则设置它们，而不是使用 javascript。这样，它们将在页面显示之前立即应用，而不是通过 javascript 设置，后者必须等到 DOM 加载后才能运行。

.enter, .btnsecond {display: block;}
#id div.my-class, .classes p:last {display: none;}

Answer 3

要添加到 mgraphs 代码，您可以在选择器中指定上下文。这意味着您指定项目的包含元素，以便它仅在该容器中搜索您的元素。这减少了 dom 遍历。

$exampleContainerDiv = $("#ContainerDivForSelectorsBelowExample");
jQuery('.enter, .btnsecond', $exampleContainerDiv).show();
jQuery('#id div.my-class, .classes p:last', $exampleContainerDiv).hide();