jQuery在底部不起作用，但在头部起作用？
[英]Jquery doesn't work on the bottom, but works in the head?
问题描述
function closeMessage(el) { el.addClass('is-hidden'); } $('.js-messageClose').on('click', function(e) { closeMessage($(this).closest('.Message')); }); $(document).ready(function() { setTimeout(function() { closeMessage($('#js-timer')); }, 5000); });
* { box-sizing: border-box; } .Message { display: table; position: relative; margin: 40px auto 0; width: auto; background-color: #0074d9; color: #fff; transition: all 0.2s ease; } .Message.is-hidden { opacity: 0; height: 0; font-size: 0; padding: 0; margin: 0 auto; display: block; } .Message--orange { background-color: #f39c12; } .Message--red { background-color: #ff4136; } .Message--green { background-color: #2ecc40; } .Message-icon { display: table-cell; vertical-align: middle; width: 60px; padding: 30px; text-align: center; background-color: rgba(0, 0, 0, 0.25); } .Message-icon > i { width: 20px; font-size: 20px; } .Message-body { display: table-cell; vertical-align: middle; padding: 30px 20px 30px 10px; } .Message-body > p { line-height: 1.2; margin-top: 6px; } .Message-button { position: relative; margin: 15px 5px -10px; background-color: rgba(0, 0, 0, 0.25); box-shadow: 0 3px rgba(0, 0, 0, 0.4); border: none; padding: 10px 15px; font-size: 16px; font-family: 'Source Sans Pro'; color: #fff; outline: none; cursor: pointer; } .Message-button:hover { background: rgba(0, 0, 0, 0.3); } .Message-button:active { background: rgba(0, 0, 0, 0.3); box-shadow: 0 0px rgba(0, 0, 0, 0.4); top: 3px; } .Message-close { position: absolute; background-color: rgba(0, 0, 0, 0.3); color: #fff; border: none; outline: none; font-size: 20px; right: 5px; top: 5px; opacity: 0; cursor: pointer; } .Message:hover .Message-close { opacity: 1; } .Message-close:hover { background-color: rgba(0, 0, 0, 0.5); } .u-italic { font-style: italic; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="Message"> <div class="Message-icon"> <img class="icn-img" src="img/turkey.png"> </div> <div class="Message-body"> <h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones! </h3> <p style="text-align: center;">"There is always something to be thankful for."</p> <button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button> </div> <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button> </div> <script src="js/jquery-3.2.1.js"></script> </body>
我读了一个类似的问题，一个人回答说脚本应该总是在HTML的底部。 事实是，当我这样做时，我的代码脚本不再起作用了。 这是因为我将Jquery放在底部。 我正在使用3.2.1版。
作品： <head><script src="js/jquery-3.2.1.js"></script></head>
不起作用： <body><script src="js/jquery-3.2.1.js"></script></body>
小提琴： https ： //jsfiddle.net/dhtzL8cz/
它以某种方式在小提琴中起作用，但对我而言却不是。
3 个解决方案
解决方案1
4 已采纳 2017-11-24 09:24:39
需要先加载jQuery库，然后才能加载包含jQuery代码的自定义js文件。
例如，如果您有一个其中编写了jquery代码的script.js文件，则需要在jquery.js之后加载。
否则，您的代码将无法正常工作。 如果在您的身体底部加载jquery.js，则浏览器将首先在jquery之前加载整个html，从而引起问题。
不必将js文件放在底部。 这完全取决于您的需要。 可以将dom加载之前不需要加载的JS文件放在底部。
例如，如果您有一个tracking.js文件来跟踪用户的行为，则可以将其放在底部。
希望这可以帮助 ：）
解决方案2
0 2017-11-24 09:39:51
在调用此脚本之前，您可能正在加载需要jQuery的脚本。
<body>
<script src="js/[your custom scripts]"></script>
<script src="js/jquery-3.2.1.js"></script>
</body>
调用jquery 后，应添加这些脚本
<body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/[your custom scripts]"></script>
</body>
如果由于某种原因这是不可能的，则可以设置一个事件侦听器，以便在装入整个页面资产并将它们包装后，如下运行它们：
document.addEventListener("DOMContentLoaded", function(event) {
enter code here//The content of your scripts here
});
解决方案3
0 2017-11-24 09:50:47
在文件夹中的jQuery正常工作后调用自定义jQuery代码，您只需在页脚中导入jQuery后校准自定义jQuery代码即可。 希望能帮助到你。
这是它的codepen链接
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.Message {
display: table;
position: relative;
margin: 40px auto 0;
width: auto;
background-color: #0074d9;
color: #fff;
transition: all 0.2s ease;
}
.Message.is-hidden {
opacity: 0;
height: 0;
font-size: 0;
padding: 0;
margin: 0 auto;
display: block;
}
.Message--orange {
background-color: #f39c12;
}
.Message--red {
background-color: #ff4136;
}
.Message--green {
background-color: #2ecc40;
}
.Message-icon {
display: table-cell;
vertical-align: middle;
width: 60px;
padding: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
.Message-icon > i {
width: 20px;
font-size: 20px;
}
.Message-body {
display: table-cell;
vertical-align: middle;
padding: 30px 20px 30px 10px;
}
.Message-body > p {
line-height: 1.2;
margin-top: 6px;
}
.Message-button {
position: relative;
margin: 15px 5px -10px;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 3px rgba(0, 0, 0, 0.4);
border: none;
padding: 10px 15px;
font-size: 16px;
font-family: 'Source Sans Pro';
color: #fff;
outline: none;
cursor: pointer;
}
.Message-button:hover {
background: rgba(0, 0, 0, 0.3);
}
.Message-button:active {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0px rgba(0, 0, 0, 0.4);
top: 3px;
}
.Message-close {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border: none;
outline: none;
font-size: 20px;
right: 5px;
top: 5px;
opacity: 0;
cursor: pointer;
}
.Message:hover .Message-close {
opacity: 1;
}
.Message-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.u-italic {
font-style: italic;
}
</style>
</head>
<body>
<div class="Message">
<div class="Message-icon">
<img class="icn-img" src="img/turkey.png">
</div>
<div class="Message-body">
<h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones! </h3>
<p style="text-align: center;">"There is always something to be thankful for."</p>
<button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
function closeMessage(el) {
el.addClass('is-hidden');
}
$('.js-messageClose').on('click', function(e) {
closeMessage($(this).closest('.Message'));
});
$(document).ready(function() {
setTimeout(function() {
closeMessage($('#js-timer'));
}, 5000);
});
</script>
</body>
</html>
为什么将这段JavaScript代码放在里面时不起作用 <head> 但是当放在底部时可以使用 <body>
[英]Why doesn't this piece of JavaScript code work when placed inside <head> but works when placed at the bottom of <body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.