【初級編5】jQuery 必須事項「要素変更」の基本理解

javascript

前回記事ではイベント(event)について説明いたしました。

jQueryイベント基本理解

イベントではあるセレクタ(selector/要素/element)に対して、クリック・ダブルクリック、マウスを乗せたらなど様々なイベント時に起きるための設定を行います。
イベントをセレクタに設定することをイベントトリガーまたは発火処理などと言います。

今回の「要素変更」はイベント後に「何をするか」の基本理解を説明していきたいと思います。

jQuery 要素変更とは

あるセレクタに対して要素変更を行いたいという場合という事前定義で。
メール送信フォームの送信ボタンを押下したら確認画面を出すなどの処理を行うことがあると思います。

そう行ったときにもjQuery(javascript)を活用させることが可能です。

<html> <head>
</head>
<body>
<form action="./" method="get">
お名前:<input type="text" name="family_name" id="family_name" />
<button type="submit" id="confirm">送信</button>
</form>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$('#confirm').on("click", function(){
  var m = $('#family_name');
  var a = window.confirm('['+ m.val() + ']の内容で送信していいですか?');
  if(a === false){
     alert('キャンセルしました');
     m.css("border", "red 2px solid");
  }
  return false; //「はい」を押しても送信を止めています。
});
</script>
</body>
</html>

上記を 20190630_01.html などで保存して試してみてください。

送信確認
キャンセル時

ブラウザでは上記のような確認画面が出るようになります。
(ブラウザによって表示が異なります)

今回のコード解説

コード解説
$('#confirm').on("click", function(){ //IDがconfirmをclickしたとき
  var m = $('#family_name'); // テキストボックスの内容を取り出す
  var a = window.confirm('['+ m.val() + ']の内容で送信していいですか?'); // 確認画面の作成
  if(a === false){ // キャンセルボタンを押されたとき
     alert('キャンセルしました'); //キャンセルのアラート
     m.css("border", "red 2px solid"); // テキストボックスに赤枠をつける
  }
  return false; //「はい」を押しても送信を止めています。
});

大まかな振る舞いとしては以下の通りです。

要素変更
  • あるセレクタに対して「今回は#confirm及び#family_name対象」
  • イベントフック処理「今回は#confirmにclickイベント」
  • キャンセルされた場合に「#family_name」の枠線を赤くする

セレクタの指定〜イベントの取り付け処理〜要素の変更の一連の流れを簡単に詰め込んだコードとなります。
今回は簡単な例ではありましたが、メールフォーム・掲示板などクライアントサイドスクリプトによってチェックできるものは、jQueryなどを利用して使う場面が多々あります。

他にもjQueryのプラグインを使えば、datepicker と行ったカレンダーを表示することやボタンを押すと擬似小画面をだすモーダルなどユーザー側の利便性を考えたWEBページの作成ができるようになります。

ちなみにconfirmは「確認」という意味です。

まとめ

前回記事では「セレクタ」「イベント」を覚えましたが、本記事の3つめ「要素の変更」を覚えることにより、一通りのjQueryのイメージがついたと思います。
※イメージがつかなかった場合は記事が悪いはず。。。

jQuery必要知識
  • セレクタ
  • イベント
  • 要素の変更

ひとまず全行程終わりましたのでjQuery初期編は完結とします。
次回から応用編で何かしら記事を書いていきたいと思います。

Ads オススメの勉強サイト

米国シリコンバレー発祥、世界最大級のオンライン学習プラットフォーム!

最短で技術を身に付けたい場合は有料ではありますが、実績のあるUdemyがオススメです!

コメント

タイトルとURLをコピーしました