當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别

發布時間：2025/7/14 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery中處理加載時機的幾種方式

第一種：

jQuery(document).ready(function() {alert("你好");
}); //或 $(document).ready(function() {alert("你好");});

第二種：

jQuery(function() {alert("你好");}); //或 $(function() {alert("你好");});

第三種：

(function() {alert("你好");})(jQuery); 或 (function() {alert("你好");})($); 或 (function() {alert("你哈");})();

以上三種方式，第三種方式的執行優先級比第一種、第二種都要高。第一種和第二種平級。

以上三種又可以用?window.onload = function () {};代替。

$(function(){})和window.onload(){}區別？

1.window.onload(){};需要等頁面所有的內容（包括元素的所有關聯文件）都加載完成才會執行onload的代碼；

? ?$(function(){});在頁面的dom元素加載完畢后就執行,而無需等到圖片或其他媒體下載完畢；

執行下面這段代碼進行驗證：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>區別驗證</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> function img_load(){alert($("img").attr("width"));//250 } $(function(){alert($("img").attr("width"));//undefined $("img").attr("width","250px"); }); </script> </head> <body onload="img_load()"> <img alt="" src="images/404.jpg" /> </body> </html> $(function(){})和window.onload(){}區別驗證

2.$(document).ready()方法可以多次使用而注冊不同的事件處理程序，而window.onload一次只能保存對一個函數的引用，多次綁定函數只會覆蓋前面的函數。

body.onload和window.onload(){}區別？

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onload測試</title> <script type="text/javascript"> function test1(){alert("我是test1");//顯示 } function test2(){alert("我是test2");//顯示 } </script> </head> <body onload="test1(),test2()"></body> </html> onload加載多個函數測試

用$(window).load()加載多個函數

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> //window對象只能保存一個函數的應用 window.onload=function(){alert("我是加載一"); }; window.onload=function(){alert("我是加載二");//顯示 }; //使用下面的方法解決window加載多個函數 $(window).load(function (){alert("測試1");//顯示 }); $(window).load(function(){alert("測試2");//顯示 }); </script> </head> <body></body> </html> window.load加載多個函數測試

原文鏈接：jQuery(document).ready(function($) { });的幾種表示方法

轉載于:https://www.cnblogs.com/HDK2016/p/7019568.html

總結

以上是生活随笔為你收集整理的【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ubuntu16.04服务器配置mysq
下一篇： Spring MVC静态资源处理