JQuery笔记9：JQuery 的几个案例
案例1：加法计算器
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#eq").click(function () {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
var num3 = parseInt(num1, 10) + parseInt(num2, 10);
$("#num3").val(num3);
});
});
</script>
</head>
<body>
<input id="num1" type="text" /> +<input id="num2" type="text" /><input id="eq" type="button" value="=" /><input id="num3" type="text" />
</body>
</html>
案例2：注册页面倒计时
attr()：在JQuary中发现找不到disabled，可以知道这个属性没有对应的方法如果在JQuary中有的属性没有封装为方法，则可以通过attr方法为这个属性设值。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var leftseconds = 10;
var timerid;
$(function () {
//在JQuary中发现找不到disabled，可以知道这个属性没有对应的方法如果在JQuary中有的属性没有封装为方法，则可以通过attr方法为这个属性设值。
$("#btnReg").attr("disabled", true);
timerid = setInterval("CountDown()",1000);
});
function CountDown () {
if (leftseconds <= 0) {
$("#btnReg").val("同意");
$("#btnReg").attr("disabled", false);
clearInterval(timerid);
return;
}
else {
leftseconds--;
$("#btnReg").val("请仔细阅读协议" + leftseconds + "秒");
}
}
</script>
</head>
<body>
<textarea cols="20">你同意啊啊啊啊啊啊啊啊啊啊啊啊啊你同意啊</textarea>
<input id="btnReg" type="button" value="同意" />
</body>
</html>
案例3：无刷新评论
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnPost").click(function () {
var title = $("#name").val();
var content = $("#content").val();
var tr = $("<tr><td>" + title + "</td><td>" + content + "</td></tr>");
$("#pinglun").append(tr);
//清空文本框
$("#name").val("");
$("#content").val("");
});
});
</script>
</head>
<body>
<table id="pinglun">
<p>欢迎评论：</p>
<tr><td>匿名</td><td>这篇文章不错啊</td></tr>
</table>
<input id="name" type="text" /><br />
<textarea id="content"></textarea><br />
<input id="btnPost" type="button" value="评论" />
</body>
</html>
案例4：校验文本框是否为空
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":text").blur(function () {
if ($(this).val().length <= 0) {
$(this).css("background", "red");
}
else {
$(this).css("background","white");
}
});
});
</script>
</head>
<body>
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Text4" type="text" />
</body>
</html>
案例5：选择球队。被悬浮行高亮显示（背景是红色），点击球队将它放到另一个的球队列表。
链式编程思想：一直“.”下去，链式编程，所有的“.”都在修饰 $("#ul1 li")，并按照“.”的顺序执行。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#ul1 li").css("cursor", "pointer").mouseover(function () {
$(this).css("background", "red");
$(this).siblings().css("background", "white");
}).click(function () { $(this).css("background", "white").appendTo("#ul2"); });
});
</script>
</head>
<body>
<ul id="ul1" style="float:left;width:30%;">
<li>中国队</li>
<li>美国队</li>
<li>韩国队</li>
<li>法国队</li>
<li>德国队</li>
</ul>
<ul id="ul2" style="float:left;width:30%;"></ul>
</body>
</html>