hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。　　　エンジニア目指して勉強中。

jQueryを使ってブラウザ情報を取得

プログラミング・テキスト

jQueryでタブメニュー切り替えを実装する。

JavaScriptを書き換えて、jQueryでタブメニュー切り替えを記述する。

https://tech-master.s3.amazonaws.com/uploads/curriculums//b7f41b4d90ddbb3d8e66ed89f87b8ee7.gif

事前準備

以下のコマンドをターミナルにprojectsディレクトリ上で打ち込んで、main.jsの中身を以下のように書き換える。

ターミナル
1
 
git clone https://github.com/exp-drill/js_tab.git
JavaScriptの場合
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = document.getElementsByClassName("menu_item");
  // tabsを配列に変換する
  tabsAry = Array.prototype.slice.call(tabs);

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    document.getElementsByClassName("active")[0].classList.remove("active");

    // クリックしたタブにactiveクラスを追加
    this.classList.add("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    document.getElementsByClassName("show")[0].classList.remove("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabsAry.indexOf(this);

    // クリックしたcoutentクラスにshowクラスを追加する
    document.getElementsByClassName("content")[index].classList.add("show");
  }

  // タブメニューの中でクリックイベントが発生した場所を探し、下で定義したtabSwitch関数を呼び出す
  tabsAry.forEach(function(value) {
    value.addEventListener("click", tabSwitch);
  });
});

JavaScriptだとこれだけ長いコードになるが、jQueryでもっと短いコードを実現できます。

jQueryの場合
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
$(function()  {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $('.active').removeClass("active");

    // クリックしたタブにactiveクラスを追加

    $(this).addClass("active");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabs.index(this);

    // クリックしたタブに対応するshowクラスを追加する
    $(".content").removeClass("show").eq(index).addClass("show");
  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

JavaScriptやjQueryで用意されている関数やメソッドはリファレンスを確認するのが一番確実。

jQueryの導入

jQueryを使用するには、jQueryのライブラリを読み込む必要がある。

以下のリンク先にjQueryを読み込むための記述がある。
jQueryへのリンク

https://developers.google.com/speed/libraries/#jquery

リンク先のページをスクロールしていくとjQueryという見出しと、その下に3.x snippetという記述が見つかる。3.x snippetの下にscriptタグに囲まれた記述があるのでこの記述をコピーする。

コピーしてきた記述とカリキュラムの記述が若干異なることがあるが、jQueryのバージョンが異なるだけで問題ない。

https://tech-master.s3.amazonaws.com/uploads/curriculums//aff2fa8416f9293a9a8ea20b46fbb7f3.png

コピーした記述をindex.htmlのhead内に以下のように貼り付けることでjQueryを読み込むことができる。

jQueryは他のJavaScriptファイルよりも先に読み込まないとエラーが出てしまう。そのため他の全てのJavaScriptファイルよりも上に、jQueryの読み込み先を記述する。
index.html
1
2
3
4
5
6
7
8
9
 
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="stylesheet/style.css">
  <link rel="stylesheet" type="text/js" href="js/index.js">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="./main.js"></script>
  <title>Tab Menu Sample</title>
</head>

HTML要素の取得

jQueryでのHTML/CSSの操作はJavaScriptと同じ。

  1. HTML要素を取得する
  2. 取得したHTMLを操作する

https://tech-master.s3.amazonaws.com/uploads/curriculums//4cda599b329fb79a738d4aa0fc8bd920.png

早速、menu_itemクラス要素を取得してみる。
以下の記述をmain.jsの一番下に追記。

main.js
1
2
3
 
$(function() {
  console.log($(".menu_item"));
});

main.jsに追記できたらindex.htmlをブラウザで表示して、開発ツールのコンソールを確認する。コンソールを確認すると画像のように出力される。

https://tech-master.s3.amazonaws.com/uploads/curriculums//b2cf4f0f108e31f8dd7f16f09a2694e6.png

コンソールに出力されているのは、クラス属性の値がmenu_itemのHTML要素の情報。

また、JavaScriptのdocumentにあたるのが、$（ドルマーク）。$のあとにセレクタと呼ばれるHTMLの指定方法を記述することで、HTML要素が取得できる。

HTML要素の取得
1
 
$("セレクタ")

jQueryは様々なセレクタを用意している。よく使用するセレクタは以下の4つ。

IDセレクタ

IDセレクタとは、HTML要素のid属性で指定するセレクタのこと。IDセレクタは、取得したいHTML要素のid属性の値に#（ハッシュ）を付けたものをセレクタとして利用する。

idセレクタの例
1
 
$("#idSelector") // idがidSelectorの要素を取得

クラスセレクタ

クラスセレクタとは、HTML要素のclass属性で指定するセレクタのこと。クラスセレクタは、取得したいHTML要素のclass属性の値に.（ドット）を付けたものをセレクタとして利用する。

クラスセレクタの例
1
 
$(".classSelector") // classがclassSelectorの要素をすべて取得

要素セレクタ

要素セレクタとは、h1やpのようなHTML要素を対象としたセレクタのこと。要素セレクタは取得したいHTML要素の要素名をそのままセレクタとして利用する。

要素セレクタの例
1
 
$("h1") // h1要素をすべて取得

属性セレクタ

HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できる。

属性セレクタの例
1
 
　$("input[ type='radio' ]");  // <input type="radio">のHTML要素を取得する

要するに、JavaScriptで書いていたDOM要素の取得を全て共通の$("セレクタ名") で書き換えることができる。
セレクタを指定した場合、該当するすべてのHTML要素が取得される。そのため、idセレクタは1つしか要素が取得されないが（id属性の値は被ることがないため）、他のセレクタでは複数の要素が取得される可能性がある。
main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = document.getElementsByClassName("menu_item");
  // tabsを配列に変換する
  tabsAry = Array.prototype.slice.call(tabs);

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    document.getElementsByClassName("active")[0].classList.remove("active");

    // クリックしたタブにactiveクラスを追加
    this.classList.add("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    document.getElementsByClassName("show")[0].classList.remove("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabsAry.indexOf(this);

    // クリックしたcoutentクラスにshowクラスを追加する
    document.getElementsByClassName("content")[index].classList.add("show");
  }

  // タブメニューの中でクリックイベントが発生した場所を探し、下で定義したtabSwitch関数を呼び出す
  tabsAry.forEach(function(value) {
    value.addEventListener("click", tabSwitch);
  });
});

