您的位置：首页 > Web前端 > JQuery

Jquery控制DOM对象

2016-05-27 22:02 507 查看

<!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" onclick="" />
</div>
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航