Jquery中的控制DOM对象

来源：互联网发布：知乎分享到朋友圈编辑：程序博客网时间：2024/06/07 01:59

<head>
    <title>控制DOM对象</title>
    <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 btnClick() {
            //获取文本框的值
            var oTxtValue = document.getElementById('Text1').value;
            //获取单选框按钮值
            var oRdoValue = (Radio1.checked) ? '男' : '女';
            //获取复选框按钮值
            var oChkValue = (Checkbox1.checked) ? '已婚' : '未婚';
            //显示提示文本元素
            document.getElementById('divTip').style.display = 'block';
            //设置文本元素的内容
            document.getElementById('divTip').innerHTML = oTxtValue + '<br/>' + oRdoValue + '<br/>' + oChkValue;
        }
    </script>
</head>
<body>
    <div class="divFrame">
        <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="Button1" type="button" value="提交" onclick="btnClick()" /></div>
        </div>
    </div>
    <div id="divTip" class="divTip">
    </div>
</body>