我查看了数十个 Stack Overflow 问题并在 Google 上搜索了一千种不同的解决方案，但我似乎无法找出问题所在。我对 Web 开发一窍不通，我只想 this simple page上类。有人可以告诉我我做错了什么吗？一个简单的解决方案可能是一个非常愚蠢的错误。我提前道歉。谢谢!
我的 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);
});
我知道我的代码没有问题，因为 my CodePen工作得很好。我的 CSS 和 JS 都是外部文件。如您所见，CSS 完美运行。不知道我在 JS 上做错了什么。
编辑:
我重新订购了我的 <link>和 <script>按照评论的建议添加标签，但仍然没有。
最佳答案
理想情况下，您希望首先包含 jQuery，然后是 Bootstrap (或其他依赖于 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>
关于javascript - 为什么我的 jQuery 脚本不工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45039541/