.val()が使われているプログラミングを見かけたのですが、どのように使うのかわからなかったので調べてみました。
.val()について
.val()はjQueryのメソッドです。
.val()を使うとvalue属性の値を取得したり設置することができます。
例えばhtmlのinputにvalueに値を設置することで表示したり、入力した値を取得したりすることができます。
※jQueryはJavaScriptを簡単に使えるように作られたJavaScriptライブラリです。
おそらくvalはvalueの略なのでvalを見かけたらすぐにvalueを連想できて覚えやすいですね。
.val()でvalue属性の値を取得する
.val()を使うとvalue属性の値を取得したり設置することができます。と言われても、どうしたら取得できるのかわからないので、取得する時のサンプルコードを作成してみました。
<form>
<!--入力画面作成-->
<input id = "a" type="text">
</form>
<!--jQueryライブラリの読み込み-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!--Javascript開始-->
<script>
$(function() {
$('#a').blur(testEvent); //フォーカスアウトしたらtestEventの実行
function testEvent() {
let result = $('#a').val(); // id = a の値を取得してresultに代入
console.log(result); //resultをコンソールに出力
}
});
</script>id = aの値を「$(‘#a’).val();」で取得しています。
blur()について何かわからない場合は別記事で詳しく書いているので、読んでみてください。
test用
言葉で説明するのは難しいので実際に上記コードを表示させてみます。
以下に値を入力するとconsoleに値が出力されます。
See the Pen jQuery val() to console by Nakamoto (@programmerlife) on CodePen.
consoleに出力した値が出力されるのが確認できると思います。
コンソールについてはこちらの記事で説明しています。
.val()でvalue属性の値を設置する
取得方法はわかったけれど設置方法はどのように行うのでしょうか、サンプルコードを作ってみます。
<form>
<p>入力<input id = "b" type="text"></p>
<p>設置<input id = "c" type="text" disabled="disabled"></p>
</form>
<!--jQueryライブラリの読み込み-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#b').blur(testEvent);
function testEvent() {
let result= $('#b').val(); b の値を取得してresultに設置
$('#c').val(result); // resultをid = cに設置
}
});
</script>「$(‘#b’).val();」でid = bの値を取得してresultに結果を代入、「$(‘#c’).val(result);」でid = c にresultを設置しています。
お気付きの方もいると思いますが、$(‘#c’).val(result);を$(‘#c’).val(“あいうえお”);とすればcにはフォーカスアウトしたタイミングで「あいうえお」が設置されます。
test用
言葉で説明するのは難しいので実際に上記コードを表示させてみます。
入力に入れた値がフォーカスアウト時に設置に設置されます。
See the Pen jQuery val() set by Nakamoto (@programmerlife) on CodePen.
.valサンプルコード 引き算
.valの仕組みを理解したところで、組み合わせたコードを作成してみました。
<form>
<p>.valで引き算</p>
<p>おこづかい<input id = "d" type="text"> - 出費<input id = "e" type="text"></p>
<p> = 残り<input id = "f" type="text" disabled="disabled"></p>
</form>
<!--jQueryライブラリの読み込み-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#d').blur(testEvent);
$('#e').blur(testEvent);
function testEvent() {
let num1 = $('#d').val(); //id = dの値を取得してnum1に代入
let num2 = $('#e').val(); //id = eの値を取得してnum2に代入
let nokori = num1 - num2; // num1-num2した結果をnokoriに代入
$('#f').val(nokori); //id = f にnokoriを設置
}
});
</script>test用
言葉で説明するのは難しいので実際に上記コードを表示させてみます。
おこづかいと出費に数値を入力しフォーカスアウトしたタイミングで残りに引き算した結果が表示されます。
See the Pen jQuery val() calculation by Nakamoto (@programmerlife) on CodePen.
数値以外の値を入力すると引き算できないのでご容赦ください。
