
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.09.26
jQuery の change メソッドは、値が変更された際にイベントを発生させるメソッドです。
今回は、jQuery の change メソッドの使用方法について紹介します。
1.change メソッド
2.change メソッドの使い方
change メソッドは、値が変更された際にイベントを発生させるメソッドです。
change メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).change( );
$(セレクタ).change( handler( eventObject ) );
$(セレクタ).change( [ eventData ], handler( eventObject ) );
引数なしの「 .change( ) 」は、「 .trigger(“change”) 」の省略形です。
(trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。)
また、「 .change( handler( eventObject ) ) 」及び「 .change( [ eventData ], handler( eventObject ) ) 」は、「 on( “change”, handler ) 」の省略形です。
(on メソッドの使用方法についてはjQuery【 on 】on メソッドの使い方をご参照下さい。)
change メソッドの引数の内容は、それぞれ以下の通りです。
.change( handler( eventObject ) )
handler( eventObject ) イベント発生時に実行する処理を関数として指定
.change( [ eventData ], handler( eventObject ) )
[ eventData ] イベントハンドラに渡すデータをマップ値で指定 handler( eventObject ) イベント発生時に実行する処理を関数として指定
change メソッドを使用して、値が変わったタイミングでイベントを発生させます。
次のラジオボタンをいくつかクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("[name='wk_rd']").change(function() { $("#out1").text($(this).val()); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <div style="display:inline-flex; align-items:center;"> <input type="radio" name="wk_rd" value="おひつじ座">03/21~ 04/19 <input type="radio" name="wk_rd" value="おうし座">04/20~05/20 <input type="radio" name="wk_rd" value="ふたご座">05/21~06/21 </div><br> <div style="display:inline-flex; align-items:center;"> <input type="radio" name="wk_rd" value="かに座">06/22~07/22 <input type="radio" name="wk_rd" value="しし座">07/23~08/22 <input type="radio" name="wk_rd" value="おとめ座">08/23~09/22 </div><br> <div style="display:inline-flex; align-items:center;"> <input type="radio" name="wk_rd" value="てんびん座">09/23~10/23 <input type="radio" name="wk_rd" value="さそり座">10/24~11/22 <input type="radio" name="wk_rd" value="いて座">11/23~12/21 </div><br> <div style="display:inline-flex; align-items:center;"> <input type="radio" name="wk_rd" value="やぎ座">12/22~01/19 <input type="radio" name="wk_rd" value="みずがめ座">01/20~02/18 <input type="radio" name="wk_rd" value="うお座">02/19~03/20 </div><br> <div id="out1" style="background-color:#666; color:#FFF; padding:0px 20px;"> </div> </div>
上のサンプルでは、change メソッドの対象となるセレクタを「 $(“[name=’wk_rd’]”) 」として name 属性で指定していますが、ページ内でラジオボタンの使用が1カ所のみの場合は「 $(“input[type=’radio’]”) 」のようなセレクタの指定方法もあります。
また、上のサンプルでは ラジオボタンの value 値に 星座名を直接設定していますが、value 値には数字や英字の単純な値を設定しておいて、change メソッド内で 次のような処理を行うのが一般的です。
$("[name='wk_rd']").change(function() { if ($(this).val() == "1") $("#out1").text("おひつじ座"); });
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.