如何将含$(document).ready的jQuery代码迁移至外部.js文件？

首先纠正个小误区：你提到的「Java」应该是JavaScript，你写的是基于jQuery库的JS代码。

$(document).ready()本身完全可以放在外部JS文件中，它不是导致代码无法被外部引用的原因。你遇到的问题大概率是代码语法错误或者引用顺序不对，以下是修正方案：

1. 修正代码语法错误 #

你的原始代码存在未闭合的函数和错误的标点，正确的外部JS文件（myjava.js）内容应该是：

$(document).ready(function(){
  $("div.one").click(function(){
    $("img").removeClass("border_blue");
    $("img").addClass("border_red");
    // 这里补充你剩余的代码...
  }); // 闭合点击事件的回调函数
}); // 闭合document.ready的回调函数

注意：

• 每个语句结尾用分号;而非逗号
• 确保所有function(){都有对应的}闭合

2. 确保正确的引用顺序 #

在HTML页面中，必须先引入jQuery库，再引入你的外部JS文件，否则jQuery的$符号会未定义：

<!-- 先引入jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 再引入你的自定义JS文件 -->
<script type="text/javascript" src="../myjava.js"></script>

只要做到以上两点，这段代码就能通过外部引用正常运行。

内容的提问来源于stack exchange，提问作者Gonzo