$(function() {})会随着页面渲染的顺序而加载，例如加载一个带js属性的div块时，如果函数的定义在div创建之前，加载函数时找不到对应的div，使得函数失效。
<!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>
如果将函数放置在div定义之后，则函数起效。
<!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(){ })则不用顾及顺序问题，因为此函数是在页面内容加载完才会被调用。
<!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>
