<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-jQuery和JS入口函数的区别</title>
<script src="JS_file/jquery-1.12.4.js"></script>
<script>
// window.onload=function () {
// //1.通过原生的JS入口函数拿到DOM元素
// var img=document.getElementsByTagName("img")[0];
// console.log(img); //返回img
// //2.通过原生的JS入口函数拿到DOM元素的宽高
// var width=window.getComputedStyle(img).width;
// console.log(width); //返回img的宽
// };
/*
*1.原生JS和jQuery入口函数的加载模式不同
*原生JS会等到DOM元素加载完毕,并且图片也加载完毕才执行
* jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
* */
$(document).ready(function () {
//1.通过jQuery入口函数拿到DOM元素
var $img=$("img")[0];
console.log($img); //返回img
//2.通过jQuery入口函数不能拿到DOM元素的宽高
var $width=$img. width();
console.log($width); //报错:$img.width is not a function
});
/*
* 1.原生的JS如果编写了多个入口函数,后面的编写会覆盖前面编写的
* 2.jQuery如果编写了多个入口函数,后面的不会覆盖前面的
* */
/*window.onload=function () {
alert("hello world1")
}
window.onload=function () {
alert("hello world2")
}*/
// $(document).ready(function () {
// alert("hello world1")
// })
// $(document).ready(function () {
// alert("hello world2")
// })
</script>
</head>
<body>
<img src="https://img.alicdn.com/imgextra/i2/31391233/O1CN011KykoKXImWBteT3_!!0-saturn_solar.jpg_220x220.jpg_.webp">
</body>
</html>
区别1:
原生JS和jQuery入口函数的加载模式不同
原生JS会等到DOM元素加载完毕,并且图片也加载完毕才执行
jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行、
区别2:
原生的JS如果编写了多个入口函数,后面的编写会覆盖前面编写的
jQuery如果编写了多个入口函数,后面的不会覆盖前面的