你能在$(document).ready()调用中选择目标文档吗

Question

是否可以在$(document).ready();函数中选择目标页面？

所以类似的东西

$('page1.html').ready();

提前感谢！

Answer 1

只有document具有ready()函数（当DOM完全加载时执行的函数）。也就是说，你可以做以下事情：

$(document).ready(function() {
    if ( document.location.pathname === '/page1.html' ) {
        // Some action
    }
});

Answer 2

这些是jQuery（又名jQuery DOM Ready）中通常使用的不同类型的Document Ready函数。许多开发人员似乎在不知道原因的情况下使用它们。因此，我将尝试解释为什么您可能会选择一个版本而不是另一个版本。将文档就绪函数视为一个自执行函数，它在加载页面元素后启动。

有关如何使用Document Ready函数的更多信息，请参阅在哪里声明jQuery函数。

文档就绪示例1

$(document).ready(function() {
    //do jQuery stuff when DOM is ready
});

文档就绪示例2

$(function(){ 
    //jQuery code here 
});

这相当于示例1…它们的字面意思相同。

文档就绪示例3

jQuery(document).ready(function($) {
    //do jQuery stuff when DOM is ready
});

添加jQuery可以帮助防止与其他JS框架发生冲突。

为什么会发生冲突？冲突通常是因为许多JavaScript库/框架使用相同的快捷方式而发生的名称，即美元符号$。然后，如果它们具有相同的命名函数，浏览器将获得困惑的

我们如何防止冲突？好吧，为了防止冲突，我建议对jQuery命名空间进行别名处理（即使用上面的示例3）。然后，当您调用$.noConflict（）以避免命名空间困难时（因为$快捷方式不再可用）每次需要jQuery时，我们都会强制它写入jQuery。

jQuery.noConflict(); // Reverts '$' variable back to other JS libraries
jQuery(document).ready( function(){ 
         //do jQuery stuff when DOM is ready with no conflicts
   });  
//or the self executing function way
 jQuery.noConflict();
 (function($) { 
    // code using $ as alias to jQuery
})(jQuery);

文档就绪示例4

(function($) { 
    // code using $ as alias to jQuery
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

通过这种方式，您可以将函数嵌入到同时使用$作为jQuery别名的函数中。

文档就绪示例5

$(window).load(function(){  
    //initialize after images are loaded  
});

有时你想处理图片，而使用$（document）.ready（）你将无法做到这一点如果访问者没有加载图像。在这种情况下，您需要初始化jQuery对齐功能。

您也可以使用纯JavaScript，并在html中附加一个调用body标记的函数，只有在不使用JS框架的情况下才能使用它。

阅读更多：http://api.jquery.com/ready/

Answer 3

您可以这样做。

// same as $(document).ready() |$(document).on('ready) etc.
$(function(){
    function loader(){
       var $element = $('Your Pointer to element');
       //If the number of elements matching the pointer is greater than 0
        if($element.length > 0) { 
           //its loaded
     }
     else {
         //since it isn't loaded , repeat in 250ms to see if it is
         setTimeout(function(){ loader(); }, 250); 
     }
 }

这是一种方法。这不是一个完美的解决方案，因为你从来没有真正想要在脚本中使用setTimeouts，但由于我不知道你的代码的其余部分在做什么，这将是我能提出的最好的建议。