解答

main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");
  // tabsを配列に変換する
  tabsAry = Array.prototype.slice.call(tabs);

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $(".active")[0].classList.remove("active");

    // クリックしたタブにactiveクラスを追加
    this.classList.add("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    $(".show")[0].classList.remove("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabsAry.indexOf(this);

    // クリックしたcoutentクラスにshowクラスを追加する
    $(".content")[index].classList.add("show");
  }

  // タブメニューの中でクリックイベントが発生した場所を探し、下で定義したtabSwitch関数を呼び出す
  tabsAry.forEach(function(value) {
    value.addEventListener("click", tabSwitch);
  });
});

クリックイベントの実装

クリックイベントの取得はclick()を使用する。

JavaScriptの場合、クリックイベントが発生した場所を確認するため、forEach文を使って配列の中身を一つ一つ確認していた。

JavaScriptの場合
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 
// タブのDOM要素を取得し、変数で定義
let tabs = $(".menu_item");
// tabsを配列に変換する
tabsAry = Array.prototype.slice.call(tabs);

function  tabSwitch(){
    // 省略
}

tabsAry.forEach(function(value) {
　　// タブメニューの中でクリックイベントが発生した場所を探し、下で定義したtabSwitch関数を呼び出す
　　value.addEventListener("click", tabSwitch);
});

https://tech-master.s3.amazonaws.com/uploads/curriculums//4c0feaa12c3c84dfd2796f15649c1e66.png

jQueryでclick()を使用する場合、セレクタを指定すればクリックした要素の値を簡単に取り出してくれる。
よって、配列に変換する必要もなく、以下のようにスッキリとしたコードに書き換えることができる。

jQueryの場合
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
// タブのDOM要素を取得し、変数で定義
let tabs = $(".menu_item");
// tabsを配列に変換する
tabsAry = Array.prototype.slice.call(tabs);

function  tabSwitch() {
    // 省略
}

tabs.click(tabSwitch);

