JQuery Tips相關(guān)(1)----關(guān)于$.Ready()

更新時(shí)間：2014年08月14日 11:06:42 投稿：hebedich

學(xué)習(xí)jQuery的第一件事是：如果你想要一個(gè)事件運(yùn)行在你的頁面上，你必須在$(document).ready()里調(diào)用這個(gè)事件。所有包括在$(document).ready()里面的元素或事件都將會(huì)在DOM完成加載之后立即加載，并且在頁面內(nèi)容加載之前。

最近一直在研究JQuery,這個(gè)東西還是很博大精深的.下面分享一下我的學(xué)習(xí)總結(jié).

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

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

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

1.加載多個(gè)函數(shù)的問題

<body onload="a();b();">

</body>

在Onload事件中只能這樣加載，很丑陋…而在JQuery中你可以利用多個(gè)JQuery.Ready()方法，它們會(huì)按次序依次執(zhí)行

2.代碼和內(nèi)容不分離
這個(gè)貌似不用說了，讓人深惡痛絕-.-!!

3.執(zhí)行先后順序不同
對(duì)于Body.Onload事件，是在加載完所有頁面內(nèi)容才會(huì)觸發(fā)，我的意思是所有內(nèi)容,包括圖片，flash等.如果頁面的這些內(nèi)容很多會(huì)讓用戶等待很長(zhǎng)時(shí)間.

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

但是對(duì)于一些特殊應(yīng)用，比如圖片的放大縮小，圖片的剪裁。需要網(wǎng)頁所有的內(nèi)容加載完畢后才執(zhí)行的呢？我推薦使用$(window).load()方法，這個(gè)方法會(huì)等到頁面所有內(nèi)容加載完畢后才會(huì)觸發(fā)，并且同時(shí)又沒有OnLoad事件的弊端.

  <script type="text/javascript">
    $(window).load(function() {
      alert("hello");
    });
    $(window).load(function() {
      alert("hello again");
    });
  </script>

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

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

$(window).unload(function() {
      alert("good bye");
    });

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

在所有DOM加載之前引發(fā)JS代碼
這個(gè)方法是我在調(diào)試的時(shí)候最喜歡的，有時(shí)候開發(fā)的時(shí)候也用這種方法

<body>
  <script type="text/javascript">
    (function() {
      alert("hi");
    })(jQuery)
  </script>
</body>

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

<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)中因?yàn)橹荒芙忉尩疆?dāng)前代碼之前的DOM,而test并不存在于已經(jīng)解析的DOM數(shù).所以第二段代碼無法正確顯示.

您可能感興趣的文章: