了解script和Document Ready Work

最新推荐文章于 2024-08-07 14:12:54 发布

小五da老虎

最新推荐文章于 2024-08-07 14:12:54 发布

阅读量529

点赞数 1

文章标签： freeCodeCamp学习

本文链接：https://blog.csdn.net/qq_37499398/article/details/80405538

版权

本文将介绍如何在HTML文件中引入jQuery，并通过使用$(document).ready()方法确保DOM完全加载后再执行JavaScript代码，避免出现因DOM未加载完成而导致的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Learn how Script Tags and Document Ready Work

现在让我们开始学习最流行的JavaScript库jQuery吧，不用担心JavaScript本身，我们稍后会提到它。

在开始学习使用jQuery之前，我们需要加一些代码到HTML文件中。

首先在页面顶端增加一行script元素，然后写上结束符。

浏览器会运行script 里所有的Javascript，包括jQuery。

在你的script里，添加这个方法:$(document).ready(function() {到你的script，接下来用});结束这个方法

接下来我们来学习如何写方法，方法里面的代码会被浏览器加载。

在没有document ready function以前，你的代码会在HTML没有渲染完成就执行，这样会产生bug。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小五da老虎

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

window.onload和DOMContentLoaded的区别

skysys的研究小屋

08-13

2998

一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。二、为什么要区分？开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函

基于非接触式微波雷达设计的睡眠监控系统_291

12-31

2073

本项目的目的是设计一套基于非接触式毫米波雷达的睡眠监控系统，能够实时监测人体的呼吸频率、心率、体温、睡眠状态等关键健康指标，并通过物联网技术将数据上传至云端或本地服务器，提供可视化的睡眠质量分析报告。该系统能够自动识别异常状态并发出警报，具有较高的实用性与市场潜力，尤其在智能家居、健康监测等领域具有广阔的应用前景。

参与评论您还未登录，请先登录后发表或查看评论

script脚本中写不写$(document).ready(function() {});的差别

weixin_33918357的博客

04-28

293

$(document).ready() 里的代码是在页面内容都载入完才运行的，假设把代码直接写到script标签里。当页面载入完这个script标签就会运行里边的代码了，此时假设你标签里运行的代码调用了当前还没载入过来的代码或者dom，那么就会报错。当然假设你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。 $(document).ready(function(...

jQuery是如何工作的

真的想做点事情

08-10

533

最近发现jQuery很成熟了，我看了jQuery官方的document，这里先提供入门章节内容。主要介绍jQuery是如何工作的。

IE下script标签的readyState属性

weixin_33698823的博客

02-06

249

在做加载器时遇到一个常见问题，如何判定一个脚本已经执行完毕。 “uninitialized” – 原始状态 “loading” – 下载数据中 “loaded” – 下载完成 “interactive” – 还未执行完毕 “complete” – 脚本执行完毕. 网上流行的答案是这个，我怎么觉得其实这是抄自XMLHttpRequest的readyState呢？！恰逢这两个...

script脚本中写不写$(document).ready(function() {});的区别

buptlida的专栏

04-07

1034

$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。 $(document).ready(function(){

We're sorry but 法律合规管理系统 doesn't work properly without JavaScript enabled.

03-13

$(document).ready(function() { $('#consent-popup').modal('show'); // 处理用户点击事件 $('.agree-btn').click(function(e){ e.preventDefault(); // 发送AJAX请求更新服务器端的状态 $.ajax({ url:...

We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.

最新发布

04-01

$(document).ready(function(){ $.when( // Load culture data... ).then(Globalize.load).then(function() { Globalize.loadMessages({ "en": {'welcome': 'Welcome, {name}!'} }); }); }); </script> ```

linux渗透测试常用命令

AI拉呱，专注于人工智与网络安全方面的研究，关注一起学习。

08-07

355

【代码】linux渗透测试常用命令。

JS中各种方法的试验实例

09-05

开始学习使用jQuery之前，需要在HTML文件中添加一些代码。首先，在页面顶部添加一行script元素，然后在下一行写上结束符。浏览器会运行script里所有的Javascript，包括jQuery。

JavaScript,JQuery的了解与使用(一)

Websites

01-23

1149

系列课程献上,希望对初学者有益. JavaScript,JQuery的了解与使用(一) JavaScript：java脚本作用：表单验证、网页特效 JavaScript：脚本语言、弱语言 JavaScript特点： 1、跨平台 2、面向对象 3、区分大小写 4、客户端 JavaScript知识点： 1、基础语法 2、事件 3、操纵标签的属性 4、操纵标签的样式表 5、

JavaScript document对象

weixin_47782618的博客

04-23

3834

1. 什么是document对象 document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。 2. document对象的属性 2.1 document.doctype document.doctype，指向<doctype>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE HTML>。如果网页没有声明

docment对象详细说明

于明远的专栏

03-01

2726

docment对象详细说明 document对象详解document 文挡对象 - JavaScript脚本语言描述---------------------------------------------------------------------注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一个错误信息 "引用的元素为空或者不是对象"-

Java Script（二）——Document对象介绍

HangHug_L的博客

01-14

1400

JavaScript（二） Document对象第一点：Document管理了所有的HTML 文档内容。第二点：document它是一种树结构的文档。有层级关系。第三点：它让我们把所有的标签都对象化。第四点：我们可以通过 document 访问所有的标签对象。相当于： Class Dom{ private String id; // id 属性 private String name; //name属性 private String tagName; //表示标签名 private

JavaScript DOM(二）之Document类型

漫长学习路

05-31

2830

Document类型简介 javaScript通过Document类型表示文档；因此我们称document 为文挡对象，在浏览器中， document对象是HTMLDocument的一个实例，表示整个HTML页面，而且，document对象是window对象的一个属性，因为可以作为一个全局对象来访问； Document类型特征 1:nodeType的值为9; 2:nodeName的值为"#

JavaScript中document的四种方法

热门推荐

qiangzhogshou的博客

11-26

1万+

1、document的getElementById()方法 <body> <a id="first">a标签链接</a> <script> var element = document.getElementById("first"); console.log(element); </script> </body>...

Java Script document属性的用法

Cici的博客

06-06

674

document： (1)每个载入浏览器的 HTML 文档都会成为 Document 对象。 (2)Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 (3)Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。...

$(document).ready(function()和 window.onload()执行顺序

01-09

### jQuery `$(document).ready` 和 `window.onload()` 的执行顺序在网页加载过程中，`$(document).ready` 和 `window.onload` 都用于指定当页面达到特定状态时要运行的代码。然而两者触发条件不同。 - 当 DOM 文档结构完全加载完成之后会立即调用由 `$(document).ready` 绑定的方法，在此阶段图像等资源可能尚未下载完毕[^1]。 - 而 `window.onload` 则会在整个页面的所有组件（包括图片、样式表和其他媒体文件）都已加载完成后才会被触发。因此通常情况下 `$(document).ready` 执行得更早一些；如果存在多个 `$(document).ready` 函数，则它们按照定义顺序依次被执行。而只有一个全局级别的 `onload` 事件处理程序可以设置给窗口对象，任何新的赋值都会覆盖之前的函数指派。下面通过一段简单的 HTML 来展示两者的区别： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document Ready vs Window OnLoad</title>  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <script type="text/javascript"> // 使用 $(document).ready() $(document).ready(function(){ console.log('DOM is ready'); }); // 使用 window.onload window.onload = function() { console.log('All resources are loaded'); }; </script> </body> </html> ``` 在这个例子中，“DOM is ready”的日志消息应该先出现，紧接着才是“All resources are loaded”。