jQuery - jQuery 和JS入口函数的区别

<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">

原生JS和jQuery入口函数的加载模式不同

• 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
• jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行

window.onload = function () {
    // 1.通过原生的JS入口函数可以拿到DOM元素
    var img = document.getElementsByTagName("img")[0];
    console.log(img);
    // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
    var width = window.getComputedStyle(img).width;
    console.log("onload", width);	// 190px
}

$(document).ready(function () {
    // 1.通过jQuery入口函数可以拿到DOM元素
    var $img= $("img");
    console.log($img);
    // 2.通过jQuery入口函数不可以拿到DOM元素的宽高
    var $width = $img.width();
    console.log("ready", $width);	// null
});

• 原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
• jQuery中编写多个入口函数,后面的不会覆盖前面的

// 后面覆盖前面
window.onload = function () {
    alert("hello");
}
window.onload = function () {
    alert("hello");
}

// 依次执行
$(document).ready(function () {
    alert("hello");
});
$(document).ready(function () {
    alert("hello");
});