jQuery操作DOM对象,很简单但是做个例子加深印象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制DOM对象</title>
<style type="text/css">
*{ margin:0 ; padding:0;}
.iframe{border:solid 1px #888; font-size:13px;}
.title{padding:6px ; background-color:#EEE;}
.content{padding:8px; font-size:12px;}
.tip{ backgroud-color:#EEE; display:none; font-size:12px; padding:8px;}
.txt{ border:solid 1px #888;}
.btn{ border:solid 1px #888; width:60px;}
.w260{ width:260px;}
</style>
</head>
<body>
<div class="iframe">
<div class="title">请输入如下信息:</div>
<div class="content">
姓名:<input id="text" type="text" class="text"/><br />
性别:<input id="Radio1" name="rdoSex" type="radio" value="男" />男 <input id="Radio2" name="rdoSex" type="radio" value="女" />女<br />
婚否:<input id="Checkbox1" name="checkbox" type="checkbox"/><br />
<input id="btnSubmit" type="button" value="提交" class="btn" οnclick="btn_Click();"/><br /><br />
</div>
<div class="tip" id="tip"></div>
</div>
</body>
<script type="text/javascript">
function btn_Click(){
//获取文本框的值
var oTxtValue = document.getElementById('text').value;
var oRadioValue = (Radio1.checked)?"男":"女";
var oCheckvalue = (Checkbox1.checked)?"已婚":"未婚";
document.getElementById("tip").style.display = "block";
document.getElementById("tip").innerHTML = oTxtValue + "<br>" +
oRadioValue + "<br>" + oCheckvalue;
}
</script>
</html>