
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.09.13
jQuery の val メソッドを使用すると、HTML 要素の value 値を取得したり value 値を新たに設定したりすることができます。
今回は、jQuery の val メソッドの使用方法について紹介します。
1.val メソッド
2.val メソッドで value 値を取得
3.val メソッドで value 値を設定
val メソッドは、要素の value 属性の値を取得したり 設定したりすることができるメソッドです。
val メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).val( );
$(セレクタ).val( value );
$(セレクタ).val( function( index, value ) );
引数無しの「 .val( ) 」は、value 値を取得する際に使用し、value 値を設定する場合は 引数に設定値を記述します。
val メソッドの引数の内容は、それぞれ以下の通りです。
.val( value )
value 設定する値を指定
配列で値を渡すと selected や checked が選択状態となる
.val( function( index, value ) )
function ( index, value ) 設定する値を 関数の戻り値として指定
index : 要素の番号
value : 元の値( 変更前の値 )
val メソッドを使用して、ラジオボタンの value 属性の値を取得してボタンの右側に表示します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").on("click", function() { // 表示しない方を初期化 $("#out2").text(""); // value 値を取得して表示 $("#out1").text($("#rd1").val()); }); $("#btn2").on("click", function() { // 表示しない方を初期化 $("#out1").text(""); // value 値を取得して表示 $("#out2").text($("#rd2").val()); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <div style="display:inline-flex; align-items:center;"> <input type="radio" name="wk_rd" id="rd1" value="M">男性 <input type="button" id="btn1" value="value 値表示"> <div id="out1"></div> </div><br> <div style="display:inline-flex; align-items:center;"> <input type="radio" name="wk_rd" id="rd2" value="F">女性 <input type="button" id="btn2" value="value 値表示"> <div id="out2"></div> </div> <div style="border: thin solid; padding: 10px;"> ラジオボタンのソースコード <input type="radio" name="wk_rd" id="rd1" value="M">男性 <input type="radio" name="wk_rd" id="rd2" value="F">女性 </div> </div>
val メソッドで value 値を取得しているのは「 $(“#rd1”).val() 」と「 $(“#rd2”).val() 」の部分です。
id 名で要素を特定して val メソッドを記述するだけで value 値を取得できるので、大変便利です。
val メソッドを使用して、ボタンの value 値( 表示されるテキスト )を設定します。
入力欄に 設定するテキストを入力して ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn3").on("click", function() { // value 値を設定 $("#btn3").val($("#in1").val()); }); }); //--> </script> <div style="background-color : #CCC; padding:20px;"> <input type="text" id="in1" value=""> <input type="button" id="btn3" value="初期値"> </div>
val メソッドで value 値を設定しているのは「 $(“#btn3”).val( 設定する値 ) 」の部分です。
入力値を value 値に設定しているので、val メソッドの引数にも「 $(“#in1”).val() 」として val メソッドを使用しています。
このように、val メソッドを使用すると 簡単に入力値を活用することができます。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.