看下面的例子,控制jquery对象,表单提交后,通过jquery中的方法获取元素的值,并将获取的数据显示出来。
html代码如下:
<!doctype html> <html> <head> <title>控制jQuery对象</title> <script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script> <style type="text/css"> .divFrame{width:260px;border:solid 1px #666;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 oTxtValue=$("#Text1").val(); //获取文本框的值 var oRdoValue=$("#Radio1").is (":checked")?"男":"女"; //获取单选框按钮值 var oChkValue=$("#Checkbox1").is (":checked")?"已婚":"未婚";//获取复选框按钮值 $("#divTip").css("display","block").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue); //显示提示文本元素 }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle">请输入如下信息</div> <div class="divContent"> 姓名:<input id="Text1" type="text" class="txtCss"/><br /> 性别:<input id="Radio1" name="rdoSex" type="radio" value="男" />男 <input id="Radio2" name="rdoSex" type="radio" value="女" />女<br /> 婚否:<input id="Checkbox1" type="checkbox" /> <div class="divBtn"><input id="btnSubmit" type="button" value="提 交" class="btnCss" /></div> </div> </div> <div id="divTip" class="divTip"></div> </body> </html>