jQuery知识点(2)-页面初始化函数

时间：2021-08-08 22:00:16

知识点-BOM与DOM

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

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

知识点-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>

知识点-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>
标签：

相关文章