我在使jQuery在最简单的级别上运行时遇到麻烦
[英]I'm having trouble getting my jQuery to work on the simplest level
问题描述
Ok, so this is a total noob question. 
好的，这是一个完全的菜鸟问题。 I'm trying to build a site from scratch using HTML, CSS, and JavaScript and I want to use jQuery. 我正在尝试使用HTML，CSS和JavaScript从头开始构建网站，而我想使用jQuery。 For some reason I can get the HTML and CSS working but I can't use jQuery in my script.js file. 出于某种原因，我可以使HTML和CSS正常工作，但是无法在script.js文件中使用jQuery。 I've downloaded jQuery: 我已经下载了jQuery：
And I've linked to it with a <script> tag, but when I try to use what I've built, nothing happens. 而且我已经用<script>标记链接了它，但是当我尝试使用自己构建的内容时，什么也没有发生。
My HTML: 我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Freeflow Academy</title>
<link rel='stylesheet' type='stylesheet' href='stylesheet.css'>
<link rel='stylesheet' type='stylesheet' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css' />
<script type='text/javascript' src='script.js'></script>
<script type='text/javascript' src="jquery-2.2.0.min.js"></script>
</head>
<body>
<p>This is a test</p>
</body>
</html>
My CSS: 我的CSS：
p {
background-color: blue;
}
My JavaScript with jQuery: 我的jQuery JavaScript：
$(document).ready(function(){
$('p').on('click', function(){
$(this).css('background-color','red');
});
});
All I'm trying to do is get the background color to change on a click. 我要做的就是让背景色在单击时改变。 Any help is appreciated. 任何帮助表示赞赏。 I think the problem has to do with my <script> or <link> tags, but I'm not sure which. 我认为问题与我的<script>或<link>标记有关，但是我不确定是哪个。
6 个解决方案
解决方案1
3 已采纳 2016-02-07 17:45:00
First load jQuery, then your custom script 首先加载jQuery，然后加载您的自定义脚本
<script type='text/javascript' src="jquery-2.2.0.min.js"></script>
<script type='text/javascript' src='script.js'></script>
The loading priority is from top to bottom, if jQuery is not loaded before script loads, it won't work. 加载优先级从上到下，如果在脚本加载之前未加载jQuery，它将无法正常工作。
解决方案2
0 2016-02-07 17:45:30
Order is not correct, first load jquery and then script 顺序不正确，请先加载jquery，然后执行脚本
<script type='text/javascript' src="jquery-2.2.0.min.js"></script>
<script type='text/javascript' src='script.js'></script>
解决方案3
0 2016-02-07 17:47:37
Based on your example you're loading your custom JavaScript before you're loading jQuery. 根据示例，您在加载jQuery之前先加载自定义JavaScript。
load-order 加载顺序
<script src="jquery-2.2.0.min.js"></script>
<script src="script.js"></script>
Also, but un-related to JavaScript errors is your ordering of stylesheets and the type attribute value you are using, which should be type="text/css" . 另外，与样式表的顺序和所使用的type属性值无关，但与JavaScript错误无关，它们应为type="text/css" 。
解决方案4
0 2016-02-07 17:55:51
Try mentioning charset for script tags with correct order of tags. 尝试使用正确的标签顺序为脚本标签提及字符集。
<script type='text/javascript' src="jquery-2.2.0.min.js"></script>
<script type='text/javascript' charset="UTF-8" src='script.js'></script>
解决方案5
0 2016-02-07 18:01:10
<!DOCTYPE html>
<html>
<head>
<title>Freeflow Academy</title>
<link rel="stylesheet" type="stylesheet" href="stylesheet.css">
<link rel="stylesheet" type="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
</head>
<body>
<p>This is a test</p>
<script type="text/javascript" src="jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
First of all, a best practice is to load your scripts (jquery, your custom scripts and so on) at the end of the file. 首先，最佳实践是在文件末尾加载脚本（jquery，自定义脚本等）。 Also, I will go for a CDN. 另外，我将申请CDN。 You can find few reasons why to do this here (just google it). 您可以在这里找到几个这样做的理由（只需在Google上搜索）。
The quotes, single or double, depends just by your style. 单引号或双引号取决于您的样式。 I m going for double, but just keep them everywhere in a single way, keep your code clean :D. 我要加倍努力，但只要以一种单一的方式将它们保存在各处，就可以保持代码干净：D。
The single reason that could be, despite the script order from your post, is your Apache settings. 尽管您的帖子中的script顺序可能是唯一的原因是Apache设置。 Maybe the relative paths and directory root are not the correct ones. 相对路径和目录根目录可能不正确。 You can have a look here 你可以在这里看看
解决方案6
0 2016-02-07 18:19:24
As stated already, the loading order is important. 如前所述，加载顺序很重要。 Also it's a good idea to load jquery from their cdn like so: 同样，从CDN加载jquery也是一个好主意，如下所示：
<script type='text/javascript' src="//code.jquery.com/jquery-2.2.0.min.js></script>
<script type='text/javascript' src='script.js'></script>
Also to make sure all external resources are loaded with the right protocol (eg http or https) strip of the http: part in the href= : 同样要确保所有外部资源都已加载href= http:部分的正确协议（例如，http或https）：
<link rel='stylesheet' type='stylesheet' href='//code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
Should you still get the error after updating your code, try clearing your browser cache. 更新代码后，如果仍然出现错误，请尝试清除浏览器缓存。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.