changeとは
- ここで説明する change とは次の語句からなるjQueryのメソッドです。
- change
- 読み: チェンジ
意味: 変える、変わる、取り替える
changeメソッドの概要
このメソッドは、セレクタに該当する既存要素にチェンジイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているチェンジイベントを呼び出します。
チェンジイベントは、 input 要素、 select 要素、 textarea 要素 らの入力要素の内容が変更されたときに発生します。
このイベントは、バブリングを起こしますのでセレクターが上記の要素である必要はありません。
イベントのバブリングとは子要素にバインドしているイベントの発生が親要素に伝播して、親要素にバインドしている同種イベントも同時(子要素から順次)に発生する現象のことを言います。
構文
サンプルを見る前に構文を確認しておきます。
Selector.change(Handler(EventObject));
Selector.change([EventData], Handler(EventObject));
Selector.change();
- 01: チェンジイベントが発生した時点でハンドラーが実行されます。
- 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
- 03: セレクタにバインドしているチェンジイベントを呼び出します。
サンプルコードと実行結果
ここでは、シンプルに select 要素のメニューを変更 (チェンジ) すると 子要素である option の value プロパティの値を参照して、後続する img 要素の画像ソース(src)を変更します。
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="idSelect">
<option value="omikuji-0.png">大吉</option>
<option value="omikuji-1.png">中吉</option>
<option value="omikuji-2.png">吉</option>
<option value="omikuji-3.png">小吉</option>
<option value="omikuji-4.png">末吉</option>
</select>
<br>
<img id="idImg" src="../images/omikuji-0.png" alt="おみくじの札">
<script>...</script>
</body>
サンプルコード: script
<script>
$("#idSelect").change({"ImgFolderPass":"../images/"}, function(event){
$("#idImg").attr("src", event.data.ImgFolderPass + $(this).val());
});
</script>
- 02-04: .change([EventData], Handler(EventObject){処理}) ( {"ImgFolderPass":"../images/"} の部分が構文の [EventData] にあたります。function(event) の部分が構文の Handler(EventObject) です。{処理} の部分は 03:行目のコードにあたります。
- 03: .attr("src", event.data.ImgFolderPass + $(this).val()) (img 要素の src 属性を設定しています。event.data.ImgFolderPass の部分は 02:行目の EventObject からデータを取得しています。)
