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

JS与JQuery加载事件对比
本文探讨了传统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对话框 .
### 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> <!-- 引入 jQuery 库 --> <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”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值