JQuery笔记9：JQuery 的几个案例

最新推荐文章于 2021-09-13 21:15:18 发布

zhanzkw

最新推荐文章于 2021-09-13 21:15:18 发布

阅读量843

点赞数

分类专栏： JQuery 文章标签： jquery function input button html float

本文链接：https://blog.csdn.net/studyalllife/article/details/6762794

版权

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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