一、在 HTML 中:
<%@ 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>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
<script>
function myFunction(){
alert("小白来啦!");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello BigBang!</h1>
</body>
</html>
二、在 JavaScript 中:
<%@ 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>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
<script>
window.onload=function(){
alert("页面加载完成");
};
</script>
</head>
<body>
<h1>Hello BigBang!!</h1>
</body>
</html>
……onload 事件会在页面或图像加载完成后立即发生。
三、在jQuery中:
<%@ 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>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
<script>
function ShowMessage(){
alert("小白来啦!");
}
/* //语法 1:
$(document).ready(function(){
ShowMessage()
});
//语法 2:
$().ready(function(){
ShowMessage()
}); */
//语法 3:
$(function(){
ShowMessage()
});
//语法 4:
jQuery(function($) {
ShowMessage()
});
</script>
</head>
<body>
<h1>HelloBigBang!</h1>
</body>
</html>
提示:ready() 函数不应与 <body οnlοad=""> 一起使用。
$(function(){}) 和 $(document).ready(function(){}),这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数,(注意,这里面的ready 是 DOM树加载完成,不是onload的页面资源加载完成的)。
需要注意的是,原生js本身并没有提供 document.ready方法,要使用就得自己定义,而且过程较为复杂,有兴趣可以自己了解一下。
四、个人经验
写代码的时候遇到了个很奇葩的问题。
$(function() {
$.messager.show({
title : '小提示',
msg : '隐藏的信息请拖动列表查看!'
});
});
这段代码突然间失效了!
超级过分,浪费我时间,最后设置了setTimeout方法来解决这个问题。
setTimeout(function () {
$.messager.show({
title : '小提示',
msg : '隐藏的信息请拖动列表查看!'
});
}, 5);
好了,这个话题总结到这,欢迎各位纠错哦!