1. 程式人生 > >javaScript和jQuery自動載入方法

javaScript和jQuery自動載入方法

一、JavaScript自動載入

①在文字中用onload: 當頁面中所有內容(包括圖片)載入完後再執行onload,如下:

<body onload="alert(1)"></body>                    <!-- 當有一個onload -->
<body onload="alert(2);alert(3);alert(4)"></body>  <!-- 當有多個onload用分號隔開,依次彈出 2 3 4 -->

②在指令碼中用window.onload: 當頁面中的所有內容(包括圖片)載入完後再執行window.onload,如下:
window.onload = function(){...}; //正確寫法,這是匿名函式

//------------↓多個window.onload的錯誤寫法-------------
window.onload = function(){alert("text1");}; //不執行
window.onload = function(){alert("text2");}; //執行
//------------↑---------------------------------------

//------------↓多個window.onload的正確寫法---------------------------
window.attachEvent("onload",function(){alert('a')});
window.attachEvent("onload",function(){alert('b')});
window.attachEvent("onload",function(){alert('c')});
//重點提示:在IE瀏覽器下用 (window.attachEvent),會彈出 c b a 
//重點提示:其他瀏覽器下用 (window.addEventListener),會彈出 a b c
//------------↑-----------------------------------------------------


二、jQuery自動載入
①當頁面中DOM結構(不包含圖片)載入完後再執行(可能DOM元素關聯的東西並沒有載入完),有三種寫法,如下:
$(document).ready(function(){...});//寫法1,全稱
$(function(){...});                //寫法2,簡寫
jQuery(function($){...});          //寫法3,簡寫

②頁面中所有元素(包括圖片)載入完成才執行,如下。
$(window).load(function() {...});  //等於JavaScript的寫法,如window.onload = function(){...}; 

③立即執行匿名函式。 當一個匿名函式被括起來,然後再在後面加一個括號,這個匿名函式就能立即執行起來,有兩種寫法,如下:
(function(){...})();        //寫法1,不加引數
(function($){...})(jQuery); //寫法2,加引數,避免與其他變數發生衝突

解釋:
function(arg){...}; //定義一個匿名函式,引數為arg

呼叫此函式時,在函式後面寫上括號和實參,由於操作符的優先順序,函式本身也需要用括號,如下:
(function(arg){...})(param);//arg是形參,param是實參

相當於定義了一個引數為arg的匿名函式,並且將param作為引數來呼叫這個匿名函式。 所以下面的寫法總結為:只在形參使用$,是為了不與其他庫衝突,所以實參用jQuery,如下。
(function($){...})(jQuery);

說白了,如下:
funtion show(s){...};       //相當於這種寫法
show(jQuery);             

//-------------------------------------------

var show=function(s){...};  //或者相當於這種寫法
show(jQuery);