Movable Type 備忘録
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>)内に以下を追加します。
<script src="<$MTBlogURL$>js/jquery/jquery.js" type="text/javascript"></script>
さて本題です。
jQuery の基本的な使い方をこれから説明します。たとえば、以下のボタンをクリックすると 'MovableType備忘録' と表示されます。
上記サンプルのタグは以下の通りです。
<p><input type="button" value="jQueryテスト" onclick="$('#result').html('MovableType備忘録');"><input type="button" value="クリア" onclick="$('#result').html('');"></p><p id="result"></p>
このことからも分かるように、jQuery は $('●●●') という書式で、●●●に CSS と同様の記述を指定することで JavaScript のいろんな機能を使うことができます。
ID 名指定の場合は以下のようになります。$('#ID 名')また、CLASS 名で指定する場合には、
$('.CLASS 名')というように指定します。ストレートな記述なので分かりやすいですよね ( ̄∇ ̄)b
また、以下のようにセクション名を指定することで明示的に特定のタグを限定することもできます。$('div#section p.result')次は jQuery を使ってスタイルを変更してみます。
上記サンプルのタグは以下の通りです。
<p><input type="button" value="jQueryでスタイル変更" onclick="$('#result-color').css('color', '#f08300').css('font-size', '180%');"><input type="button" value="クリア" onclick="$('#result-color').css('color', 'black').css('font-size', '100%');"></p><p id="result-color">jQueryでスタイル変更</p>
$('●●●').css('KEY', 'VALUE') という書式で、各スタイルを変更することができます。
また、上記サンプルのように続けて指定することで、複数のスタイル変更できます。
ざっとですが、わたしが覚えた jQuery の使い方を説明してみました。
他にもたくさんの機能があります。
わたしもまだまだ勉強中なので、以下のページを参考にするといいかも、です ( ̄∇ ̄)b
また、jQuery にはプラグインという考え方があるようです。
いろんなプラグインが用意されていて、目的/用途に応じて使い分けることができるみたいですの。
簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
Trackback Pings(0)
No trackbacks found.
Comments(0)
No comments found.


Post a Comment