原生js 和 jquery 的区别

最新推荐文章于 2024-09-19 01:15:17 发布

ggxr00

最新推荐文章于 2024-09-19 01:15:17 发布

阅读量5.3k

点赞数 2

文章标签： javascript jquery

本文链接：https://blog.csdn.net/ggxr00/article/details/81011208

版权

（一）加载先后顺序

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: 萌新一枚，如有错误，请指出，谢谢！