【学習45日】jQueryの実践【応用7日】

■submit

閲覧者がフォームから「送信」を押す

というイベントは、submit。

（submit は、フォームが送信された時に呼ばれるイベント）

$(function() {
  $("form").on("submit", function() {
    console.log("送信ボタンが押されました");
  });
});

■イベントオブジェクト （e）

クリック、マウスオーバーなどの

イベントについての情報を持っているオブジェクト

 console.log(e);　
→イベントの情報がコンソールに出力される

■デフォルトのイベントを消す

    e.preventDefault();

prevent→防ぐ　＋　Default→デフォルト　

＝　prevntDefault( ) デフォルトイベントを消す

主語のe（イベントオブジェクト）には、イベントの発生元の要素や押されたキーの情報などが入っている。→要素のイベントをキャンセルする。

■find( )

Ruby の find()【１つしか取得できない】

jQueryの find( )【合致するものがあれば何個でも取得する】

    let checkboxes = $(this).find('input[type="checkbox"]');

→thisには今、フォームクラスの塊が入っている。4つのcheckボックスが入っているので、その属性値checkboxを検索値にして取得している。

■prop()

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

■attr()

要素の値（バリュー）を取得するメソッド

■each()

引数に要素番号を指定することが可能

$(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); }); });

4行目

thisの中に入っているもののうち

checkboxの属性値をもっているもの

取得し、関数に入れる

5行目

関数の中に複数入っている状態（配列？）。

そのオブジェクトに対してeachを動かす。

6行目

新しい関数に、配列1つ1つの要素を入れていき

7・8行目

今の変数に入っている値に、checkedというプロパティがあれば

今の変数に入っている値から値を取り出し、outputという変数に入れる