jQuery使用（三）：DOM操作之val()方法操作表单元素value值

操作表单元素属性value的值

<form action="./" method='GET'>
    <h3 >选择你喜欢的明星</h3>
    <select name="star">
        <option value="s">詹姆斯</option>
        <option value="a">库果</option>
        <option value="b">奥拉迪波</option>
    </select>
    <h3>一句简单介绍你喜欢的明星</h3>
    <input type="text" name="easy" value="cst">
    <h3></h3>
    三分准：<input type="checkbox" name="special" value="three">
    组织好：<input type="checkbox" name="special" value="org">
    突破强：<input type="checkbox" name="special" value="strong">
    <h3>具体描述该明星的技术特点</h3>
    <textarea name="des" id="" cols="30"></textarea>
    <input type="submit" value="login">
</form>

.val()--获取表单相关元素的val值（当jQuery对象是DOM集合时，返回的只有第一个元素的value的值，与html()方法类似）;

console.log( $('input[type="checkbox"]').val() );//three

.serialize()--获取form表单所有数据，返回字符串拼接形式；.serializeArray()--获取form表单所有数据，返回json格式的数据集合。

console.log( $('form').serialize() );
console.log( $('form').serializeArray() );

val('设置value值')--给指定的元素的value属性赋值；赋值方式可以是直接传入值；也可以是一个方法，value值以方法的返回值来设置，方法可以有两个参数（DOM下标,对应的value值）。

$('input[type="checkbox"]').eq(0).val('zhun');
$('input[type="checkbox"]').val(function(index,oldValue){
    return oldValue + index;
});

需要注意的一点点：

val也可以对非表单元素添加value的值；
input类型是text的文本框被val修改值时，页面渲染会发生显性变化，但是控制台不会发生映射关系，这不用当心，value值已经被正确赋值了。

 

转载于:https://www.cnblogs.com/ZheOneAndOnly/p/10329422.html