一、onload，DOMContentLoaded和jQuery的.ready的区别

1、触发时机不同

onload事件是在所有资源加载完成后触发，包括图片、脚本和样式表等；DOMContentLoaded事件是在DOM树构建完成后立即触发，不需要等待其他资源的加载；jQuery的ready事件是在DOM树构建完成后，CSS和图片等资源也加载完成后触发。

2、应用场景不同

onload事件适合处理与页面内容相关的操作；DOMContentLoaded事件适合处理DOM元素操作，如添加事件监听器等；jQuery的ready事件既能够处理与页面内容相关的操作，也能够处理外部资源加载完成后的回调。

3、获取资源状态的能力不同

onload事件可以获得所有资源的加载状态；DOMContentLoaded事件只能获取DOM树的构建状态，无法获取外部资源（如图片、音频、视频等）的加载状态；jQuery的ready事件可以确保页面中所有资源都已经加载完成，包括外部资源。

二、jQuery 概述

1、JavaScript 库

库，是用于开发软件的子程序集合。库和可执行文件的区别是，库不是独立程序，他们是向其他程序提供服务的代码库链接。JavaScript 库即 library，是一个封装好的特定的集合（方法和函数）。就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。

简单理解就是一个 JS文件，里面对我们原生 js 代码进行了封装，存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作 DOM，里面基本都是函数（方法）。再比如 Prototype、Dojo、Extjs 、 YUI、移动端的 zepto 等等，这些都是优异的 JavaScript 库。它们都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的。

2、jQuery

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优异的 JavaScript 代码库（ 或 JavaScript 框架 ）。 jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。jQuery = javascript Query（查询）。意思是查询 js，把 js 中的 DOM 操作做了封装，我们可以快速的查询使用里面的功能。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

3、jQuery 优点

轻量级，体积小，不会影响页面加载速度。强大的选择器。方便的选择页面元素（模仿 css 选择器更精确、更灵活）。出色的 DOM 操作的封装。对事件、样式、动画支持，大大简化了 DOM 操作。跨浏览器兼容。基本兼容了现在主流的浏览器。链式操作、隐式迭代。支持插件扩展开发，有着丰富的第三方插件。免费、开源。

4、jQuery 特点

快速获取文档元素：​ jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。提供漂亮的页面动态效果：jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。​创建AJAX无刷新网页：AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。​提供对JavaScript语言的增强：jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。​增强的事件处理：jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。​更改网页内容：jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

5、jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法：

 $(selector).action()

美元符号定义 jQuery选择符（selector）“查询”和”查找” HTML 元素jQuery 的 action() 执行对元素的操作

示例：

$(this).hide() ：隐藏当前元素$(“p”).hide() ：隐藏所有元素$(“p.test”).hide() ：隐藏所有 class=”test” 的元素$(“#test”).hide() ：隐藏所有 id=”test” 的元素

三、onload事件

在 JavaScript 中，onload 事件在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件（如 CSS、JS 文件等）的加载，也就是说，在页面所有内容全部加载之前，任何 DOM 操作都不会发生。为 window 对象绑定 onload 事件的方法有两种。

1、直接为 window 对象注册页面初始化事件处理函数

window.onload = f;
function f() {
alert("页面加载完毕");
}

2、在页面标签中定义onload 事件处理属性

延伸阅读1：onload的定义和用法

onload 事件在对象被加载后发生。onload 最常用于 元素中，用于在网页完全加载所有内容（包括图像、脚本文件、CSS 文件等）后执行脚本。onload 事件可用于检查访问者的浏览器类型和浏览器版本，并根据这些信息加载网页的正确版本。onload 事件也可用于处理 cookie。