外部.js文件正在加载＆amp;有效，但jQuery不起作用

Question

我有一个外部的.js文件正在加载并且确实有效，但是它中的jQuery并不起作用。当我在index.html文件中粘贴以下代码时，它可以工作：

<script>
  $( "div" ).css( "border", "9px solid red" );
</script>

所有div都获得红色9x实心边框。但是，当我将完全相同的代码粘贴到我的.js文件中时（减去<script>标记），它就无法正常工作。

我知道外部.js文件实际上正在运行，因为我已使用普通的javaScript alert("JS is working");对其进行了测试。

在脚本文件之前调用jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scripts.js"></script>

如果我通过在外部文件中粘贴以下代码来检查jQuery，我会得到＆＃34; jQuery已加载＆＃34;：

if (window.jQuery) {  
  alert("jQuery is loaded");  
} else {
  alert("jQuery is not loaded");  
}

为什么我的jQuery不能使用外部文件？

顺便说一下，控制台没有出现错误。

Answer 1

在外部文件中使用jquery时，需要确保DOM已准备就绪。在独立页面上，只有jquery可以直接工作（就像你说的那样）。但是，使用外部js文件调用时，需要使用以下命令加载jquery代码：

$(document).ready(function(){
    $( "div" ).css( "border", "9px solid red" );
});

或

jQuery(function () { 
 $( "div" ).css( "border", "9px solid red" ); 
});