【怖くない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とか脅威だったりするんですが、理解できれば結構楽しいですよ。
実際に動いてみるとちょっと嬉しくなりますよね。私も日々精進です!
またステップアップした内容を書こうかと思います。

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

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

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

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

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。