jQueryを使って気づいたことのメモ。
まずjQueryを使って書いたJavaScriptは、別ファイルmyscript.jsとして作成し、該当のHTMLファイルから読み込むようにする。
JavaScriptとHTMLはファイルを分けたほうがメンテナンスがしやすいため。両社が同じフォルダ内にある場合は”./～.js”という具合に指定。
<script src=”./myscript.js” type=”text/javascript”></script>
以下、セレクタについて。
class名はドット始まり。id名は#始まり。
// classが class_name という名前の要素すべて
$(“.class_name”)
// idが id_name という名前の要素すべて
$(“#id_name”)
さらに属性で絞り込みたい場合は [属性名1=’値1′][属性名2=’値2′]… とつなげればよい。
$(“.class_name[attribute1=’val1′][attribute2=’val2′]”)
$(“#id_name[attribute1=’val1′][attribute2=’val2′]”)
これらの絞り込みが想定しているのは、下記のようなHTML。
<div id=”id_name” attribute1=”val1″ attribute2=”val2″>
here goes some html
</div>
この要素はidが id_name で attribute1 が val1 で attribute2 が val2。
したがって
$(“#id_name[attribute1=’val1′][attribute2=’val2′]”)
と書けばピンポイントでこの要素に絞りこめる。
ある要素の配下にある、特定のclassやidで絞り込みたい場合は[class=’クラス名’] [id=’id名’]とすればよい。
つまり、class名もid名も、セレクタで絞り込むときには属性と同等にあつかえる。
$(“.class_name[id=’id_name’]”)
$(“#id_name[class=’class_name’]”)
これらは以下のように書いても同じ。
$(“.class_name #id_name”)
$(“#id_name .class_name”)
ここまで、属性の絞り込みには等号「=」を使っているが、この等号にはバリエーションがある。
参考：jQueryリファレンス Selectors：セレクタ
あくまで値を文字列として扱う前提。
=：等しい
^=：～で始まる
$=：～で終わる
*=：～を含む
以上の方法で絞りこめるようにするために、PHPなどでHTMLを出力する時は、絞り込みたい要素に属性値をたくさんつけておくとよい。
そうすると、複数の属性値の組み合わせで、柔軟に要素の絞り込みができる。
<div id=”id_name” attribute1=”val1″ attribute2=”val2″>
here goes some html
</div>
確実にページ内の特定の部分に存在するclassやidだけを絞り込みたい場合は、その部分全体を、あらかじめclassやidで囲んでおく。
<div class=”container1″>
<div id=”id_name” attribute1=”val1″ attribute2=”val2″>
here goes some html
</div>
</div>
その上でセレクタで絞り込むとよい。
上記の要素は以下のセレクタでピンポイントで絞りこめる。
$(“.container1 #id_name[attribute1=’val1′][attribute2=’val2′]”)
セレクタで絞り込んだ要素だけを表示したい場合は、全要素をいったん非表示にしてから、絞り込んだ要素だけを表示する。
非表示にする：スタイルシートのdisplayをnoneにする。
表示する：スタイルシートのdisplayをblockにする。
// いったん特定のクラスの全要素を非表示にしてから…
$(“.container1 .class_name”).css(“display”, “none”);
// 絞り込んだ要素だけを表示する
$(“.container1 .class_name[attribute1=’val1′][attribute2=’val2′]”).css(“display”, “block”);
以上のような要素の絞り込みと、表示・非常時の切り替えを、selectタグで何かの値を選択したときに実行したいとする。
ページ全体のいずれかの要素のクリックや選択などのイベントを拾うには、以下のように記述すればいい。
$(function() {
……
});
名前のない関数は、最初は非常に気持ち悪いが、慣れればよい。
例えばidがselect1というselectタグがあったとする。
<select id=”select1″>
<option value=”val1″>選択肢1</option&g;
<option value=”val2″>選択肢2</option&g;
</select>
このselectタグの選択値が変更されたときの処理は以下のように書く。
$(function() {
$(“#select1”).change(function() {
……
});
});
$(“#select1″)で、そのページの中でidがselect1である要素に絞りこめる。
選択値が変更されたときの処理を書きたい場合は、その要素のchange()という関数を呼び出す。
具体的にどういう処理をしたいかは、change()関数の中に、また名前のない関数function() { …… } を書いて …… の部分に記述する。
……の部分には、ふつうにJavaScriptやjQueryで書けるロジックは何でも書ける。
……の部分で、その処理のきっかけになった <select id=”select1”> 自体を参照したい場合は $(this) と書く。「自分自身」の意味だと思えばいい。
選択した値を読み取りたい場合は $(this).val(); と書けばいい。
ちなみに、デバッグしながらコードを書きたい場合は、console.log(～); の「～」の部分に、その時点の値を確認したい変数を書けばいい。
console.log(); で書き出したログは、たとえばGoogle Chromeなら[Ctrl]+[Shift]+[i]キーを押して、[Console]というタブを選べば、確認できる。
$(function() {
$(“#select1”).change(function() {
console.log($(this).val());
});
});
このように書いておいて、該当のページでselectタグで例えば「選択肢2」という項目を選択すると、その瞬間、以下のログが書き出される。
val2
ここまでにやったことを組み合せると、attribute1という属性が、selectタグで選択した値と同じである要素だけを表示する、といったことができる。
$(function() {
$(“#select1”).change(function() {
var selected_val = $(this).val();
$(“#id_name”).css(“display”, “none”);
$(“#id_name[attribute1='” + selected_val + “‘]”).css(“display”, “block”);
});
});
selectで選択した値を、分かりやすくするためにいったん selected_val という変数に代入している。
そしてそのselected_valを使ってセレクタ文字列を組み立てる。
例えばそのページの中でidが id_name である要素すべてを、まずいったん非表示にする。
$(“#id_name”).css(“display”, “none”);
その後、そのページの中でidが id_name であり、かつ、attribute1が選択した値である要素だけは表示させる。
$(“#id_name[attribute1='” + selected_val + “‘]”).css(“display”, “block”);
セレクタの文字列の組み立て部分は、以下のようなしくみ。
選択した値が「val1」だったとすると
“#id_name[attribute1='” + selected_val + “‘]”
この文字列の計算結果は
“#id_name[attribute1=’val1’]”
となる。つまり、idがid_nameである要素のうち、attribute1がval1のものという意味になり、下記のidがid_nameである要素がいったんすべて非表示になり、いちばん上の要素だけが表示される。
<div id=”id_name” attribute1=”val1″>表示したい要素の1つ目
</div>
<div id=”id_name” attribute1=”val2″>表示したい要素の2つ目
</div>
<div id=”id_name” attribute1=”val3″>表示したい要素の3つ目
</div>
