おはようございます。渋谷にはまだ月曜日の雪が残っています。
東京で雪が降ることは滅多にないので珍しいですね。皆様如何お過ごしでしょうか。
私はというもの、連休の中日の日曜日にサバゲーに誘われはるばる千葉まで行って参りました。
初サバゲーだったのですが、もうすごいですね、ドキドキして楽しかったです。まだ両足が筋肉痛です。
こんな中を物陰に隠れながら銃持って撃ち合い…
目次
jQueryで要素を取得
さて、本日の本題です。前回はタブ前々回はアコーディオンと書いてきましたが、今回はついに簡単なコードを書いてみて、要素の取得の仕方を学んでみたいと思います。自分で作れるようになると何かと便利ですしね。クリックしたものを取得してちょっと動かす所までやります。とりあえず3つ程やってみましょう。
まず必要なファイルを読み込みます。
先に下準備を。headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は my_tab.js とします）を読み込みます。
<head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/my_tab.js" type="text/javascript"></script>
</head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/my_tab.js" type="text/javascript"></script>
</head>
次にHTMLの準備
<a class="button">ここをクリック</a>
<p id="p01">11111111</p>
<p class="p02">22222222</p>
<p><span>33333333</span></p>
<p>44444444</p>
<p>55555555</p>
<p id="p01">11111111</p>
<p class="p02">22222222</p>
<p><span>33333333</span></p>
<p>44444444</p>
<p>55555555</p>
これで準備は完了です。
Step01:idで取得
以下のコードをmy_tab.jsに書き込んで行きましょう。Dwなどで新規のjsファイルを作ってコピペするだけでもOK。
$(function (){
$(".button").click(function() {
$("#p01").css("color","#FF0000");
});
});
【解説】buttonという名前のclassがクリックされた際（今回はaタグ）、#p01をcolor:#FF0000;する。
idを取得する時は、”#id名”と行った形にします。idの前に#をつけます。この辺はCSSと同じ感覚ですね。
デモ01
他のパターンも見ていってみましょう。今#p01になっている箇所を変更していきます。
Step02:classで取得
以下のコードをmy_tab.jsに書き込んで上書き保存しましょう。Step01のコードは消してしまいます。
$(function (){
$(".button").click(function() {
$(".p02").css("color","#FF0000");
});
});
【解説】buttonという名前のclassがクリックされた際（今回はaタグ）、.p02をcolor:#FF0000;する。
classを取得する時は、”.class名”と行った形にします。クラス名の前に.をつけます。
デモ02
Step03:タグで取得
$(function (){
$(".button").click(function() {
$("p span").css("color","#FF0000");
});
});
【解説】buttonという名前のclassがクリックされた際（今回はaタグ）、pタグの中にあるspanタグをcolor:#FF0000;する。
他にも例えば、pタグだけ取得したい時は「$("p")」、pタグの中のspanタグの中のbタグ「$("p span b")」、pタグの中のclass=”red”を持ったspanタグ「$("p span.red")」、などなど色々応用が効きます。タグとタグの間は半角スペースをあけましょう。
デモ02
Step04:一番始めの要素を取得
$(function (){
$(".button").click(function() {
$("p:first").css("color","#FF0000");
});
});
【解説】buttonという名前のclassがクリックされた際（今回はaタグ）、一番初めのpタグをcolor:#FF0000;する。
「:first」をつけます。半角スペースは不要です。ちなみに、一番最後の要素を取得したい時は、「:last」とします。
デモ04
Step05:n番目の要素を取得
$(function (){
$(".button").click(function() {
$("p:eq(3)").css("color","#FF0000");
});
});
【解説】buttonという名前のclassがクリックされた際（今回はaタグ）、3番目のpタグをcolor:#FF0000;する。
タグに「:eq(3)」をつけます。()の中の文字は任意で。数え方は0から始まるので0,1,2,3と数えていきます。2つめを取得したいなら1、5つめなら4と記述します。
デモ05
Step06:偶数番号、奇数番号の要素を取得
$(function (){
$(".button").click(function() {
$("p:even").css("color","#FF0000");
});
});
【解説】buttonという名前のclassがクリックされた際（今回はaタグ）、偶数番目（0つめ2つめ4つめ）のpタグをcolor:#FF0000;する。
タグに「:even」をつけます。奇数番号を取得する場合は「:odd」とします。
デモ06
Step07:複数指定したい
$(function (){
$(".button").click(function() {
$("p:eq(3),p:first").css("color","#FF0000");
});
});
【解説】buttonという名前のclassがクリックされた際（今回はaタグ）、3（4）番目のpタグと先頭のpタグをcolor:#FF0000;する。
それぞれ指定の間にカンマを打つと複数指定できます。「"要素,要素,要素,要素"」
デモ07
あとがき
さて、初歩の初歩ですが、こんな感じです。いかがだったでしょうか。デザイナさんにとってjsとか脅威だったりするんですが、理解できれば結構楽しいですよ。
実際に動いてみるとちょっと嬉しくなりますよね。私も日々精進です！
またステップアップした内容を書こうかと思います。
それでは、今日はこの辺で。
