您的位置：首页 > Web前端 > JQuery
Jquery 综合练习

2012-01-12 10:15 260 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <style>
     .input{ color:Black;}
     .input1{ color:Gray;}
    </style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
      //练习1.加法计算器
      $("#btn2").click(function(){//当点击"="时执行
        var txt1=$("#txt1").val();//取出第一个值
        var txt2=$("#txt2").val();//取出第二个值
        
       $("#txt3").val(parseInt(txt1)+parseInt(txt2));//parseInet将string转换成int
      });
      //练习2:十秒钟后协议文本框下的注册按钮才能点击
      var tid2=setInterval(reg2,1000);
      var timed1=10;
      function reg2()
      {
        if(timed1>0){
          $("#reg").val(timed1+"我同意");
          timed1--;
        }else{
         $("#reg").attr("disabled","");//jquery没有封装的属性用attr()
        $("#reg").val("我同意");
        }
      }
      });
      
      //练习3.搜索框效果
      $(function(){
       $("#search").focus(function(){//当焦点在文本框里的时候
        if($("#search").val()=="请输入关键词"){
         $("#search").val("");
         $("#search").addClass("input");
         }
       });
       
       $("#search").blur(function(){
         if($("#search").val().length==0){//判断文本框是否为空用length==0
          $("#search").val("请输入关键词");
          $("#search").addClass("input1");
         }
       });
       
      });
      
      //练习4,无刷新评论
      $(function(){
      $("#btn").click(function(){
         var name=$("#name").val();
         var content=$("#content").val();
         //alert(name);
         //alert(content);
         var tr=$("<tr><td>"+name+"</td><td>"+content+"</td></tr>");
         $("#table1").append(tr);
      });
      });
      
    </script>
    
    <script type="text/javascript">
      var timed=10;//定义一个变量,javascript版
       function reg(){
       if(timed>0){
        document.getElementById("reg").value=timed+"我同意";
        timed--;
       }else{
       document.getElementById("reg").disabled="";
         document.getElementById("reg").value="我同意";
       clearInterval(tid);
       }
       }
      var tid=setInterval(reg,1000);
    </script>
</head>
<body>
<p>练习1.加法计算器</p>
<p>
<input type="text" value="" id="txt1" /><input type="button" value="+" /><input type="text" value="" id="txt2" /><input  type="button" value="=" id="btn2" /><input type="text" value="" id="txt3" />
</p>

<p>练习2.十秒钟后协议文本框下的注册按钮才能点击</p>

<input id="reg" type="button" value="我同意" disabled />

<p>练习3.练习：搜索框效果。焦点放入控件，如果文本框中的值是“请输入关键词”</p>
<p>，那么将文本清空，并且颜色设置为黑色。如果焦点离开控件，</p>
<p>如果文本框中是空值，那么将文本框填充为“请输入关键词”，颜色设置为灰色（Gray）。颜色定义为class样式。</p>

<input type="text" value="请输入关键词" id="search" /><input type="button" value="搜索" id="btn3" />

<p>练习4.无刷新评论</p>
<table width="200" height="100" id="table1">
<tr><td>姓名</td><td>内容</td></tr>
</table>
<input type="text" id="name" value="玉米"><br />
<textarea id="content"></textarea><br />
<input  type="button" value="评论" id="btn"/>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航