JavaScript与jQuery中文档就绪函数的区别

目录
  • 1、文档就绪函数
  • 2、window.onload 与 $(document).ready()的区别

1、文档就绪函数

JavaScript 的文档就绪函数：

<script>
    window.onload = function() {
        alert("欢迎！")
    }
</script>

jQuery 中的文档就绪函数：

// 写法1
<script>
    $(document).ready(function() {
        alert("欢迎！")
    })
</script>

// 写法2
<script>
    $(function() {
        alert("欢迎！")
    })
</script>

执行以上的代码，我们可以得知，JavaScript 的window.onload=function(){// 执行代码} 和 jQuery 的文档就绪函数 $(document).ready(function(){// 执行函数}) 是等同的运行效果。但是二者也有不同，下面就对其区别与大家分享一下。

2、window.onload 与 $(document).ready()的区别

  window.onload $(document).ready()
执行时机 必须等网页中所有内容加载完后（包括图片）才能执行 网页中所有DOM结构绘制完后就执行
函数编写个数
不能编写多个，例如：

window.onload=function(){};

window.onload=function(){};

此时第二个覆盖第一个
能同时编写多个，例如：

$(document).ready(function(){})；

$(document).ready(function(){})；

两个函数都执行
简化写法 无 $()

对二者区别的简单说明如下：

  • （1）在执行时机上，window.onload 表示页面所有内容全部加载完成后执行，$(document).ready() 表示页面所有 DOM 元素加载完成后执行。例如，有一个图片标<img src="aa.jpg"/>，JavaScript 的 window.onload 要等 aa.jpg 整个图片加载完后才能执行注册事件中的函数，但是 jQuery 的文档就绪函数要等<img></img>标签对加载完成就可以执行了，也就是只需要解析到此处的页面控件是一个图片标签对即可，不用等图片显示完。
  • （2）函数编写个数主要体现为是覆盖还是追加。下面通过一个简单实例来对比。

先写一个JavaScript 程序，里面有 window.onload 注册事件，分别打印不同的数据

代码如下：

<script>
    window.onload = function() {
        alert("aa")
    };
    window.onload = function() {
        alert("bb")
    };
</script>

执行结果如下：

我们发现，代码执行后，首先弹出bb提示框，并未弹出 aa 提示框，说明 JavaScript 的 window.onload 不能编写多个函数，如果编写多个函数，后写的会覆盖前面的。

现在我们用jQuery编写同样的程序，代码如下：

<script>
    $(document).ready(function() {
        alert("aa")
    });
    $(document).ready(function() {
        alert("bb")
    });
</script>

执行结果如下：

根据执行结果可以看到，代码通过使用 jQuery 的文档就绪函数打印了两组数据，程序先打印了第一条数据 aa，接着又打印了第二条数据 bb，说明jQuery的文档就绪函数可以有多个。如果有多个文档就绪函数，那么执行顺序就是从第一条数据开始，逐条进行打印，不会像 window.onload 那样出现覆盖情况。
（3）简化写法属于语法规范。window.onload 没有简写形式；$(document).ready(function(){// 执行代码})的简写形式为$(function(){// 执行代码})，在开发中使用简写形式较多。

到此这篇关于JavaScript与jQuery中文档就绪函数的区别的文章就介绍到这了,更多相关JavaScript与jQuery的文档就绪函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript与JQuery框架基础入门教程

    目录 一,JS对象 二,DOM –1,作用 –2,测试 三,Jquery –1,概述 –2,使用步骤 –3,入门案例 –4,jQuery的文档就绪 四,JQuery的语法 –1,选择器 –2,常用函数 –3,常用事件 –4,练习 总结 一,JS对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 js的创建对象</title> <s

  • js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】

    js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】

    本文实例讲述了js使用文档就绪函数动态改变页面内容.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*文档就绪函数*/ /*动态修改网页的内容*/ window.onload = function () { va

  • Javascript和jQuery的深浅拷贝详解

    目录 JS的浅拷贝 JS的深拷贝 jQuery的深浅拷贝 总结 深浅拷贝在引用数据类型(数组对象)复制过程中产生的问题. JS的浅拷贝 直接复制拷贝的是数组/对象的内存地址,本质上是一个引用数据类型,所有的变量存储的是相同的内存地址,操作的是同一个存储空间,任意一个变量的操作,其他变量都会受影响.如下所示: const arr1 = ['北京', '上海', '广州', '深圳', '武汉']; const arr2 = arr1; console.log(arr1); console.log(

  • JavaScript与jQuery中文档就绪函数的区别

    JavaScript与jQuery中文档就绪函数的区别

    目录 1.文档就绪函数 2.window.onload 与 $(document).ready()的区别 1.文档就绪函数 JavaScript 的文档就绪函数: <script>     window.onload = function() {         alert("欢迎!")     } </script> jQuery 中的文档就绪函数: // 写法1 <script>     $(document).ready(function()

  • 兼容IE和Firefox的javascript获取iframe文档内容的函数

    复制代码 代码如下: <script type="text/javascript"> function getIframeContent(){ //获取iframe中文档内容 var doc; if (document.all){//IE doc = document.frames["MyIFrame"].document; }else{//Firefox doc = document.getElementById("MyIFrame"

  • jQuery中文入门指南，翻译加实例，jQuery的起点教程

    jQuery中文入门指南,翻译加实例,jQuery的起点教程 中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式.现以中文翻译(添加我的补充说明)如下.如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知. 英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者 Jörn Zaefferer 本文发布已征求原作者同意. 另外我认为在学习过程中,有两个API文档你要打开随时

  • 详解原生JavaScript实现jQuery中AJAX处理的方法

    详解原生JavaScript实现jQuery中AJAX处理的方法

    在这篇文章,我使用 Node.js作为后端.没错,这就可以全栈(浏览器和服务器)JS了.Node.js 是很简洁的,我鼓励你能在 Github下载demo,并关注该项目.下面是服务器端的代码: // app.js var app = http.createServer(function(req, res){ if(req.url.indexOf("/scripts/") >= 0){ render(req.url.slice(1), "application/javas

  • 利用jQuery的$.event.fix函数统一浏览器event事件处理

    比如得到触发事件的元素引用在IE浏览器下是:event.srcElement,在FF浏览器下则是:event.target,另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX,而IE浏览器下的处理方式又是不一样的,当然还有一些像"阻止事件冒泡"以及"取消浏览器默认行为"等,不同浏览器也有不同的处理方式,如果我们要使JavaScript在不同的浏览器下能正常处理事件代码,就要分别进行判断处理.现在jQuery为我们提供了统一兼容处理函数$.even

  • jQuery基础的工厂函数以及定时器的经典实例分析

    1. jQuery的基本信息: 1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交互特效,使用jQuery都能完美地实现,下面通过五个用途来更多的了解. 1.2.1 访问和操作DOM元素 1.2.2 制作页面样式 1.2.3 对页面时间的处理 1.2.4 方便地使用jQuery插件 1.2.5 与Ajax的完美结合 1.3 优势: 想必有人就会问了:为什么人们会更多的选择jQuer

  • 基于JavaScript或jQuery实现网站夜间/高亮模式

    创建夜间/高亮模式的步骤: 创建一个HTML文档. 为文档文件以及黑暗模式创建CSS. 添加一个开关转换器按钮,以在明暗模式之间进行切换. 使用javascript或jQuery代码向开关转换器添加功能,以在明暗模式之间切换. 示例1:以下示例演示了使用JQuery代码在明暗模式之间进行切换.它基本上通过使用函数hasClass(),addClass()和removeClass()方法来工作. <!DOCTYPE html> <html lang="en"> &

  • 详解用原生JavaScript实现jQuery的某些简单功能

    大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery $()选择器的实现 jQuery是面向对象的,所以自己编写的也要是面向对象的,看看基本的结构 // 定义lQuery对象 function lQuery(lArg){ } function lQ(lArg){ return new lQuery(lArg); } // css()方法 lQuery.prototype.css = function(){}; // html()方法 l

随机推荐