jQueryの基礎(1)

2010.11.20 1:46
 jQueryは基本的にJavascriptと全然違う書き方をします。勿論変数の扱い方とかその他いろいろとJavacriptが基本なので同じところは同じです。しかし「よく使う機能」については圧倒的に書き方が違います。
 そしていろいろとテクニカルタームが違ってきます。エレメントとかセレクタとかイベントとか、いろいろとちょっと意味が違っていたりと微妙に違う。ですので、実例を上げながら説明してゆきます。

CSSのようにHTMLタグにアクセスしていろいろやる

 CSSができるのだったら、ここらのjQueryは簡単です。実際のjQueryの醍醐味は動的で非同期的な処理なのでここでの静的な動作はちょっと変な感じがしますが、あくまでも基礎ということで。
<div id="test">過剰な愛情は洗脳と殆ど見分けがつかない。</div>
というテキストを赤くする場合は、
<script type="text/javascript">
$(document).ready(function(){
   $("#test").css("color", "#FF0000");
})
</script>
という風になります。[Sample]

解説

  $()という変な書き方をします。これはjQueryの基本でこの括弧の中にいろいろ書きます。上記の例では、$(documment).readyという書き方をしています。これは、documentにアクセスしますよ!という意味でして、実際問題「documentにアクセスしないで何をやるんだ?」ということになりますので、とても短いショートカットも用意されています。
<script type="text/javascript">
$(function(){
   $("#test").css("color", "#FF0000");
})
</script>
 $(document).ready();は必ず使うと言っても過言ではないので、$();とドルマークだけを使って書くことができます。たいていの人はこっちを用いて書きます。$(document).ready();は長いので皆様あまり使いません。しかし、意味ぐらい知っておく必要があるかもしれません。
 これは、documentつまりこのテキストのいろいろなソースに対して、.readyアクセスの準備をしますよ...というような意味だと思えばいいです。これで始まってこれで終わるといった様子です。
 さて、ここから先はjQueryが本格的にはじまります。$(function(){})でもって関数風な作りでもって次の何やらを実行しようとします。これは通常のサーバーサイドスクリプトと全然違うところでして、関数風な$(document).ready(......);の中に更に次の関数を突っ込んで実行しようということなのです。関数の中に関数を入れ子にしてまたその関数に関数を入れることができます。これは、何だかおかしなネスト方法ではあるのですが、jQueryは、メソッドチェーンと呼ばれるメソッド(関数)の入れ子が永遠にできるわけなのです。たしかperlもそんなようなことができたと思いますが、ソースがめちゃくちゃになるのでそんなことはしません。しかしjQueryは常識的にチェーンしてゆきます。上記の例を見ただけでもすごいネストです。
<script type="text/javascript">
$(
   function() {
      $(
      "#test"
      )
      .css(
      "color", "#FF0000"
      );
   }
)
</script>
驚きの入れ子です。これが脅威の世界で一番短く簡潔なコードを書けるという特徴なのです。順番に説明すると、
  1. documentをreadyして、
  2. その中にfunctionを入れて、
  3. そのfunction(メソッド)の中で、
  4. またdocumentをreadyして、
  5. セレクタでもって#testを指定し、
  6. .cssというイベントみたいなもので、色を指定しています。
何とも面倒な話です。
 さて、ここまできてはじめてCSSのような実際的な作業が可能になります。先ほどの$(document).ready...のように、
$("セレクタ")
でもって、htmlのidやclass、またはタグそのものにアクセスが可能です。ここでは、$("test")なので、<div id="test"></div>にアクセスしていることになります。で、アクセスして何をするのかという問題です。先ほどのように$(document)にアクセスしたら、.ready(準備)する...としたわけですが、ここでも同様にidにアクセスしたら、.css...つまりCSSするわけです。
#testに対してCSSすることができるというわけです。
$("#test").css();
こんな感じです。
 そして、CSSで何をするのかというと、ここでは2つのパラメーターをとります。文字色とその色です。
$("#test").css("color", "#FF0000");
こんな感じです。

 最終的にこんな風に書いちゃう人もいます。
$(function(){$("#test").css("color","#FF0000");})
なんのこっちゃ。括弧の位置がもうわからなくて、ネストの状態が不明。

まとめ

 Ajaxはインターフェイスに対して何かしらのアクションをします。ここでは静的ですが文字に対して色を変えるというアクションをしました。基本的にjQueryは、htmlタグにアクセスしてそのタグ(文字や画像やフォームなどのパーツ)に対して何らかのアクションを命令します。その基本的な書き方が上記の例のような形になるわけです。
 ここではCSSという退屈な方法を紹介していますが、セレクタでもって何らかのタグを選択できたら、それらをフェードインして表示するとか、クリックされたら大きくするとか、ページをロードされたらなんちゃらになるとか、いろいろできるのです。








プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer