jQuery函數放置

好的，所以我最近開始學習jQuery，但是我在jQuery網站下的一個小動畫程序遇到問題。所以這裏是問題所在。這個程序的工作原理：jQuery函數放置

<HTML> 
<HEAD> 
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script> 

<STYLE type="text/css"> 

#content { 
    background-color:#6688ff; 
    position:absolute; 
    width:100px; 
    height:100px; 
    padding:3px; 
    margin-top:5px; 
    left: 100px; 
} 
</STYLE> 
</HEAD> 
<BODY> 
<input type="button" id="left" value="Left"/> 
<input type="button" id="right" value="Right"/> 
<div id="content">Move</div> 
<script type="text/javascript"> 
$("#right").click(function() { 
    $("#content").animate(
      {"left": "+=50px"}, 
      "slow"); 
}); 
$("#left").click(function() { 
    $("#content").animate(
       {"left": "-=50px"}, 
      "slow"); 
}); 
</script> 

</BODY> 
</HTML>

但這個方案並不：

<HTML> 
<HEAD> 
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script> 

<script type="text/javascript"> 
$("#right").click(function() { 
    $("#content").animate(
      {"left": "+=50px"}, 
      "slow"); 
}); 
$("#left").click(function() { 
    $("#content").animate(
       {"left": "-=50px"}, 
      "slow"); 
}); 
</script> 

<STYLE type="text/css"> 

#content { 
    background-color:#6688ff; 
    position:absolute; 
    width:100px; 
    height:100px; 
    padding:3px; 
    margin-top:5px; 
    left: 100px; 
} 
</STYLE> 
</HEAD> 
<BODY> 
<input type="button" id="left" value="Left"/> 
<input type="button" id="right" value="Right"/> 
<div id="content">Move</div> 


</BODY> 
</HTML>

兩個程序之間唯一的區別就是我把javscript，所以任何人都可以解釋我爲什麼有差別？謝謝，因爲這使我感到困惑。

來源

2012-02-26 Jack Davis

當第二個jQuery代碼塊運行時，文檔沒有準備好，所以它不起作用。

始終包裝jQuery代碼在$(document).ready()聲明：

$(document).ready() { 
    $("#right").click(function() { 
    $("#content").animate({"left": "+=50px"}, "slow"); 
    }); 

    $("#left").click(function() { 
    $("#content").animate({"left": "-=50px"}, "slow"); 
    }); 
});

你的第二個代碼塊是正確的。

來源

2012-02-26 05:56:58 Blender

總是？你可以把你的腳本塊放在身體的盡頭...... – nnnnnn 2012-02-26 06:24:53

你爲什麼要這麼做？ – Blender 2012-02-26 06:26:00

爲什麼不呢？它可以讓瀏覽器繼續渲染實際頁面，而不必先解析腳本。在document.ready（或onload）和腳本的頭部使用腳本是最常用的兩種方法，不是嗎？ – nnnnnn 2012-02-26 07:01:31

瀏覽器從上到下加載/解析/呈現html和javascript，其中一個不起作用，因爲您將它放在這些html元素之前，當它運行時找不到這些html標記，請使用jQuery準備好避免這種情況：http://api.jquery.com/ready/

來源

2012-02-26 05:58:34

css應該放在任何javascript之前，以便文檔具有所有預加載的元素。

來源

2012-02-26 05:58:45

css？你的意思是html。 – nnnnnn 2012-02-26 06:25:36

我的意思是CSS應該出現在DOM之前的js – 2012-02-28 15:29:42

如果CSS是在JS之後沒關係，如果html元素是重要的。 – nnnnnn 2012-02-28 20:36:38

在right被聲明之前，第二個代碼塊是指#right。

來源

2012-02-26 05:59:29

jQuery函數放置

回答

相關問題