$ 未在我的 JavaScript 控制台中定义

$ is not defined in my javascript console

本文关键字：控制台 定义 JavaScript 我的      更新时间：2023-09-26

我正在学习编程并在第一个网站上尝试。每次运行代码时，我都会收到错误$ is not defined行$(document).ready(function(){ 我在下面添加了一些代码，提前感谢。

$(document).ready(function(){
var mechanical = {
        program: "Engineering",
        course: "Mechanical Engineering",
        tuition: 1000000
    }
    var electrical = {
        program: "Engineering",
        course: "Electrical Engineering",
        tuition: 1000000
    }
    var telecom = {
        program: "Engineering",
        course: "Telecom Engineering",
        tuition: 1000000
    }
    var civil = {
        program: "Engineering",
        course: "Civil Engineering",
        tuition: 1000000
    }
    var courses = [mechanical, electrical, telecom, civil];
    if ($('#program_selector').text() == "Engineering"){
        //then load engineering courses
        var selectedCourses = [];
        for (var i = 0; courses[i]; i++){
            if (courses[i].program == "Engineering") {
                //find courses where program is engineering and add name to selected courses array
                //selectedCourses.push(courses[i].program);
                //add to options to select
                var x = document.getElementById("#course_selector");
                var option = document.createElement("option");
                option.text = courses[i].program;
                x.add(option);
            }
        }
    }
    else if ($('#program_selector').text() == "Agriculture") {
        //then load the agriculture courses
        var selectedCourses = [];
        for (var i = 0; courses[i]; i++){
            if (courses[i].program == "Agriculture") {
                //find courses where program is engineering and add name to selected courses array
                //selectedCourses.push(courses[i].program);
                //add to options to select
                var x = document.getElementById("#course_selector");
                var option = document.createElement("option");
                option.text = courses[i].program;
                x.add(option);
            }
        }
    }
    else if ($('#program_selector').text() == "Ict") {
        //then load ICT courses
        var selectedCourses = [];
        for (var i = 0; courses[i]; i++){
            if (courses[i].program == "Ict") {
                //find courses where program is engineering and add name to selected courses array
                //selectedCourses.push(courses[i].program);
                //add to options to select
                var x = document.getElementById("#course_selector");
                var option = document.createElement("option");
                option.text = courses[i].program;
                x.add(option);
            }
        }
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>Victoria Webpage</title>
        <link rel="stylesheet" type="text/css" href="assets/style.css">
        <script src="assets/script.js"></script>
        <script src="assets/jquery-2.1.3.min.js"></script>
</head>
    <body>
        <div width="100%"; class="main">
            <div class="header">
                <div class="title">
                    <h1 align="center"; style = "background-color: red;color:white;">Victoria College</h1>
                </div>
                <div class="navigation">
                    <div class="navigation-right">
                        <ul class="nav_list">
                            <li class="nav_tabs"><a href="index.html">Home</a></li>
                            <li class="nav_tabs"><a href="about_us.html">About Us</a></li>
                            <li class="nav_tabs"><a href="programs.html">Programs</a></li>
                            <li class="nav_tabs"><a href="tuition.html">Tuition</a></li>
                            <li class="nav_tabs"><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <h1 style="color:blue">TUITION AND COURSE FILLING FORM</h1>
            <form id="costForm" >
    <div>
        <label id="program_selector">Sector:</label>
        <!--<input type="text" name="sector" id="sector" tabindex="1">-->
        <select>
            <option></option>
            <option>Engineering</option>
            <option>Ict</option>
            <option>Agriculture</option>
        </select>       
    </div>
    <br>
    <div>
        <label id="course_selector">Course:</label>
        <!--<input type="text" name="course" tabindex="1">-->
        <select>
            <option></option>
        </select>
    </div>  
    <br>        
    <div>
        <label for="annual_tuition">Annual Tuition:</label>
        <input type="value" name="annual_tuition" id="annual_tuition" value="" tabindex="1">
     </div>
     <br>
        <div>
        <label for="semester_tuition">Semester tuition:</label>
        <input type="value" name="semester_tuition" id="semester_tuition" value="" tabindex="1">
     </div>
     <br>
    <div>
         <button id="cost" type="button">Calculate</button>
    </div>
    <br>
    <div id="costTotal"></div>
</form>
            <div align="center" class="footer">victoriacollege.sc</div> 
        </body> 
</html>
你

必须先下载jQuery jQuery

下载 jQuery 后.js将其放在 HTML 文件所在的目录中，并放入 HTML 编写<script src = 'jquery.js' ></script>的 <head> 元素中

导入 jQuery 脚本，在 html 中添加 <script> 标记之前：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

更新：

问题

编辑后，我看到了问题：

<script src="assets/script.js"></script>
<script src="assets/jquery-2.1.3.min.js"></script>

你正在加载你的脚本，这是在实际的jQuery脚本之前，这是使用jQuery的。订单很重要！

修复：（加载库脚本，然后加载代码）

<script src="assets/jquery-2.1.3.min.js"></script>
<script src="assets/script.js"></script>

1）你在html代码之外编写了JQuery代码。

您已经包含了 JQuery 库，但您应该在此之后并在脚本标签中编写 JQuery 代码，无论是在头部还是身体标签中。

也 $（document）.ready（function（）{....}）;或 jQuery（document）.ready（function（）{....}）;

2）你混淆了核心JavaScript和JQuery代码，但你应该遵循其中一个在你的代码中有一个标准。

例如 document.getElementById（"#course_selector"）;不是一个正确的方法。

我假设你的Javascript代码存储在文件«script.js»中。jQuery-Library 在该脚本之后加载。这意味着，变量 «$» 在您实际尝试使用它后被定义。只需像这样更改脚本标签的顺序：

<script src="assets/jquery-2.1.3.min.js"></script>
<script src="assets/script.js"></script>

在调用 jQuery 之前，你必须包含它，所以将整个 $（document）.ready 函数移到

<script src="assets/jquery-2.1.3.min.js"></script>

线。 之后的任何地方都很好。

相关文章：