24.jquery_ajax_01-CSDN博客

本文介绍了传统JavaScript的onload事件与JQuery中onload事件的实现方式，并对比了两者的区别，包括执行时机的不同及能否多次定义等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2. JQuery快速入门

2.1传统JS 的onload加载:

<script type="text/javascript">
	//onload案例：页面加载后，加载js事件，打印弹出“HelloWorld-传统的js方式”。
	//传统的jsonload，页面加载完毕后执行
	window.onload=function(){
		alert("HelloWorld-传统的js方式");
	};
</script>

注：运行html文件的两种方式：a.拖拽文件至浏览器 2.右击文件-myeclipse-open in explore

2.2 JQuery的onload加载

JQuery函数别名
为了简化jQuery核心函数的编写，使用$来代替jQuery。以上代码可以简化为：

<script type="text/javascript">
	//页面加载完毕后执行
	//jQuery();核心函数 $表示jQuery
	//document是页面上的dom对象，表示页面文档
	//ready()准备就绪方法
	$(document).ready(function() {
		alert("HelloWorld-JQuery方式");
	});
</script>

2.3 JQuery与JavaScript onload的区别（面试题）

1、window.onload 不能有多个，后面的功能会覆盖前面。而jQuery(document).ready()可以存在多个。
2、window.onload 在页面所有元素（包括图片，引用文件）加载完后执行。而jQuery(document).ready()页面中会在所有HTML DOM，CSS DOM结构加载完之后就会执行，其他图片可能还没有加载完。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<!-- 导入jquery的开发包 -->
	<script type="text/javascript" src="js/jquery-1.12.3.js"></script>

	<script type="text/javascript">
	//onload案例：页面加载后，加载js事件，打印弹出“HelloWorld-传统的js方式”。
	//传统的jsonload，页面加载完毕后执行
	window.onload=function(){
		alert("HelloWorld-传统的js方式11111111111");
	};
	
	window.onload=function(){
		alert("HelloWorld-传统的js方式222222222");
	};
	
	
	$(document).ready(function(){
		alert("HelloWorld-jquery方式11111");
	});
	
	$(document).ready(function(){
		alert("HelloWorld-jquery方式22222");
	});
	
	</script>

  </head>
  
  <body>
    
  </body>
</html>