これで、変数tabsに入っているmenu_itemクラスの要素は、クリックイベントが発生したらtabSwich関数を呼び出してくれる。

さらに、クリックされた要素を特定する必要がある。thisを使うことで、イベントが発生した要素を取得できる。

this

関数の中でthisを使うと、イベントの発生元となった要素を取得することができる。thisは、使用する場面によって取得できるものが異なる。このthisはJavaScriptで、非常によく使う。

https://tech-master.s3.amazonaws.com/uploads/curriculums//4332ed0c015c04052150eccad6f6e136.png

実際にクリックした要素を取得できるか確認するために、tabSwitchという関数の中にconsole.log(this);を加えてクリックした要素を取得できるか確認。

main.js
1
2
3
4
 
function tabSwitch(){
  console.log(this);
   // 処理
}

以下の画像のように、コンソール上にクリックしたaタグを取得し、出力する。

https://tech-master.s3.amazonaws.com/uploads/curriculums//81951f09d915cf3174510351b60ddfd6.gif

thisはJavaScriptの機能。そのためthisで取得した要素は、JavaScriptで使用するDOM要素になっている。
jQueryで使う場合は、$(this)と指定しないとエラーになる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//0c758832163886bd5b319acff97920d5.png

console.logはデバッグ用で書いているので、コンソール上で正しくDOMを取得できているのを確認したら、削除する。

クラスの操作をjQueryで書き換える

JavaScirptではclassListを使用して、クラスの追加や削除をしていたが、jQueryはクラスを追加・削除するメソッドが用意されている。

https://tech-master.s3.amazonaws.com/uploads/curriculums//212253c3b5ab5caae82ba15bb63bc370.png

HTMLのactiveクラスとshowクラスにどんなCSSがあたっているかは、style.cssの中身を直接確認してみる。

①~④の手順でタブ機能を実装する。

①クリックしたタブのクラス要素を削除

HTMLのactiveクラスを削除するために、jQueryで用意されているremoveClass()を使用する。

 removeClass()

JavaScriptはclassList.remove()という書き方をしていたが、jQueryはremoveClass()というメソッドが用意されている。
classList.remove()と違い、[0]と指定しなくても、最初の要素を指定してくれる。

