多様なエレメントへのアクセス
jQueryでは、その文法の基本的な形は、こんな風になっています。（jQueryの基礎(1)参照）
$("#test").css("color","#FF0000");この形は、
$(<エレメントへのアクセス>.<イベントの実行>("属性や条件いろいろ",...)>);という形になっています。「エレメントへのアクセス」の部分はいろいろな本の中で「セレクタ」となっていたり言葉が違うのですが、要はhtmlのタグにアクセスして何らかの効果（イベント）を行うということです。ここでは「エレメント」に統一しておきたいと思います。セレクタはCSSとhtmlのIDやクラスの指定という意味で使用します。
エレメントへのアクセス方法はたくさんあります。ざっと基本的なところをあげてみると、
基本的な指定
- IDでアクセスする。$("#test")
- クラスでアクセスする。$(".test")
- タグでアクセスする。$("div");
- すべてにアクセスする。$("*")
- 複数のセレクタにアクセスする。$("div", "#text", ".test")
- 指定したエレメントを祖先にもつ要素にアクセスする。
- 指定した親子関係をもつエレメントにアクセスする。
- 指定したエレメントの兄弟要素にアクセスする。
- 指定したエレメント以降で兄弟となる要素にアクセスする。
- 最初の要素にアクセスする。
- 最後の要素にアクセスする。
- 指定したセレクタ以外の要素にアクセスする
- 偶数番号のエレメントにアクセスする。
API
エレメントにアクセスしたら、アクセスしただけでは何も起こらないなので、その部分に対して何らかのイベント、エフェクトなどいろいろなことを実行します。それが.(ドット)以下の部分で指定します。アクセス先のエレメント要素や各種のイベントは複数設定することもできます。ここでは、jQuery日本語リファレンスにしたがって「API」ということにしておきます。また各APIのカテゴリーは、Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities Internalsとなります。上記の例でのAPIはCSSということになります。
エレメントにアクセスしてAPIで様々な動作を実行することができます。
htmlタグの文字列を読み込む
htmlタグの文字列を読み込んで何らかの処理をすることができます。[Sample]jQuery
$(document).ready(function(){
alert($(".test").text());
})
html.textは指定したアクセス先の子要素をすべて読み込みます。つまり、<div class="test">htmlタグの内容を<span>読み込みます。</span></div>となっていても<span></span>も含めてすべて読み込まれます。
<div class="test">htmlタグの内容を読み込みます。</div>
htmlタグに文字列を書き込む
今度は、htmlタグに文字列を書き込みます。既存のタグの文字列を無視して上書きしてしまうことができます。[sample]jQuery
$(document).ready(function(){
$(".test").text('この部分が書き換えられました。');
})
html
<div class="test">htmlタグの内容を読み込みます。</div>
.textというAPIは、パラメーターを空にするとhtmlタグから文字列を読み込み、パラメーターに値を与えると文字列を書き込みます。なかなか一石二鳥のAPIなのです。
まとめ
jQueryの特徴は、メソッドチェーンという方式で次々にメソッドを入れ子にして連続して実行できるというものです。ですので上記の例でもいわゆる変数というものが見当たりません。しかし勿論jQueryはJavascriptを基盤にしているライブラリーに過ぎないので変数を使うこともできます。$(document).ready(function(){としても同様の動作をします。しかし、$(<element>)というエレメントへのアクセスとそれ以降の.<API>の組み合わせはまるで変数のようにそのメソッドの返り値をそのまま出力するので簡単なコード上では変数が必要なくなるわけです。
var a = 'この部分が書き換えられました。';
$(".test").text(a);
})
これはどうでしょう。[Sample] これは、htmlタグの中身を読み込んでいるわけですが、取り込んだ中身を一度変数に格納してからalertで表示することも勿論できます。しかし結果として、
$(document).ready(function(){は、
var a;
a=$(".test").text();
alert(a);
})
$(document).ready(function(){と同じ動作をすることになるわけです。
alert($(".test").text());
})
