jQuery页面初始化

1. BOM与DOM

BOM指的是浏览器对象模型,也就是说在JavaScript语言中,将浏览器封装为一个window对象,例如:window.location.href就表示当前页面的url地址。

DOM指的是文档对象模型,其实DOM就是window.document,因为太常用了,所以可以直接用document,它指的是<html>与</html>之间的html文档。

2. window.onload

window.onload代表窗口页面全部加载完毕(包括图片等)后触发的事件,例如:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<title></title>
<script>
	window.onload=init;
	function init(){
		console.log("页面全部加载完毕");
	}
</script>
</head>
<body>
</body>
</html>

3. jQuery中的页面初始化

其实很多时候,无需等待页面所有内容加载完毕再去执行初始化,毕竟只要整个文档结构定下来了,就可以去填充内容了(比如菜单、比如表格内容的信息,无需等待图片下载完了再显示,这样整个页面加载更流畅)。

所以,最好的时机是在document,即网页的html文档加载完毕后执行一个初始化方法,最佳。

jQuery提供了$(document).ready用于指定初始化方法,含义就是document对象加载完毕了执行的方法。

例如:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<title></title>
<script>
	$(document).ready(init);//指定init方法为document对象加载完毕后执行的方法
	function init(){
		console.log("document加载完毕");
	}
</script>
</head>
<body>
</body>
</html>

of course,也可以直接指定函数:

<script>
	$(document).ready(
		function(){
			console.log("document加载完毕");
		}
	);
</script>

最后,因为这个初始化方法太常用了,所以jQuery提供了简写,确实够简单了,但是俺觉得这种写法对意义表达的不明确,所以还是上面的较好,当然萝卜白菜各有所爱,肯定也有更喜欢这种简洁优雅的写法的。

<script>
	$(function(){
		console.log("document加载完毕");
	});
</script>

如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页