在JavaScript中常见的入口函数写法如下：
window.onload = function(){
// content
}
我们可以通过文档加载完成事件.ready()函数做入口函数：
$(document).ready(function(){
// content
})
当然jQuery也给出了与其等价的几种办法：
$(document).ready(handler)
$().ready(handler) (不建议使用)
$(handler)
当然我们也可使用类似于JavaScript中的addEventListener()的.bind()函数实现（$(document).bind("ready", handler)）,不过这种方法已经在jQuery1.8 中不建议使用，虽然这种方法和ready()相似，但是如果ready()执行了，再使用.bind("ready")的话，.bind("ready")将会在以上几种情况执行完成后在执行，也就是同时出现.ready()和.bind("ready")，将会优先执行.ready()。
挖坑：
.ready()方法方法只能被匹配当前文档的 jQuery 对象调用，因此选择符可能被省略。没有看懂
当我们同时使用其他JavaScript库的时候，我们可以使用$.noConflict()来避免出现命名空间的混淆，这个时候$()快捷方式将不能使用，只能使用jQuery()来代替$()，这个时候我们我们就会使用jQuery(document).ready(handler)和jQuery(handler)来作为入口函数。
值得注意的是.ready()方法通常和属性是不兼容的。如果必须使用，要么不使用.ready()，要么使用jQuery的.load()方法向 window 或一些指定的元素（例如，图片）绑定 load 事件。
还需要注意的是，在JavaScript中的window.onload是在所有DOM和一些指定元素加载完成后执行的，但是在jQuery中.ready()在DOM加载完成就会执行代码，一些特殊的代码（如获取图片大小），可以放到.load()中，如：
$(window).load(function () {
// run code
});
在原生JavaScript中后写的入口函数会覆盖之前的入口函数，而在Query中不会覆盖，而是追加在原有的函数后。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入口函数</title>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>
<body>
<img src="https://source.unsplash.com/30x40/?book,library" alt="" id="img">
</body>
<script>
window.onload = function () {
console.log("window.onload:入口函数");
}
window.onload = function () {
var wight = $("#img").width();
console.log("window.onload:" + wight);
}
$(document).ready(function () {
console.log("$(document).ready():入口函数");
})
$(function () {
// 通过$(function(){})不能获取图片高度
var wight = $("#img").width();
console.log("$():" + wight);
})
$(document).ready(function () {
// 通过$(window).load(function(){})可以获取图片高度
var wight1 = $("#img").width();
console.log("$(document).ready():" + wight1);
})
$(window).load(function () {
// 通过$(window).load(function(){})可以获取图片高度
var wight2 = $("#img").width();
console.log("$(window).load():" + wight2);
})
</script>
</html>