20. jQuery-使用val()方法设置和获取元素的值

版权声明:本文为大都督作者的原创文章,未经 大都督 允许也可以转载,但请注明出处,谢谢! 共勉! https://blog.csdn.net/qq_37335220/article/details/84932630

1. 效果图

在这里插入图片描述

2. html代码

只有亲自敲出来,你才能体会到这些方法的强大

<!DOCTYPE html>
<html>
<head>
    <title>jQuery-使用val()方法设置和获取元素的值</title>
        <style type="text/css">
           body{font-size:12px;text-align:center}
           div{padding:3px;margin:3px;width:120px;float:left}
           .txt{border:#666 1px solid;padding:3px}
    	</style>
</head>
<body>
 	<div>
         <select multiple="multiple" style="height:96px;width:85px">
                 <option value="1">Item 1</option>
                 <option value="2">Item 2</option>
                 <option value="3">Item 3</option>
                 <option value="4">Item 4</option>
                 <option value="5">Item 5</option>
                 <option value="6">Item 6</option>
         </select>
         <p id="p1"></p>
     </div>
     <div>
         <input type="text" class="txt"/>
         <p id="p2"></p>
     </div>   
      <div style="margin-top: 50px;">
     	<input type="radio" value="1">
     	<input type="radio" value="2">
     	<input type="radio" value="3">
     </div>     
<script src="../jquery.min.js"></script>
<script type="text/javascript">
	$(function(){

		//设置列表框change事件
		$("select").change(function() {
			//获取列表框所选中的全部选项的值
			var strSel = $("select").val().join(",");
			//显示列表框所选中的全部选项的值
			$("#p1").html(strSel);
		})

		//设置文本框focus事件
		$("input").change(function() {
			//获取文本框的值
			var strTxt = $("input").val();
			//显示文本框所输入的值
			$("#p2").html(strTxt);
		})

		//设置文本框focus事件
		$("input").focus(function() {
			//清空文本框的值
			$("input").val("");
		})
		
		//value值为“2”和“3”的radio被选中
		$(":radio").val(["2","3"]);
	});
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_37335220/article/details/84932630