你的位置:首页 > Java教程

[Java教程]jQuery3访问并且控制dom对象


  

3.控制dom对象

  下面是代码示例(本人费了九牛二虎之力调试,从c++跳到Java 路也不是那么好走),特别注意的地方:代码中所有的字符包括符号必须是英文的,jsp、JavaScript、css大小写不一致,不区分大小写的鄙人知道的也就只有sql了;另外需要注意的地方,jQuery调用dom对象的时候用到$(#对象的id) 千万别把#号忘掉。

  提供一个比较好的调试方法,想JavaScript中加入alert(...)来断定程序可以抵达什么地方,病灶在哪里,不管C++还是Java调试方法都是一样的。

<!DOCTYPE html>
<html>
<head>
<title>Accordion Menus</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 language="javascript" src="jquery-2.1.1.js"> </script>
    <script language = "JavaScript" type="text/javascript">
   $(function(){
       $("#button1").click(function(){
           //获取文本框的值
           var oTxVaule=$("#Text1").val();
           //获取单选框按钮值
 var oRdoValue=$("#Radio1").is(":checked")?"男":"女";
           //获取复选框按钮的值
           var oChkValue=$("#Checkbox1").is(":checked")?"已婚":"未婚";

           //显示提示文本元素和内容
           $("#divTip").css("display","block").html(oTxVaule+"<br>"+oRdoValue+"<br>"
                   +oChkValue);    
alert(oChkValue);
        });
       
   });
    </script>

</head>



<body>
    <div >

      // 引入CSS的divTitle类
        <div >请输入如下信息</div>
        <div >

  //该文本框的id设为Text1,如果jQuery调用的时候就用$(#Text1)
        姓名:<input id="Text1" type="text" /> <br/>
        性别:<input id="Radio1" name="radoSex" type="radio" value="男" />男 <br/>
            <input id="Radio2" name="radoSex" type="radio" value="女" />女 <br/>
        婚否:<input     id="CheckBox1" type="checkbox"/>
        <div > <input id="button1" type="button" value="提交" />
            </div>
        </div>
    </div>
    
<div id="divTip" ></div>
</body>

</html>