Question

我目前正在学习js和jquery以帮助我完成我的设计，我遇到的一个常见问题是我可以让它做我想做的事情，但我不知道它是如何形成的编码是有效的。任何人都可以看到更好的代码编码方式：

$(".cal-check a").click(function(e) {
e.preventDefault();
$(".agenda").addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
$(".agenda").removeClass("active");
});

我想点击日历事件，然后将活动类添加到名为agenda的日历中的另一个类，然后调出日程。然后我通过单击关闭面板元素将其删除。非常感谢

Answer 1

您可以像这样缓存.agenda选择器：

var $agenda = $(".agenda");

$(".cal-check a").click(function(e) {
    e.preventDefault();
    $agenda.addClass("active");
});

$agenda.find(".close-panel").click(function(e) {
    e.preventDefault();
    $agenda.removeClass("active");
});

Answer 2

我建议不要更改类，这通常在浏览器上相当密集，因为一个类更改将意味着必须重新解析所有类。对于像动画这样更具侵略性的东西来说，这通常是非常糟糕的，但是如果你有性能方面的考虑，你应该把它当作建议。

Answer 3

我认为这已经很有效了。对未来可能有所帮助的事情是尝试尽可能少地深入DOM。在这个小例子中，它不会有所作为，但是例如为agendaClass创建一个变量，而不是每次都使用jquery来获取它。

var agendaClass = $(".agenda");

$(".cal-check a").click(function(e) {
e.preventDefault();
agendaClass .addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
agendaClass .removeClass("active");
});

Answer 4

这应该足够有效。如何优化代码在很大程度上取决于您的DOM结构。

在幕后，jQuery及其Sizzle搜索引擎将使用内置的DOM搜索方法（如果有的话）（本机搜索总是比使用JS搜索更快）。在你的情况下，一切都应该是好的，特别是在现代浏览器中，因为他们有querySelectorAll和.cal-check a和.agenda选择器将使用内置方法执行。此外，还有getElementByClassName可用于查找.agenda。

大多数现代浏览器都支持这两种方法（提供的链接都有支持的浏览器列表），因此，对于IE8 +，Firefox和Chrome等浏览器，您的选择器将足够快。与此同时，IE7没有上述功能，Sizzle将被迫通过numerouse元素来查找您正在寻找的元素。也许你可以限制指定一个带id的容器的数量，在这种情况下它只会查看那些元素：例如$("#someId .agenda")。您可能还需要添加一些标记：$("#someId div.agenda")。这样，您将限制在#someId（getElementById）内使用div（可以使用getElementsByTagName）进行搜索的元素数量。这样，您可以在IE7和其他旧版浏览器中提高速度，而不支持getElementByClassName和querySelector

另外，您可以缓存此处已提及的搜索结果。

优化Jquery代码 - 在点击时添加和删除类

4 个答案: