JQuery笔记9：JQuery 的几个案例

来源：互联网发布：被覆盖的监控数据恢复编辑：程序博客网时间：2024/06/07 11:18

案例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>