外部 jQuery 脚本无响应

External jQuery script unresponsive

本文关键字：响应 脚本 jQuery 外部      更新时间：2023-09-26

我是jQuery新手，我正在尝试使用它更改CSS属性（颜色）。当jQuery脚本嵌入到HTML中时，CSS属性更改成功。虽然当通过外部文件加载jQuery时，同样不起作用，如下所示。

这是我的测试用例，它不起作用。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/colourChange.js"></script>
</head>
<body>
<h2 id="heading">HTML</h2>
<p><span class="keyword">HTML</span> is a markup language for describing web documents (web pages). <span class="keyword">HTML</span> stands for Hyper Text Markup Language.</p>
</body>
</html>

colourChange.js如下：

$("#heading").hover(function(){
$(".keyword").css("color", "blue");
});

我在调用colourChange.js之前加载jquery.min.js，但是，它不起作用。知道这里可能出了什么问题吗？

在执行代码之前，您需要确保元素已完全加载。将其包装在准备好的文档中：

$( document ).ready(function() {
   $("#heading").hover(function(){
      $(".keyword").css("color", "blue");
   });
});

标题也是一个 id，因此它需要在选择器中使用"#"符号而不是"."（这用于类）。

由于heading是一个css id你的代码应该是这样的：

$("#heading").hover(function(){
$(".keyword").css("color", "blue");
});
你需要在

$（document）.ready 中编写代码

$(document).ready(function() {
  $("#heading").hover(function(){
    $(".keyword").css("color", "blue");
  });
});

由于"标题"是一个 ID，因此将 . 更改为 #

相关文章：