index
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-1.8.3.min.js"></script>
<!-- 1.如果先写第一个js文件,只有第二个文件会有效果;
如果先写第二个js文件,只有第一个js文件有效果的原因:
因为两个js文件都有window.onload,第一个保存到window.onload时,
执行第二个js文件也是保存到window.onload这样后者就会覆盖前者,
最终只有后者有效果
解决:可以用事件监听window.addEventListener("load",function(){})
因为事件监听会把js内容放到事件队列,然后window.load再去事件队列遍历
-->
<!-- 2.故意在这两个js文件之前写一个window.onload -->
<script>
window.onload=function(){
alert("把html+css+js+图片全部加载完成");
};
</script>
<script src="js/01_onload2.js"></script>
<script src="js/01_onload1.js"></script>
<!--
2.问题:类似抢票系统这样的不需要页面全部加载完就要响应的
解决:页面加载过程中有两次页面加载完成事件,一次是
DOMContentLoaded,仅有html+js下载完成提前触发
一次是window.load.必须等到html+css+js+图片下载生成才触发
-->
<!-- DOMContentLoaded有兼容性问题
解决:可以用jq封装好的DOMContentLoaded事件
$(document).ready(function(){}) --作用在DOMContentLoaded阶段提前自动执行.
这一句的简写形式:$().ready(function(){})最后简写W为$(function(){})
用es6还可以简写为箭头函数$(()=>{})
如果是需要图片和css才能正常执行的代码,只能放在window.addEventListener("load",function(){...})
-->
<title>Document</title>
</head>
<body>
<h1>页面加载完成事件</h1>
<p>welcome to my first web page</p>
<!-- 需求:在页面加载的时候就给这两个按钮绑定单击事件 -->
<button id="btn1">click me1</button>
<button id="btn2">click me2</button>
<script>
//怎么让元素的事件处理函数在页面加载完成后自动绑定上
//怎么让页面在数据完成加载后自动发送ajax请求
//id属性的选择器前面要加#号
/*如果把下面的js放到head中,会导致效果不出现,因为代码是从上往下执行的
但是如果放在html的body中又会影响维护,并且不方便复用,所以要把js文件外部引入*/
/*
问题:今后别人在引入我们写的js文件时,有时会放在body,有时会放在head,怎么保证放在哪里都能在页面加载完后自动执行?
解决:
可以用window.οnlοad=function(){}事件,它能让你的的js内容在页面加载完后才执行
*/
// $("#btn1").click(function(){alert("啊疼")})
// $("#btn2").click(function(){alert("疼")})
</script>
</body>
外部引入js文件1
$(document).ready(function(){
alert("仅把js+html加载完成就触发点击事件");
$("#btn1").click(function(){alert("啊疼")})
})
外部引入js文件2
$(document).ready(function(){
alert("仅把js+html加载完成就触发点击事件");
$("#btn2").click(function(){alert("2疼")})
})