.val() はとても解りやすい便利なメソッドです。ちなにみに alert( $('#a1').val ) とすると .val メソッドのソースの内容が表示されます。
.val('値') もその逆ですから普通に使えてしまいますが、.val( 関数 ) はちょっと解りづらいです。関数が返した値で、オブジェクトの値を書き換えるのですが、その関数内では対象となったオブジェクトのインデックスと値が順次渡される仕様となっています。jQuery のドキュメントでは、無名関数で書かれていますが、以下のサンプルでは checkVal 関数として独立して定義して使用しています。関数内ではその時対象となるオブジェクトも参照できるので、使い方としては対象となるオブジェクトの値をキー(id)に対して明細を全て表示するような処理で使えます。( 明細は、XMLHttpRequest 等で取得 )
<script>
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<input class="action1" type="text" id="a1" value="lightbox" />
<input class="action1" type="text" id="a2" value="lightbox" />
<script type="text/javascript">
// val の引数として与える関数のサンプル
// もちろん無名関数でも良い
function checkVal( index, value ) {
console.log(this.id);
alert( index + "|" + value + " : これは入力フィールドのインデックスと現在の値です" );
return( '変更' );
}
function action1() {
// 現在の値の取得
var x = $('#a1').val();
// 表示
alert("この値は、id=a1 の入力フィールドの現在の値です => "+x);
// 現在の値を変更
$('#a1').val('123');
// 内容を変更する関数を呼び出す
// input を両方変更するように、
// index が変化しながら全て呼び出される
$('input.action1').val(checkVal);
}
</script>
<input type="button" value="実行" onclick='action1();'>
もう少し具体的なサンプル jQuery の .val(関数) を使用した、社員コードに対する明細データの表示サンプル
|
|
【メソッド:jQueryの最新記事】
- jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する
- jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う
- jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")
- jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます
- JavaScript と jQuery : 位置関係から id の無い要素の参照を取得
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
