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.