jQuery3访问而且控制dom对象

jQuery3访问并且控制dom对象

　　 jQuery3访问而且控制dom对象

3.控制dom对象

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

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

　　$(function());它是 $(document).ready(function(){...})的简写形式意思就是页面载入后执行...的代码.是jq中最重要的一句话,基本上是必须的.所有页面载入有执行的代码都要写着里面。

　　最后补充一点：Javascript中需要在<script type="test/javascript">function btnClick(){...}</script>然后<input id="button1" type="button" value="提交" class="btnCss" onClick="btnClick();"/>；然而在使用jQuery之后就比较轻松了：$(function(){ $("#button1").click(function(){} });并且onClick="btnClick();"不用写了

<!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 class="divFrame">

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

　　//该文本框的id设为Text1,如果jQuery调用的时候就用$(#Text1)
       姓名：<input id="Text1" type="text" class="tstCss"/> <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 class="divBtn"> <input id="button1" type="button" value="提交" class="btnCss" />
           </div>
       </div>
   </div>

<div id="divTip" class="divTip"></div>
</body>

</html>
　　再次补充，这次补充完全是举一反三的结果，<script language="javascript" src="jquery-2.1.1.js"> </script>这条语句将jQuery库导入到了当前页面，我便想到能否将自己写的js单独放到一个js文件中，这样jQuery库还能否调用到？经过试验我的想法是正确的：

　　 step1：<script language="javascript" src="jquery-2.1.1.js"> </script>
　　　　　　<script type="text/javascript" src="script03.js"></script>

      step2： $(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);
        　　　　});
      　　　　 //另外的一个方法
       　　　　$("#divColor").click(function(){
         　　　　 $(this).toggleClass("divClick").html("点击后的样式");
       　　　　 });
  　　　　 });　　　具体原因我是这么认为的：通过step1，将jQuery和js放入到了同一个页面中了，它们与其他jsp信息融合成了一个整体，当然js可以调用jQuery库了。

jQuery3访问而且控制dom对象

相关推荐