jQueryの基本(第10回)

morishita

■イベント編 #3(change, submit)

はじめに…
今回で10回目、イベント編も3回目ということで、大まかにjQueryの基本を確認した形となります。
というわけで、jQueryの基本に関する記事は今回で最終回としたいと思います！

では内容をやっていきます。
前回はイベントの2回目として、mouseoverイベントとmouseoutイベントについて確認しました。
今回はchangeイベントとsubmitイベントを見ていきます。

・$(‘要素’).change(処理) :要素(inputなど)の内容が変更されたときに処理を行う。
・$(‘要素’).submit(処理) :formの送信(submit)が実行されたときに処理を行う。

以下のコードを例に確認しましょう。

<!DOCTYPE html>
<html lang = "jp">
<head>
  <meta charset="utf-8">
  <title>jQueryの基本</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h2>jQueryの基本(第10回)</h2>
 
<form id="myform">
  <p><input type="text" name="text" id="inpt"/> <span id="changed"></span></p>
  <input type="submit" value="送信"/>
</form>
 
<!--ここからjQueryを記述-->
<script>
$('#inpt').change(function(){
    $('#changed').append("変更有");
})
 
$('#myform').submit(function(){
    alert("入力情報を送信します。");
})
</script>
 
</body>
</html>