您的位置：首页 > Web前端 > JQuery

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

2018-12-01 16:28 399 查看

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-jQuery和JS入口函数的区别</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
/* window.onload = function () {
//1.通过原生的JS入口函数可以拿到DOM元素
var img = document.getElementsByTagName("img")[0];
//console.log("img");
//2.通过原生的JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(img).width;
var height = window.getComputedStyle(img).height;
// console.log(width);
// console.log(height);
}*/

/*原生JS和jQuery入口函数加载模式不同
原生JS会等到DOM元素加载完毕，并且图片也加载完毕后才会执行
jQuery会等到DOM元素记载完毕，但图片没有加载完毕就会执行*/

/*$(document).ready(function(){
//1.通过jQuery入口函数可以拿到DOM元素
// var $img = $('img')[0];  //两种写法
var $img = $("img");
console.log($img);
//2.通过jQuery入口函数不可以拿到DOM元素的宽高
var $width = $img.width();
var $height = $img.height();
console.log("jQuery",$width);
console.log("jQuery",$height);
});*/

/* 1.原生JS如果编写多个入口函数，后面编写的会覆盖前面编写的入口函数
** 2.jQuery中编写多个入口函数，后面的不会覆盖前面
*/

/* window.onload = function () {
alert("woaini1");
}
window.onload = function () {
alert("woaini2");
}*/
$(document).ready(function () {
alert("hello1");
});
$(document).ready(function () {
alert("hello2");
});
</script>
</head>
<body>
<img src="http://pic28.photophoto.cn/20130818/0020033143720852_b.jpg" alt="">
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航