【jQuery】HTML要素のvalue属性を操作できるvalメソッドについて解説します

JavaScript

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 jQueryでHTML要素のvalue属性に対して操作ができるvalメソッドについて

  • valメソッドとは
  • valメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10
jQueryのバージョン 3.6.0

valメソッドとは

valメソッドとは、HTML要素のvalue属性に対して

  • 取得
  • 変更
  • 追加

ができるメソッドです。

valメソッドの基本的な書き方は

です。
セレクタについては、こちらの記事をご参考ください。

次の章からサンプルプログラムをまじえて

  1. valメソッドでHTML要素のvalue属性を取得
  2. valメソッドでHTML要素のvalue属性を変更
  3. valメソッドでHTML要素のvalue属性を追加

と解説します。
解説で使うサンプルプログラムのディレクトリ構造は以下のようになっています。
valメソッドを解説するディレクトリ構成

jQueryは、GoogleのCDNから読み込みます。
上記のやり方と外部のJavaScriptを読み込むやり方は以下の記事をご参考ください。

jQueryをGoogleのCDNから読み込むやり方
【jQuery】GoogleのCDNから読み込むやり方を解説します

外部のJavaScriptを読み込むやり方
HTMLで外部のJavaScriptを読み込むやり方を解説します

valメソッドでHTML要素のvalue属性を取得

valメソッドでHTML要素のvalue属性を取得について解説します。

取得するには

と書きます。

サンプルプログラムではvalメソッドでボタンのvalueを取得して、アラートで表示させます。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、【ボタン】を押します。
jQueryのvalメソッドの実行確認

指定したidがsampleButtonのvalue属性を取得できていることが確認できました。
jQueryのvalメソッドの実行確認

valメソッドでHTML要素のvalue属性を変更

valメソッドでHTML要素のvalue属性を変更について解説します。

変更するには

と書きます。

サンプルプログラムではvalメソッドでボタンのvalueを変更させます。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。
ボタンのvalueは【変更前】であることを確認しました。
【ボタン】を押します。
jQueryのvalメソッドの実行確認

指定したidがchangeButtonのvalue属性を【変更前】から【変更後】に変更できたことが確認できました。
jQueryのvalメソッドの実行確認

valメソッドでHTML要素のvalue属性を追加

valメソッドでHTML要素のvalue属性を追加について解説します。

追加は変更のときと同じく

と書きます。

サンプルプログラムではvalメソッドでボタンにvalueを追加します。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。
ボタンのvalueは指定されていないことを確認しました。
【ボタン】を押します。
jQueryのvalメソッドの実行確認

指定したidがaddButtonのvalue属性に【value追加】が追加できたことが確認できました。
jQueryのvalメソッドの実行確認

まとめ:valメソッドを使ってみよう

以上がjQueryのvalメソッドについての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました