2009年05月12日

始めてのjQuery on Google AJAX API

  
AJAX開発を行う時に、javascriptライブラリを使用する必要があるのですが、
「開発環境が一箇所ではない時」には、

 『複数のPCに同じ環境を整えなければいけない』
 
という手間がかかり、開発する気が減退します。 それを解決してくれるのが、
AJAX Libraries API というGoogleのサービスだったりします。
これはざっくりと言えば、
 「HTMLアクセスがあった時に、Googleサーバーからjavascriptライブラリを取得できる」
というサービスです。

1.使い方
 例えばjQueryを使用した場合は、内に
 

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.3");</script>
 

 と記述すればOK。
 
 「google.load("jquery","1.3");」は、指定してあるバージョンレベルの最新版をロードします。
  ・「google.load("jquery","1.3");」
   jQueryの1.3系の最新版
  ・「google.load("jquery","1.");」
   jQueryの1系の最新版
  ・「google.load("jquery","1.3.7");」
   jQueryの1.3.7系の最新版(これより下位レベルは無いので、実質バージョンを特定)
   
2.なんかやってみる
 jQueryを使った簡単なサンプルを動かしてみます。
 

  <html>
  <head>
  <title>jQueryテストページ</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("jquery","1.3");</script>

  <script type="text/javascript"><!--
  function hello(){
   $("#hello").html("<strong>Hello jQuery World!</strong>");
   $("#btn1").html("<input type=\"button\" name=\"btn1\" value=\"GoodByte!\" onclick=\"goodbye()\">");
   }
   function goodbye(){
   $("#hello").html("<strong>goodbye prototype World!</strong>");
   $("#btn1").html("<input type=\"button\" name=\"btn1\" value=\"Hello!!\" onclick=\"hello()\">");
   }
   function hide(){
   $("#hello").slideUp();
   $("#btn2").html("<input type=\"button\" name=\"btn2\" value=\"Show\" onclick=\"show()\">");
   }
   function show(){
   $("#hello").slideDown();
   $("#btn2").html("<input type=\"button\" name=\"btn2\" value=\"Hide\" onclick=\"hide()\">");
   }
  --></script>
  </head>
  <body>
   <div id="hello">ココが変化します。</div><br>
   <div id="btn1"><input type="button" name="btn1" value="Hello!" onclick="hello()"></div><br>
   <div id="btn2"><input type="button" name="btn2" value="Hide" onclick="hide()"></div>
  </body>
  </html>
 

 ボタンを適当に押して試してみて下さい。
  
ココが変化します。

  

  


追記:
HTMLメタ文字→エスケープ文字変換javascriptの変換が動かなかったのを直しました。


ラベル:jquery
posted by purigen at 02:42| Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。