开发者学堂课程【jQuery 开发教程： jQuery_浏览器事件、文档加载事件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4286
jQuery_浏览器事件、文档加载事件
内容介绍：
一、浏览器事件
二、文档加载
一、浏览器事件
1、.error()：
被弃用的事件，出现错误的处理事件。
这里的被弃用并不代表不能继续使用，就是说会有更好的来代替它，我们简单写个小例子。
<!DOCTYPE html> <html lang=”en”> <head> <meta charset="utf-8"> <title></title> // 引入 jQuery <script scr=”jquery-2.2.1.min.js”></script> </head> <body> // 写入一个图片给它一个地址，随意写一个，这个地址是不存在的是会报错的。图片加载不出来是因为地址是出错的。 <img src=”sd”> <script> $(function(){ // 选择图片给它一个 error 事件。 $(“img”).error(function(){ alert(“出了错误”); }) }) </script> </body> </html>
效果截图：
2、scroll()：
滚动事件，可以跟多个绑定。
和 window 绑定：
<!DOCTYPE html> <html lang=”en”> <head> <meta charset="utf-8"> <title></title> <script scr=”jquery-2.2.1.min.js”></script> <style> p{ width:100%; height:2000px; } </style> </head> <body> <p>hahahah</p> <script> $(window).scroll(function(){ alert(“哈哈哈”); }) </script> </body> </html>
效果截图：
滚动页面就会有一个弹出框。
和<div>标签绑定：
<!DOCTYPE html> <html lang=”en”> <head> <meta charset="utf-8"> <title></title> <script scr=”jquery-2.2.1.min.js”></script> <style> div{ width:100px; height:100px; background-color:aquamarine; overflow:auto; } </style> </head> <body> <div id=”d1”>哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> <script> $(function(){ $(“#d1”).scroll(function(){ alert(“ccccc”); }) }) </script> </body> </html>
效果截图：
滚动盒子里的页面就会有一个弹出框。
2、resize()：
页面重置，页面大小被改变时会触发。
<!DOCTYPE html> <html lang=”en”> <head> <meta charset="utf-8"> <title></title> <script scr=”jquery-2.2.1.min.js”></script> <style> div{ width:100px; height:100px; background-color:aquamarine; overflow:auto; } </style> </head> <body> <div id=”d1”>哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> <script> $(window).resize(function(){ // 页面改变时弹出的内容 alert(“页面大小发生改变了”); }) </script> </body> </html>
效果截图：
当页面大小被改变时会触发。
二、文档加载
1、复习 js 中 ready 与 onload 事件：
* ready 事件： ready 事件在 DOM 结构绘制完成之后就会执行。这样能确保就算有大量的媒体文件没加载出来， JS 代码一样可以执行。
* load 事件： load 事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致 load 事件不能够即使被触发。
ready 的三种写法，一般用后两种写法：
$().ready(function(){ }) $(document).ready(function(){ }) $(function(){ })
2、文档加载过程
（1）解析 HTML 结构。
（2）加载外部脚本和样式表文件
（3）解析并执行脚本代码。
（4）构造 HTML DOM 模型。// ready
（5）加载图片等外部文件。
（6）页面加载完毕。// load
