为什么JavaScript无法运行?

时间:2016-02-16 04:14:45

标签: javascript jquery html css

Index.html和stylesheet.css运行良好,但是script.js无法工作(它提供了datepicker函数),为什么它无法正常工作。我调试了一段时间。任何人都可以帮助我吗?谢谢。

index.html:

    <!DOCTYPE html>
<html>
    <head>
        <title>Pick a Date</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'/>
        <script type='text/javascript' src='script.js'></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    </head>
    <body>
        <div id="header">
            <h2><br/>Select a Destination</h2>
        </div>
        <div class="left">
            <p>Departing: <input type="text" id="departing"></p>
        </div>
        <div class="right">
            <p>Returning: <input type="text" id="returning"></p>
        </div><br/>
        <div id="main">
            <p>Destination: <select id="dropdown">
                <option value="newyork">New York</option>
                <option value="london">London</option>
                <option value="beijing">Beijing</option>
                <option value="moscow">Moscow</option>
            </select></p>
            <button>Submit</button>
        </div>
    </body>
</html>

stylesheet.css中:

body {
    background-color: #d0e4fe;
}

h2 {
    font-family: Verdana, Arial, sans-serif;
    text-align: center;
    color: #FFFFFF;
}

#header {
    width: 100%;
    height: 70px;
    position: relative;
    top: -40px;
    background-color: #7FC7AF;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

p {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1em;
}

.left {
    position: relative;
    top: -40px;
    float: left;
}

.right {
    position: relative;
    top: -40px;
    float: right;
}

#main {
    position: relative;
    top: 170px;
    float: left;
}

的script.js:

$(document).ready(function() {
    $("#departing").datepicker();
    $("#returning").datepicker();
    $("button").click(function() {
        var selected = $("#dropdown option:selected").text();
        var departing = $("#departing").val();
        var returning = $("#returning").val();
        if (departing === "" || returning === "") {
            alert("Please select departing and returning dates.");
        } else {
            confirm("Would you like to go to " + selected + " on " + departing + " and return on " + returning + "?");
        }
    });
});

4 个答案:

答案 0 :(得分:1)

您已添加。这将加载jquery-ui

<a href="login.php"><div id="register" class="lay2"><div id="registert">Sign In/Up</div></div>

但还需要包括

0) shut down service mysql56

1) go to C:\ProgramData\MySQL\MySQL Server 5.6
 (note that ProgramData is a hidden folder)

2) look for file my.ini, open it and add one line skip-grant-tables below [mysqld],
      save  [mysqld]

skip-grant-tables
3) start service mysql56

4) by right, you can access the database, and use the query below to update the password

update mysql.user set password=PASSWORD('NEW PASSWORD') where user='root';
5) shun down the service again, remove the line skip-grant-tables save it, and start the service again. try to use the password you set to login.

将加载jquery。

在任何自定义js文件之前还包括jquery.min

我包含了2.2.0版本,您可以根据需要进行更改

ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

答案 1 :(得分:1)

您的脚本没有按正确的顺序包含在内,并且它并不会显示您实际上包含jQuery本身。

所需的顺序应为:

  1. 的jQuery
  2. jQueryUI的
  3. 日期选择器
  4. 此外,调试控制台可能会为您提供有用的错误消息,这些消息是在加载某些脚本时未定义某些内容的线索。这是一个尚未加载某些依赖脚本的线索。

答案 2 :(得分:1)

在自定义JQuery脚本之前包含JQuery脚本 像这样:

<head>
    <title>Pick a Date</title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'/>
    <!-- You need this script too -->
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type='text/javascript' src='script.js'></script>
</head>  

这是因为您的自定义JS脚本使用JQuery中的函数,因此必须在自定义脚本之前加载它。

注意:建议在body标签的底部包含 Scipts。

另外,您需要在JQuery UI之前包含JQuery

答案 3 :(得分:0)

请记住,如果使用派生的jQuery库,则必须首先包含jQuery核心。我认为这就是缺失的东西。

您可以在此处找到它:https://code.jquery.com/