原生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>

总结:

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