怎樣用原生JS實現(xiàn)jQuery的ready方法

function?ready(fn){

創(chuàng)新互聯(lián)建站專注于網(wǎng)站建設(shè)|網(wǎng)站建設(shè)維護|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù)，案例作品覆蓋建筑動畫等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身設(shè)計品質(zhì)網(wǎng)站。

if(document.addEventListener)?{

document.addEventListener('DOMContentLoaded',?function()?{

//注銷事件,?避免反復(fù)觸發(fā)

document.removeEventListener('DOMContentLoaded',arguments.callee,?false);

fn();????????????//執(zhí)行函數(shù)

},?false);

}else?if(document.attachEvent)?{????????//IE

document.attachEvent('onreadystatechange',?function()?{

if(document.readyState?==?'complete')?{

document.detachEvent('onreadystatechange',?arguments.callee);

fn();????????//函數(shù)執(zhí)行

}

});

}

};

相關(guān)知識

瀏覽器加載頁面的順序：

解析HTML結(jié)構(gòu)

加載外部腳本和樣式表文件

解析并執(zhí)行腳本代碼

構(gòu)造HTML DOM模型==ready()

加載圖片等組件

頁面加載完畢==onload()

ready事件是在DOM模型構(gòu)造完畢時觸發(fā)

load事件是在頁面加載完畢后觸發(fā)

jquery中$ready和window.onload的區(qū)別

$ready是在頁面的DOM結(jié)構(gòu)加載完畢就發(fā)生，而window.onload要等到頁面的所有元素（包括圖片等多媒體元素）加載完畢才會發(fā)生。因此$ready發(fā)生在window.onload之前。

JQuery onload、ready概念介紹及使用方法

頁面加載完成有兩種事件，一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁

面包含圖片等文件在內(nèi)的所有元素都加載完成。(可以說：ready

在onload

前加載！！！)

一般樣式控制的，比如圖片大小控制放在onload

里面加載;

jS事件觸發(fā)的方法，可以在ready

里面加載;

用jQ的人很多人都是這么開始寫腳本的：

通常的寫法

復(fù)制代碼

代碼如下:

$(function(){

//

do

something

});

其實這個就是jq

ready()的簡寫，他等價于：

復(fù)制代碼

代碼如下:

$(document).ready(function(){

//do

something

})

也等于下面這個方法，jQuer的默認參數(shù)是：“document”；

復(fù)制代碼

代碼如下:

$().ready(function(){

//do

something

})

$(document).Ready()方法

VS

OnLoad事件

VS

$(window).load()方法

接觸JQuery一般最先學(xué)到的是何時啟動事件。在曾經(jīng)很長一段時間里,在頁面載入后引發(fā)的事件都被加載

在”Body”的Onload事件里.

對于Body的Onload事件和JQuery的Ready方法相比，有很多弊端.比如:

加載

多個函數(shù)的問題

■body

onload="a();b();"

/body

在Onload事件中

只能這樣加載，很丑陋…

■而在JQuery中你可以利用多個JQuery.Ready()方法，它們會按次序依次執(zhí)行

代碼和內(nèi)容不分離

這個貌似不用說了，讓人深惡痛絕-.-!!?

執(zhí)行先后順序不同

■對于Body.Onload事件，是在加載完所有頁面內(nèi)容才會觸發(fā)，我的意思是所有內(nèi)容,包括圖片，flash等.如果頁面的這些內(nèi)容很多會讓用戶等待很

長時間.

■

而對于$(document).ready()方法，這個方法只是在頁面所有的DOM加載完畢后就會觸發(fā),無疑很大的加快了網(wǎng)頁的速度.

但是對于一些特殊應(yīng)用，比如圖片的放大縮小，圖片的剪裁。需要網(wǎng)頁所有的內(nèi)容加載完畢后才執(zhí)行的呢？我推薦使用$(window).load()方法，這

個方法會等到頁面所有內(nèi)容加載完畢后才會觸發(fā)，并且同時又沒有OnLoad事件的弊端.

復(fù)制代碼

代碼如下:

script

type="text/javascript"

$(window).load(function()

{

alert("hello");

});

$(window).load(function()

{

alert("hello

again");

});

/script

上面的代碼會在頁面所有內(nèi)容加載完成后按先后順序依次執(zhí)行.

當(dāng)然不要忘了與之對應(yīng)的Unload方法

復(fù)制代碼

代碼如下:

script

type="text/javascript"

$(window).unload(function()

{

alert("good

bye");

});

/script

上面代碼會在頁面關(guān)閉時引發(fā).

在

所有DOM加載之前引發(fā)JS代碼

這個方法是我在調(diào)試的時候最喜歡的，有時候開發(fā)的時候也用這種方法

復(fù)制代碼

代碼如下:

body

script

type="text/javascript"

(function()

{

alert("hi");

})(jQuery)

/script

/body

對，

就是利用js閉包的形式將js代碼嵌入body，這段代碼會自動執(zhí)行，當(dāng)然也可以直接嵌入js代碼,這種方式要注意順序問題，如下：

復(fù)制代碼

代碼如下:

body

div

id="test"this

is

the

content/div

script

type="text/javascript"

alert($("#test").html());//I

Can

display

the

content

/script

/body

body

script

type="text/javascript"

alert($("#test").html());//I

Can't

display

the

content

/script

div

id="test"this

is

the

content/div

/body

上面兩段代碼,

第二段代碼當(dāng)中因為只能解釋到當(dāng)前代碼之前的DOM,而test并不存在于已經(jīng)解析的DOM數(shù).所以第二段代碼無法正確顯示.

jquery什么時候需要用$()ready 必須寫么

你好，$().ready作用于所有html的dom元素加載完畢之后，尤其是動態(tài)的html，在不確定html文檔是否加載完成的情況下，需要使用，如果不使用，可能會出現(xiàn)，dom元素未加載完成，如果直接使用$("div")防止獲取的dom為null，所以建議必須寫上

其二，建議jquery的代碼寫在$().ready中，這是一個jquery的環(huán)境，也就是說在他中的代碼可以被jquery識別，為了防止jquery庫出現(xiàn)錯誤

希望可以幫助到你

jquery ready和onload的區(qū)別

1、window.onload必須等到頁面內(nèi)包括多媒體等所有元素加載完畢后才能執(zhí)行，

$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到多媒體加載完畢，ready()快于onload；

2、window.onload不能同時編寫多個，如果有多個window.onload方法，只會執(zhí)行一個

$(document).ready()可以同時編寫多個，并且都可以得到執(zhí)行

名稱欄目：jqueryready,jqueryready事件用click
URL網(wǎng)址：http://chinadenli.net/article26/dsgipcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站策劃、用戶體驗、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)