本文详细解析JavaScript和jQuery中页面自动加载的几种实现方式,重点对比window.onload与$(document).ready的执行时机差异。通过五种代码示例展示如何绑定多个函数及简化写法,帮助开发者根据实际需求选择合适的事件加载方案。
原生JavaScript页面加载事件
代码示例如下:
Window.onload = function() {
Var name = document.getElementById("name").val(); // 该操作会加载HTML文档,并等待外部资源(如图片、CSS样式表、JS脚本等)全部加载完毕
}方法2:需要引入Jquery的 .js文件
jQuery页面加载事件实现方式
代码示例如下:
$(document).ready(function() {
alert("JQuery的第一个入门案例"); // 仅加载HTML结构,无需等待外部资源,立即执行
});方法3: ( 等同于方法2 )
代码示例如下:
jQuery(function() {
if ($("input[name='message']").val() != "")
alert($("input[name='message']").attr("value"));
});方法4 :(等同于上)
代码示例如下:
$(function() {
alert("JQuery 页面自动加载时执行 1 ....");
});方法5-1:window.onload事件的加载(页面加载时同时加载多个函数...)
HTML内联与JS绑定多函数加载方案
代码示例如下:
<html>
<body onload="function1(),function2(),function3()">
</body>
</html>
<script >
function1() {
}
function2() {
}
function3() {
}
</script>方法5-2:window.onload事件的加载(页面加载时同时加载多个函数...)
代码示例如下:
<html>
<body>
</body>
<html>
<script>
function1() {
}
function2() {
}
function3() {
}
window.onload = function() {
function1();
function2();
function3();
}
</script>