$(function() {})會隨著頁面渲染的順序而加載,例如加載一個帶js屬性的div塊時,如果函數(shù)的定義在div創(chuàng)建之前侥袜,加載函數(shù)時找不到對應(yīng)的div,使得函數(shù)失效溉贿。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$("div").click(function(){
$(this).hide();
});
</script>
<style>
div{
width:100px;
height:100px;
background-color: #8ad6ff;
}
</style>
</head>
<body>
<div>點擊div枫吧,隱藏此div</div>
</body>
</html>
如果將函數(shù)放置在div定義之后,則函數(shù)起效宇色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
div{
width:100px;
height:100px;
background-color: #8ad6ff;
}
</style>
</head>
<body>
<div>點擊div九杂,隱藏此div</div>
</body>
<script>
$("div").click(function(){
$(this).hide();
});
</script>
</html>
若是使用$(document).ready(function(){ })則不用顧及順序問題,因為此函數(shù)是在頁面內(nèi)容加載完才會被調(diào)用宣蠕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div").click(function(){
$(this).hide();
});
});
</script>
<style>
div{
width:100px;
height:100px;
background-color: #8ad6ff;
}
</style>
</head>
<body>
<div>點擊div例隆,隱藏此div</div>
</body>
</html>