Question

我正在学习编程并在第一个网站上尝试。每次运行我的代码时，我都会在$ 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>

Answer 1

你必须先下载jQuery jQuery

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

Answer 2

导入jQuery脚本，在您的<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>

Answer 3

1）您已经在html代码之外编写了JQuery代码。

您已经包含了JQuery库，但是之后应该在头部或正文标记内部的脚本标记内编写JQuery代码。

无论哪种 $（文件）。就绪（函数（）{...}）; 要么 jQuery的（文件）。就绪（函数（）{...}）;

2）您已经混淆了核心JavaScript和JQuery代码，但您应该遵循其中一个代码在代码中使用标准。

e.g。的document.getElementById（＆＃34;＃course_selector＆＃34）;不是一个正确的方法。

Answer 4

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

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

Answer 5

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

之后

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

线。之后的任何地方都没事。

我的javascript控制台中没有定义$

5 个答案: