欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

关于原生js和jquery的区别介绍

程序员文章站 2023-11-13 10:32:46
（一）加载先后顺序 1.原生js和jquery入口函数加载模式不同； 2.原生js会等到dom元素加载完毕，并且图片也加载完毕再执行； 3.jquery会等到dom元素加载完毕，但不会等到图片也加载...

（一）加载先后顺序

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

上一篇： js基础学习之语法要点

下一篇： Java并发系列之ConcurrentHashMap源码分析

推荐阅读