Jquery控制DOM对象

最新推荐文章于 2024-02-28 16:51:01 发布

yecats

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量223

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/yecats/article/details/51519985

版权

JQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Jquery控制DOM对象</title>
  <script src="jquery-1.8.0.js"></script>
 </head>
 <style type="text/css">
			.divFrame{
				width:260px;
				border:solid 1px #f00;
				font-size;10pt;
			}
			.divTitle{
				background-color:#eee;
				padding:5px;
			}
			.divContent{
				padding:8px;
				font-size:9pt;				
			}
			.divTip{
				width:244px;
				border:solid 1px #666;
				padding:8px;
				font-size:9pt;
				margin-top:5px;
				display:none;
			}
			.txtCss{
				border:solid 1px #ccc;
			}
			.divBtn{
				padding-top:5px;
			}
			.divBtn .btnCss{
				border:solid 1px #535353;
				width:60px;
			}
 </style>
 
 <script type="text/javascript">
	$(function(){
		$("#btnSubmit").click(function(){
			var value1 = $("#Text1").val();
			var value2 = $("#Redio1").is(":checked")?"男":"女";
			var value3 = $("#Checkbox1").is(":checked")?"已婚":"未婚";
			$("#divTip").css("display","block").html(value1+"<br></br>"+value2+"<br></br>"+value3);
		});
	});

 </script>
 <body>
	<div class="divFrame">
		<div>请输入如下信息</div>
		<div class="divContent">
			姓名：<input id="Text1" type="text"  class="txtCss" /><br />
			性别：<input id="Redio1" name="rdoSex" type="radio" value="男" />男
			      <input id="Redio2" name="rdoSex" type="radio" value="女" />女<br />
			婚否：<input id="Checkbox1" type="checkbox" />
			<div class="divBtn">
				<input id="btnSubmit" type="button" value="提交" class="btnCss" οnclick="" />
			</div>
		</div>
	</div>
	<div id="divTip" class="divTip"></div>
 </body>
</html>