原生js与jquery加载页面元素比较

最新推荐文章于 2022-08-04 08:14:34 发布

淮城一只猫

最新推荐文章于 2022-08-04 08:14:34 发布

阅读量180

点赞数

分类专栏： Jquery 文章标签：原生js jquery页面元素加载

本文链接：https://blog.csdn.net/qq_40280582/article/details/98496841

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原生js：将获取元素的语句写到页面头部，会因为元素还没有加载而出错，js提供了window.onload 这个方法事先加载元素

<script type="text/javascript">

		window.onload = function(){
    
			......
            
		};
            
</script>

jquery：将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

<script type="text/javascript">

	$(document).ready(function(){

     	......

	});

</script>

可以简写为：

<script type="text/javascript">

	$(function(){

    	 ......

	});

</script>

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">

		//	1 原生js加载页面元素，window.onload()
	
		window.onload = function(){
	
			var oDiv = document.getElementById('div1');
	
			alert('原生弹出的'+oDiv);
		};


		//  2 jquery加载页面元素，ready()
	
		//  2.1 ready完整写法：

		$(document).ready(function(){
	
			var $div=$('#div1');
	
			alert('这是jquery弹出的'+$div);
		});
	
		//  2.2 ready简单写法(开发中最常用)：
	
		$(function(){
	
			var $div=$('#div1');
	
			alert('这是jquery弹出的'+$div);
		});
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
</body>
</html>

总结：

原生js加载页面元素通过window.onload()方法
jquery加载页面元素通过ready()方法
开发中常用jquery的ready简写写法
使用jquery需要事先下载jquery库(压缩版和完整版，开发中加载压缩版即可，完整版用于平时读源码)，用srcipt标签导入jquery库的压缩版
使用jquery库需要另写一个script标签，在里面写jquery代码
ready比windown.load要快的原因是，window.load是等标签加载完，渲染(一些资源文件，如图片，音乐等)完之后再执行，ready是个标签加载完就执行