<!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>
Jquery 综合练习
最新推荐文章于 2022-09-13 08:40:48 发布