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>
fiddle :https://jsfiddle.net/dhtzL8cz/
不知何故，它在 fiddle 中起作用，但在我这边不起作用。
最佳答案
需要先加载 Jquery 库，然后才能加载包含 jquery 代码的自定义 js 文件。
例如，如果您有一个 script.js 文件，其中编写了 jquery 代码，则需要在 jquery.js 之后加载该文件。
否则你的代码将无法工作。如果您在正文底部加载 jquery.js，浏览器将在 jquery 之前先加载整个 html，从而导致问题。
没有必要把js文件放在底部。这一切都取决于您的需要。 dom加载前不需要加载的JS文件可以放在底部。
例如，如果您有一个跟踪用户行为的tracking.js 文件，则可以将其放在底部。
希望这有帮助:)
关于javascript - Jquery在底层不起作用，但在头部起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47469976/