02-jQuery入口函数
在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>