原生js 和 jquery 的区别

(一)加载先后顺序

1.原生js 和 jquery 入口函数加载模式不同;

2.原生js 会等到DOM元素加载完毕,并且图片也加载完毕再执行;

3.jquery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行;

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<img src="https://avatar.csdn.net/8/9/0/1_ggxr00.jpg?1531363284">

	<script src="jquery-1.12.4.js"></script>
	<script>
		
		window.onload = function(ev){
			// 1.通过原生js的入口函数可以获取DOM元素
			var img = document.getElementsByTagName("img")[0];
			console.log(img);

			// 2.通过原生js的入口函数可以获取DOM元素的宽高
			var width = img.width;
			console.log("js:"+width);
		};

		$(document).ready(function(){
			/*
			 *1.通过jquery的入口函数可以获取DOM元素
			 *$('img')[0]这句把选择器的结果变成了dom对象,不是jquery对象。
			*/
			var $img = $("img")[0];
			console.log($img);

			// 2.通过jquery的入口函数不可以获取DOM元素的宽高
			var _$img = $("img");
			var $width = _$img.width();
			console.log("jquery:"+$width);
		});
	</script>
</body>
</html>

(二)函数覆盖问题

1.原生js在编写多个入口函数时,后面编写的会覆盖前面编写的;

2.jquery中编写了多个入口函数,后面编写的不会覆盖前面斌写的;

                // 原生js多个入口函数,只弹最后一个csdn2;
		window.onload = function(ev){
			alert("csdn1");
		};

		window.onload = function(ev){
			alert("csdn2");
		};

		// jquery多个入口函数,每个都会弹;
		$(document).ready(function(){
			alert("csdn1");
		});

		$(document).ready(function(){
			alert("csdn2");
		});
ps: 萌新一枚,如有错误,请指出,谢谢!



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值