jQuery学习笔记1-4

来源：互联网发布：资产管理公司知乎编辑：程序博客网时间：2024/05/16 01:54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>1-4jQuery的控制DOM对象</title>

<!--

【功能描述】

在页面中，用户输入姓名、性别和婚姻状况，单击“提交”按钮后，将获取到的数据信息显示在页面<div>标记中

-->

<scriptlanguage="javaScript"type="text/javascript"src="JavaScript/jquery-1.9.1.min.js"></script>

<styletype="text/css">

.dicFrame{width:260px;border:solid1px #666;

font-size:10pt}

.divTitle{background-color:#eee;padding:5px}

.divContent{padding:5px;}

.divTip{width:244px;border:solid1px #666;

padding:8px;font-size:9pt;

margin-top:5px;display:none

}

.txtCss{border:solid1px #ccc}

.divBtn{padding-top:5px}

.divBtn.btnCss{boder:solid 1px #535353;width:60px}

.divCurrColor{background-color:Red}

</style>

<scripttype="text/javascript">

//->链接式书写

$(function(){

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

varstrname=$("#Text1").val();

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

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

$("#divTip").css("display","block").html(strname+"</br>"+strSex+"</br>"+strMarry);

});

//<-

</script>

</head>

<body>

<divclass="divframe">

<divclass="divTitle">请输入如下信息</div>

<divclass="divContent">

姓名：<inputid="Text1"type="text"class="textCss"/></br>

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

<inputid="Radio2"name="rdoSex"type="radio"value="女"/>女<br/>

婚否：<inputid="Checkbox1"type="checkbox"/>

<divclass="divBtn">

<inputid="Button1"type="button"value="提交"class="btnCss"/>

</div>

<divid="divTip"class="divTip"></div>

</body>

</html>