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中不会覆盖,而是追加在原有的函数后。

代码:

image-20200616000039245

<!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>
posted @ 2020-06-16 08:25  一生亦木  阅读(34)  评论(0编辑  收藏  举报