菜鸡小窝 菜鸡小窝

jquery的三个作业(2018-10-13)

in 学习 read (409) 文章转载请注明来源!

因为最近明显感觉到学习情况有点不好,所以决定今天开始每次放学后都把作业发到博客上,一方面可以加深印象,一方面也算是水文章了。
第一个作业
表单效验跳转,这个是在输入框中输入admin,然后点击提交可以跳转到指定的一个网页,例如跳转到我的主页
效果如下:
第一个作业
代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
        <script>
            $(function(){
                $("div").hover(function(){
                    $(this).toggleClass("a");
                },function(){
                    $(this).toggleClass("a");
                });
                $(".bth").click(function(){
                    var name = $("input:first").val();
                    if(name=="admin"){
                        location.href="https://hsxhn.com";
                    }
                });
                $("input:first").keydown(function(event){
                    if(event.keyCode==13&&$(this).val()=="admin"){
                        location.href="https://hsxhn.com";
                    }
                });
            });
        </script>
    </head>
    <body>
        <div style="width: 200px;height: 200px;border: solid;">
            请输入姓名:<input type="text" /><br />
            <input class="bth" type="button" value="提交" />
        </div>
    </body>
</html>

第二个作业
插入内容插入符号和效验,点击题目会插入文章。插入文章后点击添加标点会添加标点符号,并且可以进行检查输入的文章是否正确,不正确的段落会将输入框变成红色
效果如下:
第二个作业
代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("h1").click(function() {
                var $p1 = $("<p>鹅鹅鹅</p>");
                $(this).after($p1);

                var $p2 = $("<p>曲项向天歌</p>");
                $(this).next().after($p2);

                var $p3 = $("<p>白毛浮绿水</p>");
                $(this).next().next().after($p3);

                var $p4 = $("<p>红掌拨清波</p>");
                $(this).next().next().after($p4);

                $("#btn1").show();
                $("#btn2").show();
            });

            $("#btn1").click(function() {
                var p1 = $("p:eq(0)").text();
                $("p:eq(0)").html(p1 + "<span style='color: red'>,</span>");
                var p2 = $("p:eq(1)").text();
                $("p:eq(1)").html(p2 + "<span style='color: red'>。</span>");
                var p3 = $("p:eq(2)").text();
                $("p:eq(2)").html(p3 + "<span style='color: red'>,</span>");
                var p4 = $("p:eq(3)").text();
                $("p:eq(3)").html(p4 + "<span style='color: red'>。</span>");
            });

            $("#btn2").click(function() {
                var $input = $("<input class='content' type='text'><br>");
                $("p").replaceWith($input);

                var $checkmx = $('<input id="bth3" type="button" value="检查默写" />');
                $checkmx.bind("click",function() {
                    var inp1 = $(".content")[0].value;
                    if(inp1 != "鹅鹅鹅") {
                        $(".content")[0].style.border = "1px solid red";
                    }
                    var inp2 = $(".content")[1].value;
                    if(inp2 != "曲项向天歌") {
                        $(".content")[1].style.border = "1px solid red";
                    }
                    var inp3 = $(".content")[2].value;
                    if(inp3 != "白毛浮绿水") {
                        $(".content")[2].style.border = "1px solid red";
                    }
                    var inp4 = $(".content")[3].value;
                    if(inp4 != "红掌拨清波") {
                        $(".content")[3].style.border = "1px solid red";
                    }
                });
                $(this).replaceWith($checkmx);
            });
        });
    </script>

    <body>
        <h1>咏鹅</h1>
        <input id="btn1" style="display: none;" type="button" value="添加标点" />
        <input id="btn2" style="display: none;" type="button" value="开启默写" />
    </body>

</html>

第三个作业
这个主要是使用toggle事件的多次点击改变背景的颜色,还有缓慢打开的动画效果
效果如下:
第三个作业
代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a {
                background-color: red;
            }
            
            .b {
                background-color: green;
            }
            
            .c {
                background-color: blue;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script>
            $(function() {
                $("h1").mouseover(function() {
                    $(this).css("color", "red");
                    $("div").fadeIn(2000);
                });
                $("#reger").click(function() {
                    $("form").slideDown(2000);
                });
                $("input:last").toggle(function() {
                    $("form").removeClass("b c");
                    $("form").addClass("a");
                }, function() {
                    $("form").removeClass("a c");
                    $("form").addClass("b");
                }, function() {
                    $("form").removeClass("a b");
                    $("form").addClass("c");
                });
            });
        </script>
    </head>

    <body>
        <h1>欢迎来到XXXX</h1>
        <div style="display: none;">
            <h4>注册后才能浏览</h4>
            <input id="reger" type="button" value="注册" />
        </div>
        <form style="display: none;">
            <table>
                <tr>
                    <td>姓名</td>
                    <td><input type="text" /> </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" /> </td>
                </tr>
                <tr>
                    <td><input type="submit" /> </td>
                    <td><input type="reset" /> </td>
                    <td><input type="button" value="换背景颜色" /> </td>
                </tr>
            </table>
        </form>
    </body>

</html>
学习
发表新评论
前篇 后篇
0:00