jQuery.ready()

時間 2019-12-02

標籤 jquery.ready jquery ready 欄目 JQuery 简体版

原文原文鏈接

ready()html

JavaScript代碼放在哪裏？

瀏覽器在渲染HTML頁面時，是從頭至尾，一行一行地檢查執行的。若是JavaScript代碼在前面，HTML元素在後面，遇到JavaScript選擇一個還未渲染的HTML元素將會選擇失敗。所以，一般的作法是將腳本放在頁面最後（緊跟在</body>標籤以前）。jquery

ready()事件

若是將JavaScript代碼分和HTML離出來，腳本又在<head></head>之間引入，會不會出問題？ajax

要避免上述問題，可使用ready()事件。瀏覽器

jQuery的ready()事件一般在DOMContentLoaded事件加載後執行。所以能夠保證JavaScript代碼被執行。ide

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script>
function myfun() {
var $window = $(window);
var $slideAd = $("#slideAd");
var endZone = $("footer").offset().top - $window.height() - 300;

$(window).scroll(function () {
if (endZone < $window.scrollTop()) {
$slideAd.animate({'right': '0px'}, 250);
} else {
$slideAd.stop(true).animate({'right': '-360px'}, 250);
}
});
}
</script>
<style>
body{
min-width: 600px;
background-color: #999;
margin-bottom: 60px;
}
#slideAd {
width: 130px;
height: 60px;
color: #fff;
bordet-top: 1px solid #fff;
border-letf: 1px solid #fff;
border-bottom: 1px solid #fff;
background-color: #e99295;
padding: 25px 20px 10px 85px;
position: fixed;
bottom: 20px;
right: -235px;
text-transform: uppercase;
}
</style>
</head>
<body>
 
 
 
 
 
 
 
<footer>©2018</footer>
<div id="slideAd">nflkjhtgrfdsss</div>

<script>
$(document).ready(function () {
myfun();
});
</script>
</body>
</html>spa

相關標籤/搜索

jquery.ready

JQuery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。