全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

onload,DOMContentLoaded和jQuery的.ready有什么区别?

发布时间:2023-10-12 22:41:42
发布人:xqq

一、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。
#it技术干货

相关文章

Mysql、SQLite、Mongo的区别?

Mysql、SQLite、Mongo的区别?

2023-10-13
开发一款商城系统APP有什么优势?

开发一款商城系统APP有什么优势?

2023-10-12
Web前端用来做什么?

Web前端用来做什么?

2023-10-12
Python底层是用什么语言实现的?

Python底层是用什么语言实现的?

2023-10-12

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取