5-4设置和获取表单的value值
2019-03-16 本文已影响0人
大庆无疆
方法：
val()val()在select（选择框）中有特殊的作用
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<input type="radio" value="man" name="sex" id="rad" />男
<input type="checkbox" value="1" id="ck" />吃饭
<input type="submit" value="提交" id="sm" />
<textarea name="" id="tt" cols="30" rows="10" value="你一定不帅">
</textarea>
<!-- 选择框 -->
<select id="se">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------
// 方法：val();
// 页面加载事件
$(function () {
// 注册点击事件
$('#btn').click(function () {
// ---------------------------获取value值--------------------
console.log($(this).val());//显示按钮的value属性值
console.log($("#txt").val());//显示文本框的value属性值
console.log($("#rad").val());//显示的单选框的value属性值
console.log($("#ck").val());//显示的是复选框的value属性值
console.log($("#sm").val());//显示的是提交按钮的value属性值
// ---------------------------设置value值--------------------
$(this).val("这是一个按钮妞");
$("#txt").val("我是一个开心的按钮");
$("#rad").val("这是单选");
$("#ck").val("兴趣来了");
$("#sm").val("这是sm按钮");
// ---------------------通过.val()也可以获取和设置textarea的值----------------
console.log($("#tt").text());
console.log($("#tt").text('我是谁'));
//--------------------val()在select中的使用-----------------
// 记得要先给select的每一项都添加value值
$('#se').val('2'); //点击按钮的时候，就会自动选中value值为2的项
console.log($('#se').val()); //输出2
});
});
</script>
</body>
