JavaScript中的onload和jQuery中的ready方法比较

左手的ㄟ右手 2022-06-07 07:15 219阅读 0赞

**JavaScript中的onload和jQuery中的ready方法比较**

示例代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>js中的window.onload和jQuery中的ready方法比较</title>
    
    <script type="text/javascript" src="js/jquery-2.0.0.js"></script>
    
    <script type="text/javascript">
    	window.onload = function() {
    		alert("我是第一个onload。。。");
    	}
    	window.onload = function() {
    		alert("我是第二个onload。。。");
    	}
    	$(document).ready(function() {
    		alert("我是第一个ready。。。");
    	});
    	$(document).ready(function() {
    		alert("我是第二个ready。。。");
    	});
    	
    </script>
    </head>
    <body>
    
    </body>
    </html>

运行代码后我们发现先执行两个ready方法，然后执行onload方法，但两个onload方法只会执行最后一个onload方法，后面的这个onload会覆盖前面的onload

总结： ready方法的调用的执行时机是在文档被准备好时，就开始执行代码；而onload是在文档， 被加载完成之后在执行代码， ready方法的调用可以执行多次；而onload不能执行多次，最后的会替换靠前。

补充知识点：

ready方法的写法有三种：

/*方式一*/     
        $(document).ready(function() {
    		
    	});
    	    /*方式二*/         
    	$().ready(function() {
    
    	});
    	  /*方式三*/     
    	$(function() {
    
    	});

$()可以实现将js对象转换为jQuery对象