经常在js代码中会看到有人写这样的代码：$(function(){ //code })
其实，上面的代码就是$(document).ready( )或$( ).ready( )的缩写形式。那这个函数代表什么意思？为什么会被经常用到呢？我们先来看下《锋利的jQuery》中对该函数作用的描述：
$(document).ready( )函数括号中的所有代码都会提前（只要DOM在浏览器中被注册完毕）被执行，而不是页面所有内容（例如图片等占用宽带的内容）加载完毕后才执行时间
那么，笔者又产生疑问了，DOM被浏览器注册完毕，这个该怎么理解，又是一个什么状态呢？
我们都知道，DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）
浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM Tree如下:
image.png
DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attribute：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
也就是说，当这些节点都生成时，就表示DOM被浏览器注册完毕
那么，当我们运行一个标准的网页，DOM加载顺序是怎样的，DOM被浏览器注册完毕又处于哪个环节：
1、解析HTML解构
2、加载外部脚本和样式表文件
3、解析并执行脚本代码
4、构造HTML DOM模型
5、加载图片等HTML和CSS引用的外部资源文件
6、页面加载完毕
第4点对应的就是DOM被浏览器注册完毕，也是我们的$(document).ready( )函数，因为这个时候文档对象已经生成，所以就可以调用script脚本获取相关节点进行操作（这也是为什么建议如果script文件需要操作DOM，就把加载js文件放在页面底部，因为这时候DOM被浏览器注册完毕）
而window.onload对应的的是第6点
笔者的疑问：那如果我的script标签里面加了$(document).ready( )函数，那是不是我的script标签放在页面上边也可以获取到DOM元素，也能执行代码？
验证结果：
代码一、
image.png
将script标签放在页面底部，符合DOM加载完毕，脚本文件执行的顺序，所以页面输出‘click’
代码二、
image.png
将script标签放在页面上部且代码未放入$(document).ready( )函数中，发现不输出‘click’，因为此时DOM还未加载
代码三、
image.png
将script标签放在页面上部且代码放入$(document).ready( )函数中，发现输出‘click’，因为$(document).ready( )函数实在DOM加载完毕后才执行的
网友评论