[jQuery]-jQuery的第一次

摘要:[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