jquery实现单击提交后获得数据_Jquery教程

导读：引入jQuery库，通过jQuery中的方法获取元素的值，并将获取的数据显示出来。其修改后的JavaScript代码如下所示：<!DOCTYPE html><html><hea

引入jQuery库，通过jQuery中的方法获取元素的值，并将获取的数据显示出来。其修改后的

JavaScript代码如下所示：

<!DOCTYPE html>

<html>

<head>

<title>控制DOM对象</title>

.iframe{ border:solid 1px #888;font-size:13px;}

.title{ padding:6px;background-color:#EEE;}

.content{ padding:8px;font-size:12px;}

.tip{ background-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>

script language="javascript" type="text/javascript"

src="Jscript/jquery-1.8.2.min.js"></script>

$(function(){

$("#btnSubmit").click(function(){

//获取文本框的值

var oTxtValue=$("#Text1").val();

//获取单选框按钮值

var oRdoValue=$("#Radio1").is (":checked")?"男":"女";

//获取复选框按钮值

var oChkValue=$("#Checkbox1").is (":checked")?"已婚":"未婚";

//显示提示文本元素和内容

$("#Tip").css("display","block").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue);

})

</script>

</head>

<body>

<div class="title">请输入如下信息</div>

姓名：<input id="Text1" type="text" class="txt"/><br />

性别：<input id="Radio1" name="rdoSex" type="radio" value="男" />男

婚否：<input id="Checkbox1" type="checkbox" /><br /><br />

<input id="btnSubmit" type="button" value="提交" class="btn"

onclick="btn_Click();" /><br /><br />

</div>

</div>

</body>

</html>

jquery实现单击提交后获得数据