摘要:[jQuery]-jQuery的第一次
這次為了在 google app 上開發應用程式,第一次用 python 寫web page , 寫到表單驗證的時候,打算使用jQuery來做些效果,不料....步步坎坷,廢話不多說,直接把這兩天卡關解決方法記下來
Trouble Description :
網路上找到的文章,都很容易的只要把包有 jQuery Library 給拿回來就能用了,"拿"這部份,我沒什麼問題,不過要用的時候,寫了一些基本的jQuery語法,但就是沒反應。
Solution :
先講講怎麼"拿"
方法 a):
在網頁的<head> </head>之間,直接加入一行
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
如果不想從網路上去載入,也可以將 jquery-latest.min.js 抓回來,放在自己的資料夾上,將路徑改過即可。
方法 b):
從 google 提供的 jsapi 將 jQuery library 載入回來,同樣在<head> </head>之間加入一行
<script src="http://www.google.com/jsapi?key=abc" type="text/javascript"></script>
abc 這三個字是要去 google 申請的,請入內親洽
不申請也能用.... = =
再來說怎麼"用"
a).直接載入網路上的 jQuery library . js ,把你寫好要執行的function像下面寫的,包在 $(document).ready 裡面
<script type="text/javascript">
$(document).ready(function() {
$("p").click(function() {
$(this).css("background-color", "blue");
alert('hiP');
});
$("input#aa").click(function() {
$(this).css("background-color", "blue");
alert('hiB');
});
alert(' jQuery loaded !');
});
</script>
b).申請 google jsapi 的話,一樣把你寫的程式碼包在 google.setOnLoadCallback()裡面
<!--- if use google jsapi , please write functions in google.setOnLoadCallback()---->
//載入jQuery
google.load("jquery","1")
google.setOnLoadCallback(function(){
$("p").click(function() {
$(this).css("background-color", "blue");
alert('hiP');
});
$("input#aa").click(function() {
$(this).css("background-color", "blue");
alert('hiB');
});
alert('Google jsapi loaded!');
}
);
</script>
以上兩種方法,我想應該都是確保網頁在Render的時候,也許有些元件還沒被Render出來,就急著去執行,造成根本找不到元件而發生錯誤,偏偏錯誤發生之後,好像又不會繼續往下執行,所以就一直 hang 在那邊,以為根本沒載入。
另外要注意的是,上面這兩種方法,好像不能一起用,我一開始也是把 $(document).ready 跟 google.setOnLoadCallback() 兩種方法混著用,但是在Firebug會出現錯誤訊息,而且功能失效!
firefox上可以安裝一套叫 firebug 的套件,可以完整的針對 script 的部份做偵錯,還不錯用. firebug download