JQueryの基本の基本

#Jqueryのきほん

#####使う方法
・ダウンロードする
or
・CDNを利用してCDNからJQueryを読み込んで、使用する。ただしインターネットに繋がっていないと使えない。

#####書き方

$('#HTMLのid名')→これでDOMをとってくる

#####イベント設定
・イベント用メソッド使用
ex .click();

・onメソッド使用
対象要素.on( イベント名, セレクタ(任意), データ(任意) ,function() {処理内容} )

セレクタを選択する事で、対象要素の下にあるセレクタの部分に対してイベント設定ができる。

#####ajax
ajaxを使用する時は、

$.ajax({
送りたいurl,メソッド(基本post),データor受け取るデータタイプの指定
})
.done((data) { //ここでは成功した場合 dataとはajaxでのレスポンスで返ってきた値
//処理
}) .fail((data) {//ここでは失敗した場合
//処理
)

こちらを参考にさせていただきました。はじめてのAjax(jQuery) 2018年版

またAjaxで指定するURLに変数を埋め込む場合は、以下のように埋め込む。下の例は一覧表示されているリストから削除申請をAjaxで投げるときに使用。

$('.delete_word').on('click', function () {
    var id = $(this).data('id');
    if (confirm('Are you sure?')) {
      $.ajax({
        url: '/words/' + id, //このように埋め込む
        type: 'POST', 
        data: {
          'word_id': id,
          '_method': 'DELETE'
        }
      })
        .done((data) => {
          $('#word_' + id).fadeOut(800);
        }).fail((data) => {
          alert('通信に失敗しました');
      })
    }
  });

サーバ側で値を返したい時は以下のようにする（phpの場合）。headerでHTTpヘッダの中身を指定し返し、json_encodeで引数をjsonの形にして返すことになる。

else {
          header("Content-Type: application/json; charset=UTF-8");
          $data = [
          'failedMsg' => 'お気に入り登録or解除に失敗しました'
          ];
          echo json_encode($data);
          exit;
      }

#####その他
JSとは同じ内容でも書き方が異なるので注意する

$('#HTMLのid名').valは、その要素の値valueを引き出す。

$('#HTMLのid名').data(data-OOのOOの部分)で、HTMLでdata-OOとして定義されている属性の中身を得る。