jQuery不会在页面上执行,但在JSFiddle中执行
jQuery won't execute on page but does in JSFiddle
我做了一个jQuery代码。 它在JSFiddle上运行得很好,但在我的页面上不起作用。我检查了其他问题和解决方案,但没有一个帮助我,所以我再次询问。
代码如下:
.HTML:
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h1>Tic Tac Toe</h1>
<hr/>
<p>Click play to start playing!</p>
<div id="buttonPlay">Play!</div>
<div id="can">
<canvas id="s1" class="square"></canvas>
<canvas id="s2" class="square"></canvas>
<canvas id="s3" class="square"></canvas>
<br/>
<canvas id="s4" class="square"></canvas>
<canvas id="s5" class="square"></canvas>
<canvas id="s6" class="square"></canvas>
<br/>
<canvas id="s7" class="square"></canvas>
<canvas id="s8" class="square"></canvas>
<canvas id="s9" class="square"></canvas>
<h3>Wins: </h3>
<br/>
<h3>Loses: </h3>
</div>
</body>
</html>
.CSS:
body {
}
h1 {
text-align: center;
}
p {
text-align: center;
font-size: 24px;
display: block;
}
#buttonPlay {
width: 90px;
height: 50px;
background-color: lime;
border: 1px solid black;
text-align: center;
font-size: 32px;
box-shadow: 5px 5px 10px #888;
display: block;
margin-left: 47%;
}
#buttonPlay:hover {
background-color: lightblue;
}
#buttonPlay:active {
background-color: lightblue;
width: 85px;
height: 45px;
box-shadow: 0px 0px 0px;
}
#can {
display: none;
margin-left: 44%;
margin-top: 100px;
}
.square {
width: 50px;
height: 50px;
border: 3px solid black;
font-size: 25px;
text-align: center;
}
JavaScript:
$(document).ready(function() {
$('#buttonPlay').click(function() {
$("p").css("background-color","yellow");
});
});
如您所见,它是wip,但我不得不停止,因为jQuery不起作用。
请在这里帮助我。
问题解决了! 感谢您的回答^^
你在脚本之后包含 jQuery...您的脚本尚无权访问$
。改变:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
你必须
在使用jQuery的其他脚本文件之前包含jQuery库,否则它将无法访问jQuery方法。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
将http:放在src="之前可能会起作用
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
在本地工作时,请使用 http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
,而不是//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
,因为本地的"协议"是 file://的,而不是 http://的。
相关文章:
- Var工作,但在使用数组执行相同操作时停止
- jQuery成功处理程序未在生产服务器上执行,但在dev中运行良好
- 对象在循环中运行时未定义,但在按顺序执行时未定义
- 函数在控制台中正确执行,但在代码中不正确
- JS函数如何/为什么不能'不能在代码中执行,但在chrome控制台中运行良好
- MVC $.ajax 调用从不对编辑执行控制器操作,但在添加时有效
- 在 Java 脚本中使用追加时 HTML 标记不起作用,但在执行硬编码时 html 代码工作正常
- 如何防止执行脚本但在 DOM 中显示它
- JS验证在正常速度下失败,但在单步执行代码时有效
- 当HTML和PHP代码已经完成执行但页面仍在加载时,可能是什么原因
- 在 JavaScript 中按特定键执行某些操作在 Chrome 中有效,但在 Firefox 中不起作用
- eval_in_page javascript执行在firefox中有效,但在phantomjs中无效
- Search在本地服务器上提交,但在远程服务器上不执行任何操作
- 尽管脚本只运行了40秒(并且在此之前运行了很长时间),但在GAS中超过了最大执行时间错误
- Date()在网站脚本中不考虑夏令时,但在Firefox控制台中执行时可以
- 更新多个订阅,但在淘汰赛中只执行一次更新
- 如何在没有脚本标记但在js文件中的javascript中执行http回调请求
- Javascript代码在点击按钮时执行,但在按回车键时不执行
- 使用滚轮单击链接会在新选项卡中打开,但在执行右键单击+打开新选项卡时不会打开
- JavaScript 在 MSVS 上执行和工作,但在发布时不起作用