Question

到目前为止，我一直在将document.ready函数中的所有jquery代码都删除。我认为在某些情况下这不是最好的方法。

例如：如果我希望在某个页面加载时执行动画，那么最好的方法是什么。

$(document).ready(function() {
    $("#element_1").fadeIn();
    $("#element_2").delay('100').fadeIn();
    $("#element_3").delay('200').fadeIn();
});

如果这是在document.ready中，那么每次 ANY 页面加载时，它都会检查每一行并查找该元素。告诉jquery只在某个页面上执行一大块代码以避免此问题的最佳方法是什么。

Answer 1

通过在执行动画之前检查页面上是否存在elememt

if ($("#element-1").length) { 
   $("#element-1").fadeIn();
}

以及其他元素#element_2和#element_3

到@numediaweb：

当前的jQuery is()实现如下所示

is: function( selector ) {
  return !!selector && jQuery.filter( selector, this ).length > 0;
 },

所以，使用is()会更聪明，但只使用length更快，起诉更快document.getElementById().length

Answer 2

当DOM为该特定页面做好准备时，仅包括您想要的代码。 $(document).ready(...并不意味着您应该在每个页面上运行相同的代码块。这将需要执行各种检查，以便知道需要执行什么。

我确信您将拥有一些您希望在每个页面上执行的常用功能，以及一些特定于页面的功能。如果是这种情况，那么您可以将公共功能放入单个函数中，并从$(document).ready(...调用它，以便唯一剩余的代码特定于该特定页面。例如：

function common() {
    alert('hello');
}

$(document).ready(function() {
    common();
    // do some page-specific stuff
});

我不同意在每个页面上执行各种检查，因此代码知道我们在哪里。这似乎很麻烦，完全可以避免，例如：

function doAnimation() {
    $("#element_1").fadeIn();
    $("#element_2").delay('100').fadeIn();
    $("#element_3").delay('200').fadeIn();
}

$(document).ready(function() {
    if(window.location.href == 'http://example.com/foo') {
        doAnimation();
    }
    if(this page has blah) {
        doBlah();
    }
});

理想情况下，应该的是：

$(document).ready(function() {
    // do stuff for foo.php
});

仅对某些页面执行jquery效果/操作

2 个答案: