jQuery不工作-'jQuery在定义之前就已经使用过了;

jQuery not working - 'jQuery was used before it was defined'

本文关键字:jQuery 过了 定义 工作      更新时间:2023-09-26

注意:我是Javascript和jQuery 的新手

我有这个测试代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link href="_css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainArticle">
<h1>This is some test code</h1>
  <p>Lots of text to test this test co</p>
</div>
<script scr="jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

</body>
</html>

这在我的CSS文件中:

.highlight {
background: #ffffcc;
}

然后在我的JS文件中,我有:

jQuery("#mainArticle").addClass("highlight");

我无法让它发挥作用。我的div的背景没有应用"highlight"。我的JS文件中的错误一直在说"jQuery是在定义之前使用的"。我不知道该怎么办。

代码中有语法错误scr应该是src

<script scr="jquery-1.11.3.min.js">  

应该是

<script src="jquery-1.11.3.min.js">

小心愚蠢的错误,特别是在HTML中,你不会得到任何错误。

    //jQuery linked
    <script scr="jquery-1.11.3.min.js"></script>
    <script>
    //Perform Operation after jQuery Loaded
    $( document ).ready(function() {
        $('#mainArticle').addClass("highlight");
    });
    </script>

您也可以调用以下脚本:

<script src="jquery-1.11.3.min.js"></script>
<script>
$( document ).ready(function() {
    $('#mainArticle').addClass("highlight");
});
</script>

正如上面所建议的那样,addClass工作得非常好。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script src="jquery-1.11.3.min.js"></script>
 <script>
 $( document ).ready(function() {
        $('#mainArticle').addClass("highlight");
   });
    </script>
</head>
<body>
<div id="mainArticle">
<h1>This is some test code</h1>
  <p>Lots of text to test this test co</p>
</div>
</body>
</html>

尝试

// First try loading jQuery from Google's CDN
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
// Fall back to a local copy of jQuery if the CDN fails
<script>
window.jQuery || document.write('<script src="http://test.com/jquery.min.js"><'/script>'))
</script>

在您的js文件中

(function($) {
     $('#mainArticle').addClass("highlight");
})(jQuery);

通过firebug Jquery没有定义这种类型的错误是由以下原因之一引起的:-

JS文件未正确加载
您的javascript在页面完全加载之前运行
您已经编辑了核心Jquery文件,或者插件可能已经覆盖了$变量。

通过检查代码,它应该是

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link href="_css/main.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<style type="text/css">
.highlight {
background: #ffffcc;
}
</style>
</head>
<body>
<div id="mainArticle">
<h1>This is some test code</h1>
  <p>Lots of text to test this test co</p>
</div>
<script scr="jquery-1.11.3.min.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
jQuery("#mainArticle").addClass("highlight");
</script>
</body>
</html>