妙用jQuery的val()方法
[ 2016/11/12, JavaScript , 3077阅, 0评 ]

val()方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数,则返回被选元素的当前值。

语法:$(selector).val(value)

常用方式

<input type="text" id="email" value="请输入邮箱"/>
<input type="text" id="qq" value="请输入qq号"/>
<input type="text" id="nickname" value="王"/>
<input type="button" id="tijiao" value="提交"/>
<script>
//常用的几种情况
$("#tijiao").click(function(){
	alert($("#email").val());//取值
	$("#qq").val("123456789");//赋值
	//在默认值的基础上增加值
    $("#nickname").val(function(n,c){
		return c + " 尼玛";
    });
})
//当获得焦点时,清空文本框中的内容
$("#email").focus(function(){
	var aaa = $(this).val();
	//this.defaultValue就是当前文本框的默认值
	if(aaa==this.defaultValue){
		$(this).val("");
	}
});
</script>

val()还能使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的项被选中,这在表单操作中经常会用到

<input type="button" value="select单选"/>
<input type="button" value="select多选"/>
<input type="button" value="checkbox多选"/>
<input type="button" value="radio单选"/>
<h3>select单选</h3>
<select id="single">
  <option value="1">选择1号</option>
  <option value="2">选择2号</option>
  <option value="3">选择3号</option>
  <option value="4">选择4号</option>
  <option value="5">选择5号</option>
</select>
<h3>select多选</h3>
<select id="multiple" multiple="multiple" style="height:120px;">
  <option value="1">选择1号</option>
  <option value="2">选择2号</option>
  <option value="3">选择3号</option>
  <option value="4">选择4号</option>
  <option value="5">选择5号</option>
</select>
<h3>checkbox多选</h3>
<input type="checkbox" value="check1"/>多选1
<input type="checkbox" value="check2"/>多选2
<input type="checkbox" value="check3"/>多选3
<input type="checkbox" value="check4"/>多选4
<h3>radio单选</h3>
<input type="radio" name="sex" value="男"/>单选1
<input type="radio" name="sex" value="女"/>单选2
<input type="radio" name="sex" value="人妖"/>单选3
<script>
$(function(){
	//设置select单选
	$("input:eq(0)").click(function(){
		$("#single").val("3");
		var options=$('#single option:selected')
		//alert(options.val());
	});
	//设置select多选
	$("input:eq(1)").click(function(){
		$("#multiple").val(["1","3","5"]);//以数组的形式赋值
	});
	//设置checkbox多选
	$("input:eq(2)").click(function(){
		$(":checkbox").val(["check2","check3"]);//以数组的形式赋值
	});
	//设置radio单选
	$("input:eq(3)").click(function(){
		$(":radio").val(["女"]);
	});
});
</script>

有朋自远方来...评论一下呗O(∩_∩)O