【怖くないJavaScript + jQuery】実際にちょっと書いてみればきっと怖くない。

  • はてブ

おはようございます。渋谷にはまだ月曜日の雪が残っています。
東京で雪が降ることは滅多にないので珍しいですね。皆様如何お過ごしでしょうか。

私はというもの、連休の中日の日曜日にサバゲーに誘われはるばる千葉まで行って参りました。
初サバゲーだったのですが、もうすごいですね、ドキドキして楽しかったです。まだ両足が筋肉痛です。

こんな中を物陰に隠れながら銃持って撃ち合い…

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>

次に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>

これで準備は完了です。

Step01:idで取得

以下のコードをmy_tab.jsに書き込んで行きましょう。Dwなどで新規のjsファイルを作ってコピペするだけでもOK。
$(function (){
$(".button").click(function() {
$("#p01").css("color","#FF0000");
});
});

【解説】buttonという名前のclassがクリックされた際(今回はaタグ)、#p01color:#FF0000;する。
idを取得する時は、”#id名”と行った形にします。idの前に#をつけます。この辺はCSSと同じ感覚ですね。

デモ01


ここをクリック

11111111

22222222

33333333

44444444

55555555


他のパターンも見ていってみましょう。今#p01になっている箇所を変更していきます。



Step02:classで取得

以下のコードをmy_tab.jsに書き込んで上書き保存しましょう。Step01のコードは消してしまいます。

$(function (){
$(".button").click(function() {
$(".p02").css("color","#FF0000");
});
});

【解説】buttonという名前のclassがクリックされた際(今回はaタグ)、.p02color:#FF0000;する。
classを取得する時は、”.class名”と行った形にします。クラス名の前に.をつけます。

デモ02


ここをクリック

11111111

22222222

33333333

44444444

55555555




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


ここをクリック

11111111

22222222

33333333

44444444

55555555


Step04:一番始めの要素を取得


$(function (){
$(".button").click(function() {
$("p:first").css("color","#FF0000");
});
});

【解説】buttonという名前のclassがクリックされた際(今回はaタグ)、一番初めのpタグをcolor:#FF0000;する。
:first」をつけます。半角スペースは不要です。ちなみに、一番最後の要素を取得したい時は、「:last」とします。

デモ04


ここをクリック

11111111

22222222

33333333

44444444

55555555


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


ここをクリック

11111111

22222222

33333333

44444444

55555555


Step06:偶数番号、奇数番号の要素を取得


$(function (){
$(".button").click(function() {
$("p:even").css("color","#FF0000");
});
});

【解説】buttonという名前のclassがクリックされた際(今回はaタグ)、偶数番目(0つめ2つめ4つめ)のpタグをcolor:#FF0000;する。
タグに「:even」をつけます。奇数番号を取得する場合は「:odd」とします。

デモ06


ここをクリック

11111111

22222222

33333333

44444444

55555555


Step07:複数指定したい


$(function (){
$(".button").click(function() {
$("p:eq(3),p:first").css("color","#FF0000");
});
});

【解説】buttonという名前のclassがクリックされた際(今回はaタグ)、3(4)番目のpタグと先頭のpタグをcolor:#FF0000;する。
それぞれ指定の間にカンマを打つと複数指定できます。「"要素,要素,要素,要素"」

デモ07


ここをクリック

11111111

22222222

33333333

44444444

55555555


あとがき

さて、初歩の初歩ですが、こんな感じです。いかがだったでしょうか。
デザイナさんにとってjsとか脅威だったりするんですが、理解できれば結構楽しいですよ。
実際に動いてみるとちょっと嬉しくなりますよね。私も日々精進です!
またステップアップした内容を書こうかと思います。

それでは、今日はこの辺で。

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