JQuery练习

最新推荐文章于 2019-10-21 00:45:05 发布
原创最新推荐文章于 2019-10-21 00:45:05 发布 · 212 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#JQuery练习
Javascript、JQuery练习专栏收录该内容
69 篇文章
订阅专栏
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" id="txt1" />+<input type="text" id="txt2" /><input type="button" value="=" id="btnCompute" />
    <input type="text" id="txtResult" />
    <div style="width:300px">
        <textarea style="width:300px;height:300px;float:left">
            注册协议
            【审慎阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议。请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：

            1、与您约定免除或限制责任的条款；

            2、与您约定法律适用和管辖的条款；

            3、其他以粗体下划线标识的重要条款。

            如您对协议有任何疑问，可向平台客服咨询。

            【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。如您因平台服务与淘宝发生争议的，适用《淘宝平台服务协议》处理。如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。

            阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。

            淘宝平台服务协议

            隐私权政策

            法律声明

            支付宝及客户端服务协议
        </textarea>
        <input type="button" id="btnAgree" value="请仔细阅读协议(5)" disabled="disabled" />
    </div>
    <input type="text" class="cls1" /><input type="text" class="cls1" /><input type="text" class="cls1" /><input type="text" class="cls1" /><input type="text" class="cls1" />
    <ul id="ul1">
        <li>球队1</li>
        <li>球队2</li>
        <li>球队3</li>
        <li>球队4</li>
    </ul>
    <hr />
    <ul id="ul2"></ul>
    <div id="div2" style="width:300px;height:100px;border:1px solid blue">
        姓名：<input type="text" id="txtName" /><br />
        年龄：<input type="text" id="txtAge" /><br />
        <input type="button" id="btnAdd" value="添加" />
    </div>
    <table id="tbl1" border="1">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>删除</td>
        </tr>
    </table>
    <script type="text/javascript">
        $(function () {
            //加法计算器
            $("#btnCompute").click(function () {
                $("#txtResult").val(function () {
                    return parseFloat($("#txt1").val()) + parseFloat($("#txt2").val());
                });
            });
            //阅读协议
            var num = 4;
            var intervalID = setInterval(function () {
                $("#btnAgree").val("请仔细阅读协议(" + (num--) + ")");
                if (num < 0) {
                    $("#btnAgree").prop("disabled", false).val("同意");
                    clearInterval(intervalID);
                }
            }, 1000);
            //文本框
            $(".cls1").mouseleave(function () {
                if ($(this).val() == "") {
                    $(this).css({ "backgroundColor": "red" });
                }
                else {
                    $(this).css({ "backgroundColor": "white" });
                }
            });
            //球队切换
            $("#ul1 li").mouseover(function () {
                $(this).css({ "backgroundColor": "red", "cursor": "pointer" }).siblings().css({ "backgroundColor": "white" });
            }).click(function () {
                $(this).appendTo("#ul2");
            });
            //添加人员
            $("#btnAdd").click(function () {
                var name = $("#txtName").val();
                var age = $("#txtAge").val();
                //动态创建行并主动添加到table
                $('<tr><td>' + name + '</td><td>' + age + '</td><td><input type="button"  value="删除" /></td></tr>').appendTo("#tbl1");
                $("#tbl1 input[type=button]").click(function () {
                    $(this).parent().parent().remove();//将向上两级父元素直接移除
                });
            });
        });
    </script>
</body>
</html>