jQuery使用之（四）处理页面的表单元素

1.获取表单元素的值。
直接调用val()方法时可以获取选择器的 中的第一个元素的value值。例如：

$("[name=radioGroup]:checked").val;

以上代码直接获取属性为radioGroup的表单元素中被选中的value值，十分便捷。对于某些表单元素，例如<option><button>没有value值将获取其显示的文本值。
如果选择器中的第一个表单元素是多选的（例如下拉菜单），val()将返回由选中项value值组成的数组

http://www.cnblogs.com/ahthw/p/4221608.html使用过DOM的方式获取了单选和多选情况下的选值，相比jQuery，代码十分长。使用val()可以直接获取表单的元素值，不用考虑下拉菜单是单选还是多选。

<script type="text/javascript">            function displayVals() {                //直接获取选中项的value值                var singleValues = $("#constellation1").val();                var multipleValues = $("#constellation2").val() || []; //因为存在不选的情况                $("span").html("<b>Single:</b> " + singleValues + "<br><b>Multiple:</b> " + multipleValues.join(", "));            }            $(function() {                //当修改选中项时调用                $("select").change(displayVals);                displayVals();            });        </script>        <select id="constellation1">            <option value="Aries">白羊</option>            <option value="Taurus">金牛</option>            <option value="Gemini">双子</option>            <option value="Cancer">巨蟹</option>            <option value="Leo">狮子</option>            <option value="Virgo">处女</option>            <option value="Libra">天秤</option>            <option value="Scorpio">天蝎</option>            <option value="Sagittarius">射手</option>            <option value="Capricorn">摩羯</option>            <option value="Aquarius">水瓶</option>            <option value="Pisces">双鱼</option>        </select>        <select id="constellation2" multiple="multiple" style="height:120px;">            <option value="Aries">白羊</option>            <option value="Taurus">金牛</option>            <option value="Gemini">双子</option>            <option value="Cancer">巨蟹</option>            <option value="Leo">狮子</option>            <option value="Virgo">处女</option>            <option value="Libra">天秤</option>            <option value="Scorpio">天蝎</option>            <option value="Sagittarius">射手</option>            <option value="Capricorn">摩羯</option>            <option value="Aquarius">水瓶</option>            <option value="Pisces">双鱼</option>        </select>        <span></span>

以上代码直接使用val()获取了select的值，jQuery方式大大的缩短了代码的长度。

 2.设置表单元素的值。

与attr()和css()一样，val()也可以设置value的值，使用方法也大同小异。

    <script type="text/javascript">            $(function() {                $("input[type=button]").click(function() {                    var sValue = $(this).val(); //先获取按钮的value值                    $("input[type=text]").val(sValue); //赋给文本框                });            });        </script>        <p>            <input type="button" value="Feed">            <input type="button" value="the">            <input type="button" value="Input">        </p>        <p>            <input type="text" value="click a button">        </p>

以上代码使用到了两次val()方法，一次是获取button的value值，另一次是将获取的文本赋值给input文本框里。