为什么我的jQuery脚本不起作用？
[英]Why is my jQuery script not working?
问题描述
I've looked at dozens of Stack Overflow questions and Googled a thousand different solutions and I just can't seem to figure out the problem. 
我研究了数十个Stack Overflow问题，并使用Google搜索了一千种不同的解决方案，但我似乎无法弄清问题所在。 I'm a total noob to web development and I just want this simple page to work. 我是Web开发的入门者，我只希望这个简单的页面可以工作。 Can someone please show me what I'm doing wrong? 有人可以告诉我我在做什么错吗？ It's probably a really dumb mistake with an easy solution.I do apologize in advance. 一个简单的解决方案可能是一个非常愚蠢的错误。我事先表示歉意。 Thanks! 谢谢！
My HTML head: 我的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>
My CSS: 我的CSS：
(which works just fine) （效果很好）
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;
}
My JavaScript: 我的JavaScript：
$(document).ready(function() {
$("#header").hide().fadeIn(5000);
$("#image").hide().fadeIn(5000);
});
I know there's nothing wrong with my code because my CodePen works just fine. 我知道我的代码没有错，因为我的CodePen可以正常工作。 Both my CSS and my JS are external files. 我的CSS和JS都是外部文件。 As you can see the CSS works perfectly. 如您所见，CSS可以完美地工作。 No idea what I'm doing wrong with the JS. 不知道我在用JS做错了什么。
EDIT: 编辑：
I've reordered my <link> and <script> tags as the comments suggested and still nothing. 我已经按照注释的建议重新排列了<link>和<script>标记，但仍然没有。
3 个解决方案
解决方案1
1 2017-07-11 16:08:52
change the order of your js files 更改您的js文件的顺序
use JQuery first 首先使用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>
解决方案2
1 2017-07-11 16:08:56
I guess you need to add Jquery before bootstap.js file. 我猜您需要在bootsstap.js文件之前添加Jquery。 This may be the potential reason.Just try after reordering it. 这可能是潜在原因。重新排序后请尝试。
<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>
解决方案3
1 已采纳 2017-07-11 16:21:57
Ideally, you want to include jQuery first, then bootstrap (or other downloaded scripts that depends of jQuery), then your custom script 理想情况下，您要先包含jQuery，然后包含引导程序（或其他依赖jQuery的下载脚本），然后包含自定义脚本
so it would be like this 所以会是这样
<!-- 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.