原生js 和 jquery 的区别

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: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: 萌新一枚,如有错误,请指出,谢谢!



展开阅读全文

没有更多推荐了,返回首页