Movable Type 備忘録

jQueryを使ってみる

Jun212007
Author: bzbell
Categories: Customize
Tags: JavaScript, jQuery

Next Page: jQueryでスムーススクロール
Prev Page: mootoolsでリッチなメニューを作る

こんにちわ^^

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2007/06/21-042719.php on line 73

Warning: include(http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/moblog/ML_TS380006.jpg&width=200&height=120&title=&noscript=0) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2007/06/21-042719.php on line 73

Warning: include() [function.include]: Failed opening 'http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/moblog/ML_TS380006.jpg&width=200&height=120&title=&noscript=0' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2007/06/21-042719.php on line 73

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2007/06/21-042719.php on line 74

Warning: include(http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/moblog/ML_TS380007.jpg&width=200&height=120&title=&noscript=1) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2007/06/21-042719.php on line 74

Warning: include() [function.include]: Failed opening 'http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/moblog/ML_TS380007.jpg&width=200&height=120&title=&noscript=1' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2007/06/21-042719.php on line 74

部屋の掃除してたら、またネコたんが和ませてくれました (●＞∀＜●) キャゥー
ネコたんのベッド(全部で3つある（￣Д￣；）)が移動しているのに気づいたらしく、腰を低くして忍び足で歩きだしたんです Σ(￣Д￣；) ホワァイ!?

何を警戒しているのかさっぱりですが、オモシロそうだったので一部始終見させてもらいました (^▽^;)
5分後くらいかなぁ、何事もないことが分かったようで、突如わたしに向かって「ベッドを勝手に移動するニャっ!!」と言わんばかりに喚き散らされました Σ(￣Д￣；) ホワァット!?

まったくもって理解に苦しむ、女王さまです (;￣∇￣A

女王さまの話はサラァ～と流して、今回は以前から目にしてました jQuery という JavaScript で遊んでみましたので、jQuery の使い方などご紹介したいと思います。

Ajax フレームワークとして、わたしのサイトでも利用している prototype.js が有名ですが、jQuery もその類のものみたいです。

当然 Ajax による非同期通信や、他の JavaScript と併用することでカンタンに視覚的な効果を付けることができるみたいです。
しかもサイズが小さい!!

ディレクトリ構成

http://●●●.com/
  |
  +-- index.html              <-- 各自のトップページ
  +-- styles-site.css         <-- 各自のスタイルシート
  |
  +-- js/
  |    +-- jquery/            <-- 新規作成
  |    |    +-- jquery.js
  |    |

jQuery の使い方

まずはインストールから。
こちらのjQuery JavaScript libraryからダウンロードします。

そして、上記ディレクトリ構成のようにアップロードします。
次に HTMLヘッダ(<head>～</head>)内に以下を追加します。
1. <script src="<$MTBlogURL$>js/jquery/jquery.js" type="text/javascript"></script>
さて本題です。
jQuery の基本的な使い方をこれから説明します。

たとえば、以下のボタンをクリックすると 'MovableType備忘録' と表示されます。

上記サンプルのタグは以下の通りです。
1. <p><input type="button" value="jQueryテスト" onclick="$('#result').html('MovableType備忘録');">
2. <input type="button" value="クリア" onclick="$('#result').html('');"></p>
3. <p id="result"></p>
このことからも分かるように、jQuery は $('●●●') という書式で、●●●に CSS と同様の記述を指定することで JavaScript のいろんな機能を使うことができます。
ID 名指定の場合は以下のようになります。
```
$('#ID 名')
```
また、CLASS 名で指定する場合には、
```
$('.CLASS 名')
```
というように指定します。ストレートな記述なので分かりやすいですよね (￣∇￣)b
また、以下のようにセクション名を指定することで明示的に特定のタグを限定することもできます。
```
$('div#section p.result')
```
次は jQuery を使ってスタイルを変更してみます。

上記サンプルのタグは以下の通りです。
1. <p><input type="button" value="jQueryでスタイル変更" onclick="$('#result-color').css('color', '#f08300').css('font-size', '180%');">
2. <input type="button" value="クリア" onclick="$('#result-color').css('color', 'black').css('font-size', '100%');"></p>
3. <p id="result-color">jQueryでスタイル変更</p>
$('●●●').css('KEY', 'VALUE') という書式で、各スタイルを変更することができます。
また、上記サンプルのように続けて指定することで、複数のスタイル変更できます。