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>