快捷導(dǎo)航

javaScript和jQuery自動(dòng)加載簡單代碼實(shí)現(xiàn)方法

更新時(shí)間：2017年11月24日 12:08:34 投稿：laozhang

給大家介紹一下利用javaScript和jQuery實(shí)現(xiàn)自動(dòng)加載最簡單的代碼寫法。

在此之前我們給大家整理過用javaScript和jQuery自動(dòng)加載的幾種方法，大家可以參考一下：javaScript 頁面自動(dòng)加載事件詳解

一、JavaScript自動(dòng)加載

①在文本中用onload：當(dāng)頁面中所有內(nèi)容（包括圖片）加載完后再執(zhí)行onload，如下：

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

②在腳本中用window.onload：當(dāng)頁面中的所有內(nèi)容（包括圖片）加載完后再執(zhí)行window.onload，如下：

window.onload = function(){...}; //正確寫法，這是匿名函數(shù)

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

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

二、jQuery自動(dòng)加載

①當(dāng)頁面中DOM結(jié)構(gòu)（不包含圖片）加載完后再執(zhí)行（可能DOM元素關(guān)聯(lián)的東西并沒有加載完），有三種寫法，如下：

$(document).ready(function(){...});//寫法1，全稱 
$(function(){...});        //寫法2，簡寫 
jQuery(function($){...});     //寫法3，簡寫

②頁面中所有元素（包括圖片）加載完成才執(zhí)行，如下。

$(window).load(function() {...}); //等于JavaScript的寫法，如window.onload = function(){...};

③立即執(zhí)行匿名函數(shù)。當(dāng)一個(gè)匿名函數(shù)被括起來，然后再在后面加一個(gè)括號，這個(gè)匿名函數(shù)就能立即運(yùn)行起來，有兩種寫法，如下：

(function(){...})();    //寫法1，不加參數(shù)
(function($){...})(jQuery); //寫法2，加參數(shù)，避免與其他變量發(fā)生沖突

您可能感興趣的文章:

相關(guān)文章

jquery自定義表單驗(yàn)證插件
這篇文章主要為大家詳細(xì)介紹了jquery自定義表單驗(yàn)證插件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
用JQuery實(shí)現(xiàn)全選與取消的兩種簡單方法
本篇文章主要是對JQuery實(shí)現(xiàn)全選與取消的兩種簡單方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
基于JQuery的多標(biāo)簽實(shí)現(xiàn)代碼
最近在學(xué)習(xí)JQuery，其實(shí)也不叫學(xué)習(xí)，很久以前就學(xué)過，只是有一段時(shí)間沒用，有些生疏了，于是就做幾個(gè)小例子來練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來
2012-09-09
JQuery+Bootstrap 自定義全屏Loading插件的示例demo
這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-07-07
用Jquery.load載入頁面實(shí)現(xiàn)局部刷新
用jquery.load的方法載入新的頁面，以實(shí)現(xiàn)局部刷新，可結(jié)果發(fā)現(xiàn)載入進(jìn)來的頁面與原來單獨(dú)的頁面不一樣，樣式?jīng)]了，關(guān)于這個(gè)問題，下面有個(gè)不錯(cuò)的解決方法
2014-01-01
jQuery實(shí)現(xiàn)淡入淡出的模態(tài)框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)淡入淡出的模態(tài)框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery插件Validate實(shí)現(xiàn)自定義校驗(yàn)結(jié)果樣式
這篇文章主要介紹了jQuery插件Validate實(shí)現(xiàn)自定義校驗(yàn)結(jié)果樣式的方法，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery常見的選擇器及用法介紹
選擇器的意義就是將眾多html代碼中準(zhǔn)確的找出我們想找的單元。接下來將常見的選擇器以及作用列舉出來，對jQuery常見的選擇器及用法感興趣的朋友一起看看吧
2016-12-12
使用JQuery快速實(shí)現(xiàn)Tab的AJAX動(dòng)態(tài)載入(實(shí)例講解)
這篇文章主要介紹了使用JQuery快速實(shí)現(xiàn)Tab的AJAX動(dòng)態(tài)載入(實(shí)例講解)需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jquery實(shí)現(xiàn)的仿天貓側(cè)導(dǎo)航tab切換效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的仿天貓側(cè)導(dǎo)航tab切換效果,涉及jquery鼠標(biāo)事件及鏈?zhǔn)讲僮鲗?shí)現(xiàn)頁面元素樣式遍歷切換效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08