jQuery屬性篇-val

.val()

獲取第一個匹配元素的當前值

.val()

這個方法不接收任何參數。

.val()方法主要是用來從表單元素中獲取值比如input,select 和textarea.在<select multiple="multiple"> 這個例子中，.val()方法返回包含每個被選擇的option的數組；如果沒有option被選中，返回null.

對於selects和checkboxes,你也以使用:selected和:checked選擇器來獲取值，比如：

$('select.foo option:selected').val();    //從下拉菜單中獲取值
$('select.foo').val();                    // 更加容易的獲取下拉菜單中的值
$('input:checkbox:checked').val();        // 從選擇的checkbox中獲取值
$('input:radio[name=bar]:checked').val(); // 從radio button中獲取值

Note:現在，在textarea元素上使用.val()時，會將從瀏覽器反饋回來的值中的回車符去除。當通過XHR技術將值發送到服務器時，回車符會被保留不會被髮送（或者被瀏覽器添加，但不在原始數據中包含這些回車符）。解決這個問題辦法是通過使用一個如下的valHook：

$.valHooks.textarea = {
    get: function( elem ) {
        return elem.value.replace( /\r?\n/g, "\r\n" );
    }
};

.val( value )

設置每個匹配的元素的value

.val(value)

.val(function(index,value))

value

類型是字符串，數組。

一個字符串文本或者一個字符串數組對應於用來設置爲selected/checked的每個匹配元素的值。

function(index,value)

類型是函數。

一個函數返回用來設置的值。this是當前的元素。接收集合中元素索引的位置和原來的值做爲參數。

這個方法典型的是使用來設置表單域的值。

.val()方法允許我們通過函數設置值。jQuery1.4中，給函數傳遞兩個參數，當前元素的索引和當前的值：

$('input:text.items').val(function( index, value ) {
  return value + ' ' + this.className;
});

這個例子是將字符串"items添加到類型爲text的input的值當中。

<script>
//從single select中獲取單一的值，從multiple select  獲取一個數組的值，並顯示他們的值。
 function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("<b>Single:</b> " + 
                  singleValues +
                  " <b>Multiple:</b> " + 
multipleValues.join(", "));
    }
    $("select").change(displayVals);
    displayVals();
</script>

<script>
//在input box中查找值
 $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
</script>

<script>
//設置input box的值
 $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });
</script>

<script>
//使用函數的參數來修改input box的值
 $('input').bind('blur', function() {
    $(this).val(function( i, val ) {
      return val.toUpperCase();
    });
  });
  </script>

<script>
//設置single select multiple checkbox和radio button
 $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]); 
    $("input").val(["check1","check2", "radio1" ]);
</script>