jQuery入門02 - $関数 -

tech

jQueryでは$()というコアとなる関数があります。
今回はその$関数についてです。


javascriptでは"$"という文字を変数名や関数名に使えます。つまり通常の文字aやxと同じ扱いです。
でも普通はあまり使いませんよね。というか僕はjQueryを使うまで"$"が使えるなんて知らなかったですから。
そんな"$"をjQueryでは$()というように"$"一文字の関数として使用しています。
その$()には引数によっていくつかの使い方があります。

  • 関数を渡す $(function(){...})
  • DOMセレクタを渡す $(".FooClass")
  • DOM要素を渡す $(divElement)
  • HTML文字を渡す $("<div>foo</div>")

ではそれぞれがどのような意味を持つのかまとめてみます。

関数を渡す $(function(){...})

これは簡単に説明すると<body onload="(function(){...})()">と同じことです。
つまりドキュメントが読み込まれたら引数に与えた関数を実行するということです。
<head></head>内に以下のように書きます。

<head>
<script type="text/javascript">
$(function(){
  alert("document was loaded");
});
</script>
</head>

DOMセレクタを渡す $(".FooClass")

この使い方がjQueryを使う上で一番使われると思います。
DOMセレクタを文字列で渡すと、それに合うjQueryオブジェクトの配列を取得できます。
jQueryオブジェクトとはDOM要素の操作を行う、jQueryのコアとなるオブジェクトです。
DOMセレクタの渡し方はCSSのセレクタと同じ感覚で使用できます。

//変数に$をつけるのはjQueryオブジェクトだということを分かりやすくするため
var $foo = $(".FooClass");
var $bar = $("#BarID");

//jQueryオブジェクトはこんな風に使う
//FooClassの文字色を変更する
$(".FooClass").css("color" , "#ff0000");

DOM要素を渡す $(divElement)

getElementById()等で取得した通常のDOM要素をjQueryオブジェクトに変換します。

var div = document.getElementById("FooID");
var $div = $(div);

HTML文字を渡す $("<div>foo</div>")

HTML文字列を渡すことでjQueryオブジェクトを作成します。

var $div = $("<div>foo</div>");
alert($div.text());



jQueryでは$()は最も使われる関数です。他にも$オブジェクトもあり、こちらはAjaxですごくお世話になります。
また$()はjQuery()という記述も可能です。prototype.js等と競合しないために、$.noConflict()を使ったときに$()ではなくjQuery()を使います。(多分)
次回はDOMセレクタについてです。