為什么我的jQuery腳本不起作用？

Question

我研究了數十個Stack Overflow問題，並使用Google搜索了一千種不同的解決方案，但我似乎無法弄清問題所在。 我是Web開發的入門者，我只希望這個簡單的頁面可以工作。 有人可以告訴我我在做什么錯嗎？ 一個簡單的解決方案可能是一個非常愚蠢的錯誤。我事先表示歉意。 謝謝！

我的HTML頭：

  <head>
    <meta charset="utf-8">
    <title>Sheila Mary Daniels</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Local scripts and sheets -->
    <link rel="stylesheet" href="style.css">
    <script type = "text/javascript" src="script.js" charset="utf-8"></script>
    <!-- jQuery -->
    <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
    <!-- Bootstrap -->
    <script type = "text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <!-- Font Awesome -->
    <script src="https://use.fontawesome.com/7dd8dcb030.js"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Sofia" rel="stylesheet">
  </head>

我的CSS：

（效果很好）

body {
  margin-top: 60px;
  background-image: url("https://flowerillust.com/img/flower/flower-back0950.jpg");
  background-size: cover;
}

#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 900px;
}

p {
  font-size: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}

#header {
  margin-bottom: 10px;
  font-size: 70px;
  color: Purple;
  font-family: Dancing Script;
  /* font-family: Sofia */
}

.scripture {
  font-family: Dancing Script;
  float: right;
  margin-right: 150px;
}

a:hover {
  text-decoration: underline;
}

我的JavaScript：

$(document).ready(function() {
  $("#header").hide().fadeIn(5000);
  $("#image").hide().fadeIn(5000);
});

我知道我的代碼沒有錯，因為我的CodePen可以正常工作。 我的CSS和JS都是外部文件。 如您所見，CSS可以完美地工作。 不知道我在用JS做錯了什么。

編輯：

我已經按照注釋的建議重新排列了<link>和<script>標記，但仍然沒有。

Answer 1

更改您的js文件的順序

首先使用JQuery

<script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script type = "text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>

Answer 2

我猜您需要在bootsstap.js文件之前添加Jquery。 這可能是潛在原因。重新排序后請嘗試。

<script type = "text/javascript"
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>

Answer 3

理想情況下，您要先包含jQuery，然后包含引導程序（或其他依賴jQuery的下載腳本），然后包含自定義腳本

所以會是這樣

<!-- jQuery -->
    <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQueryUI -->
    <script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<!-- Bootstrap -->
    <script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<!-- Font Awesome -->
    <script src="https://use.fontawesome.com/7dd8dcb030.js"></script>
<!-- custom script -->
    <script type = "text/javascript" src="script.js" charset="utf-8"></script>

為什么我的jQuery腳本不起作用？

問題描述

我的HTML頭：

我的CSS：

我的JavaScript：

編輯：

3 個解決方案

解決方案1
1 2017-07-11 16:08:52

解決方案2
1 2017-07-11 16:08:56

解決方案3
1 已采納 2017-07-11 16:21:57

為什么我的jQuery腳本不起作用？

問題描述

我的HTML頭：

我的CSS：

我的JavaScript：

編輯：

3 個解決方案

解決方案1 1 2017-07-11 16:08:52

解決方案2 1 2017-07-11 16:08:56

解決方案3 1 已采納 2017-07-11 16:21:57

解決方案1
1 2017-07-11 16:08:52

解決方案2
1 2017-07-11 16:08:56

解決方案3
1 已采納 2017-07-11 16:21:57