關於原生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:萌新一枚,如有錯誤,請指出,謝謝!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *