JQuery入口函数$(function(){})与JS的window.onload的区别

本文探讨了传统JavaScript中window.onload事件与JQuery中$(function(){}

传统的JS的方式:页面加载的事件只能执行一次.

     window.onload = function(){
                alert("aaa");
            }

     window.onload = function(){
           alert("bbb");
       }

       页面只会弹出bbb对话框,没有aaa.      

JQuery的方式:相当于页面加载的事件,可以执行多次.效率比window.onload要高.

window.onload 等页面全部加载完成后才执行该方法.

$(function(){}):等页面的DOM树绘制完成(此时浏览器还没有解析加载元素)后进行执行.

$(function(){})相当于JS中的window.onload = function(){ },但是不同与js的是页面一开始加载,方法就执行

$可以立即为是JQuery的标志

     $(function(){
                alert("aaa");
            });

     $(function(){
         alert("bbb");
     });

     页面先弹出aaa对话框,后弹出bbb对话框 .
<think> 我们使用jQuery来重写window.onload事件的处理函数jQuery中,我们通常使用$(document).ready()来替代window.onload,因为ready事件在DOM树构建完成就触发,而window.onload要等到所有资源(如图片)加载完成。 但是,如果确实需要等待所有资源加载完成(即模拟window.onload),可以使用$(window).on('load', handler)的方式。 原代码是: window.onload = function () { ... } 用jQuery实现相同的功能(即等待页面所有资源加载完成)的写法是: $(window).on('load', function() { ... }); 或者简写: $(window).load(function() { ... }); // 但是注意,在jQuery 3.0中,.load()方法已经被废弃(除了用于加载数据的load),所以推荐使用.on('load') 然而,我们通常更倾向于使用$(document).ready(),因为它更早执行。但这里要求的是window.onload,所以我们将使用$(window).on('load')。 因此,转换后的jQuery代码为: $(window).on('load', function() { // 原函数体 }); 注意:如果原函数体是空的,那么就是: $(window).on('load', function() {}); 但是,如果用户需要的是在DOM就绪时执行,那么应该使用: $(document).ready(function() { ... }); 或者简写: $(function() { ... }); 由于问题中要求的是window.onload,所以我们使用window的load事件。 因此,回答如下: </think> 在 jQuery 中,`window.onload` 的等效写法有两种常用方式: **方法 1:使用 `$(window).on('load')`** ```javascript $(window).on('load', function() { // 你的代码 }); ``` **方法 2:使用简写形式(jQuery 3.0+ 推荐)** ```javascript $(window).load(function() { // 你的代码 }); ``` ### 关键区别说明: 1. ** `$(document).ready()` 的区别** `window.onload` 需等待**所有资源(图片/样式表等)加载完成**才触发,而 `$(document).ready()` 在 **DOM 树构建完成**后立即触发(不依赖资源加载)。 2. **执行时机对比** ```javascript $(document).ready(function() { console.log("DOM 就绪"); }); $(window).on('load', function() { console.log("所有资源加载完成"); }); ``` 输出顺序始终先打印 `"DOM 就绪"`,后打印 `"所有资源加载完成"`。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值