main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");
  // tabsを配列に変換する
  tabsAry = Array.prototype.slice.call(tabs);

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $(".active").removeClass("active");

    // クリックしたタブにactiveクラスを追加

    this.classList.add("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    $(".show").removeClass("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabsAry.indexOf(this);

    // クリックしたcoutentクラスにshowクラスを追加する
    $(".content")[index].classList.add("show");
  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

②クリックしたタブにクラス要素を追加する

クリックしたタブにactiveクラスを追加する。
JavaScriptで書いた新しいクラスを追加するclassList.add()と同じように、jQueryもaddClass()というメソッドがある。

 addClass()

addClass()もremoveClass()と同様に[0]と要素を指定する必要がない。

また、thisをjQueryで使える文法に変える必要があるため、$(this)に書き換える。

main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");
  // tabsを配列に変換する
  tabsAry = Array.prototype.slice.call(tabs);

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $(".active").removeClass("active");

    // クリックしたタブにactiveクラスを追加
    $(this).addClass("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    $(".show").removeClass("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabsAry.indexOf(this);

    // クリックしたタブに対応するshowクラスを追加する
    $(".content")[index].classList.add("show");

  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

これでクラスが追加できるようになったので、挙動を確認。
22行目はJavaScriptの書き方だが、この時点では保留。

コードをさらにリファクタリングする

jQueryで書けるところを全て書き換えて見やすいコードに編集。

下記の配列とindexOf()に注目。

main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");
  // tabsを配列に変換するs
  tabsAry = Array.prototype.slice.call(tabs);

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $(".active").removeClass("active");

    // クリックしたタブにactiveクラスを追加

   $(this).addClass("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    $(".show").removeClass("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabsAry.indexOf(this);

    // クリックしたタブに対応するshowクラスを追加する
    $(".content")[index].classList.add("show");
  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

JavaScritptだけで書く場合、.menu_itemsのような集合したDOM要素のうち、何番目の要素がクリックされたかを取得するために、indexOf()を使用する必要があった。
しかし、inexOf()は配列に対してだけ使えるので、集合したDOM要素を配列に変換する必要がある。

この部分のコードを短くするために、jQueryで用意されているindex()を使用する。

index()を使ってみる

index()は配列に変換しなくても、集合したDOM要素から引数に指定したDOMと同じ要素番号を戻す。

index()の書き方
1
 
index("セレクタ")  // セレクタと一致したDOMの要素番号を戻す

index()を使用すれば配列に変換する必要がなくなるので、以下のように編集できる。

main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $(".active").removeClass("active");

    // クリックしたタブにactiveクラスを追加

    $(this).addClass("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    $(".show").removeClass("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabs.index(this);

    // クリックしたタブに対応するshowクラスを追加する
    $(".content")[index].classList.add("show");
  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

eq()を使ってみる

eq()は引数に要素番号を取り、集合したDOM要素から選択できる。

eq()の書き方
1
 
eq()  // セレクタと一致したDOMの要素番号を戻す
main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $(".active").removeClass("active");

    // クリックしたタブにactiveクラスを追加

    $(this).addClass("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    $(".show").removeClass("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabs.index(this);

    // クリックしたタブに対応するshowクラスを追加する
    $(".content").eq(index).addClass("show");
  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

これで、addClassを使ってshowクラスの追加ができるようになる。

さらに、contentクラスからshowクラスを削除する処理は、次のように
クラスを追加する処理とまとめて一行で書ける。

main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $(".active").removeClass("active");

    // クリックしたタブにactiveクラスを追加

    $(this).addClass("active");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabs.index(this);

    // クリックしたタブに対応するshowクラスを追加する
    $(".content").removeClass("show").eq(index).addClass("show");
  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

これで、③〜④の「contentクラスの全てのshowクラスを削除した後、クリックされたタブの要素番号と一致するcontentクラスの要素だけ、showクラスを追加する」という記述を一行で表すことができる。

HTMLの読み込みをjQueryで書く

HTMLの読み込みが終わってからscriptタグを読み込むために、最初に以下の記述を使った。

javascriptの場合
1
2
3
 
window.addEventListener("load", function() {
  // 処理
});

jQueryの場合以下のように書くことができる。

jQueryの場合
1
2
3
 
 $(function()  {
   // 処理
}

こちらの方が記述が簡単なので、書き換える。

main.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
$(function()  {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $(".active").removeClass("active");

    // クリックしたタブにactiveクラスを追加

    $(this).addClass("active");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabs.index(this);

    // クリックしたタブに対応するshowクラスを追加する
    $(".content").removeClass("show").eq(index).addClass("show");
  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

だいぶスッキリした記述になる。
最後に、もう一度実装する流れをおさらい。

https://tech-master.s3.amazonaws.com/uploads/curriculums//b5f95fb959b43309411197e00483906e.png

フォームの情報を取得する

JavaScriptやjQueryを使用すると、フォームで入力された文字や選択された項目を取得することができる。

チェックボックスの状態を取得する

以下のような好きな果物を選択できるアプリケーションを作る。

https://tech-master.s3.amazonaws.com/uploads/curriculums//fc7e22df2a39196125768c77b766a95d.gif

ターミナル
1
2
3
 
$ cd  #ホームディレクトリに移動
$ cd projects  # projectsディレクトリに移動
$ git clone https://github.com/we-b/jquery-practice.git -b lesson_4_3_checkbox checkbox  #ファイルをクローン

ファイル構成を確認する

クローンしたファイルの構成が以下のようになっているか確認。script.jsで作業していく。

  • checkbox
  • index.html
  • script.js

フォームが送信される時の処理

フォームが送信された時に処理が行われるようにする。送信された時に「送信ボタンが押されました」とコンソールに出力する。

フォームが送信された時というイベントにはsubmitを使用する。submitは、フォームが送信された際に呼び出されるイベント。

 submit

submitイベントは、フォームが送信される時に呼び出されるイベント。

script.js
1
2
3
4
5
 
$(function() {
  $("form").on("submit", function() {
    console.log("送信ボタンが押されました");
  });
});

コンソールに「送信ボタンが押されました」と表示されるはずだが、
すぐにコンソールから消えてしまう。
理由は、formタグのsubmitボタンが押され、ページが新しく更新されるから。
formタグのaction属性を指定していないので、同一ページにリダイレクトされている。

https://tech-master.s3.amazonaws.com/uploads/curriculums//80abcb01d02d4aead1d93239528e5cde.gif

コンソールがすぐに消えないようにするために、イベントをキャンセルして更新できないようにする。

 デフォルトのイベントをキャンセルする

preventDefault()を使ってデフォルトで備わっているイベントをキャンセルすることができる。

script.js
1
2
3
4
5
6
 
$(function() {
  $('form').on('submit', function(e) {
    console.log('送信ボタンが押されました');
    e.preventDefault();
  });
});

2行目の関数の引数にeと追記。
イベント内の関数の第一引数に自動でイベントオブジェクトが渡される。イベントオブジェクトには、イベントの発生元の要素や押されたキーの情報などが入っている。
ここで取得したイベントオブジェクトに対して、preventDefault()を使用することで要素のイベントをキャンセルすることができる。

 イベントオブジェクト

イベントオブジェクトとは、イベントに関する情報を持つオブジェクトです。targetやkeyCodeなどのプロパティを使うことでイベントの発生元の要素や押されたキーの種類などを知ることができます。

https://tech-master.s3.amazonaws.com/uploads/curriculums//5b30a70b8bcb7a3f61e1d40908946200.png

 preventDefault()

preventDefault() は、ブラウザが最初から持っているアクションをキャンセルするメソッド。

チェックされた要素を取得

$(this)を使えばformタグに対して要素を取得できるが、inputタグの属性がcheckboxをという属性だけを取得したい場合、find()を使用する。

 find("セレクタ")

Rubyで使用するfind()メソッドと用途は同じ。
しかし、1点大きな違いとして、Rubyのfind()メソッドは最初に該当する1つだけしか取得ができなかったが、
jQueryのfind()メソッドは、引数にセレクタを指定して、合致するセレクタを全て取得する。
セレクタの属性は、[]を使用する。

script.js
1
2
3
4
5
6
7
8
 
$(function() {
  $('form').on('submit', function(e) {
    let checkboxes = $(this).find('input[type="checkbox"]');

    e.preventDefault();
    alert('あなたが選んだ果物:\n' + checkboxes);
  });
});

 チェックした要素を出力しましょう（問題）

送信ボタンがクリックされたタイミングで、チェックされている果物をアラートで出す。チェックされたチェックボックスを抽出する必要がある。prop() を使うことで、チェックがされているかどうかをを確認できる。

ヒント１

each()

JavaScirptのforEachと似てるが、引数に要素番号を指定することが可能。

prop()

prop() は、要素のプロパティを取得するメソッド。

attr()

prop()と似てるが、attr()は要素の値（バリュー）を取得することができる。

これらのメソッドを組み合わせて自分の力で実装してみる。
自分で考えて書いたコードが力になる。

ヒント２

実装の流れ
①inputタグからtype属性にcheckboxがついているものを全て取得。
②取得した要素の中で、checkedがついているプロパティだけとりだす。
③checkedがついていたものはalertで出力するための変数に入れる。（出力するための空の変数を用意すると良い）

解答・解説

script.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
$(function() {
  $('form').on('submit', function(e) {
    let output = ''; 
    let checkboxes = $(this).find('input[type="checkbox"]');
    checkboxes.each(function(i, checkbox) {
      checkbox = $(checkboxes[i]);
      if (checkbox.prop('checked')) {
        output += checkbox.attr('value') + '\n';
      }
    });
    e.preventDefault();
    alert('あなたが選んだ果物:\n' + output);
  });
});
・3行目
　出力する値を文字列の変数（output）で定義。
・4行目
　チェックボックスを取得して変数checkboxesに代入。
・5行目
　each文を使い、checkboxesの中の要素を取り出す。
・7行目
　prop()を使って取り出した要素がチェックされているかどうかを確認。7行目のif文において、要素がチェックされている場合はtrueが返り値になる。trueの場合、チェックされている要素の値だけを3行目で文字列の変数として定義しておいたoutputに+=を使って追加代入することができる。
・12行目
　outputをalertで出力すれば、選択された果物を出すことができる。