一、滚动菜单：outerHeight、offset-top、scrollTop、height、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        body{margin:0;}
        .left{
            height:400px;
            width:20%;
            background:pink;
            font-size:16px;
            float:left;
            position:fixed;
            text-align:center;
        }
        .right{
            width:80%;
            height:auto;
            overflow:scroll;
            float:right;
        }
        .right .content{
            height:200px;
            border:1px solid gray;
            padding:20px;
        }
        .active{
            background-color:yellow;
        }
    </style>
    <script src="jquery-1.12.4.min.js"></script>
</head>
<body>
    <div class="left">
        <div class="menu" >第1章</div>
        <div class="menu" >第2章</div>
        <div class="menu" >第3章</div>
        <div class="menu" >第4章</div>
        <div class="menu" >第5章</div>
        <div class="menu" >第6章</div>
        <div class="menu" >第7章</div>
    </div>
    <div class="right">
        <div class="content" section="1">111</div>
        <div class="content" section="2">222</div>
        <div class="content" section="3">333</div>
        <div class="content" section="4">444</div>
        <div class="content" section="5">555</div>
        <div class="content" section="6" style="height:100px;">666</div>
        <div class="content" section="7" style="height:100px;">777</div>
    </div>
    <script>
        $(function(){
            $(window).scroll(function(){
                var scroll = $(this).scrollTop();
                var winHeight = $(window).height();
                var rHeight = $(".right").height();
                $(".right").children().each(function(){
                    var topWay = $(this).offset()["top"];
                    var bottomWay = $(this).outerHeight() + topWay;
                    //显示最后面的章节
                    if((scroll + winHeight > rHeight) && (rHeight - topWay < winHeight)){
                        var index = $(this).attr("section")-1;
                        $(".left").children().eq(index).addClass("active");
                    };
                    //逐章显示目录，不包含最后一章内容
                    if(scroll > topWay && scroll < bottomWay){
                        var index = $(this).attr("section")-1;
                        $(".left").children().eq(index).addClass("active").siblings().removeClass("active");
                    };
                });
            });
        });
    </script>
</body>
</html>
View Code

二、tag标签：addClass、removeClass、attr、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tagMenu</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        .tagMenu{
            width:400px;
            height:300px;
            margin:0 auto;
            margin-top:50px;
            padding:0;
            border-left:1px solid #666;
            border-right:1px solid #666;
            border-bottom:1px solid #666;
        }
        .menu{
            background:#666;
            color:#999;
            width:100%;
            height:15%;
            position:relative;
        }
        ul{
            list-style:none;
            float:left;
            margin:0;
            position:absolute;
            top:0;left:0;right:0;bottom:0;
            line-height:45px;
        }
        ul li{
            display:inline-block;
            padding:0 10px;
        }
        .content{
            height:85%;
            position:relative;
        }
        .content .text{
            float:left;
            position:absolute;
            top:0;right:0;left:0;bottom:0;
            background:white;
            overflow:auto;
        }
        .hide{
            display:none;
        }
        .active{
            background:white;
            color:black;
            border-top:1px solid pink;
        }

    </style>
</head>
<body>
    <div class="tagMenu">
        <div class="menu">
            <ul>
                <li class="active" pg="1">第一章</li>
                <li pg="2">第二章</li>
                <li pg="3">第三章</li>
                <li pg="4">第四章</li>
                <li pg="5">第五章</li>
            </ul>
        </div>
        <div class="content">
            <div class="text">111</div>
            <div class="text hide">222</div>
            <div class="text hide">333</div>
            <div class="text hide">444</div>
            <div class="text hide">555</div>
        </div>
    </div>
    <script>
        $("li").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            $(".text").eq($(this).attr("pg")-1).removeClass("hide").siblings().addClass("hide");
        })
    </script>
</body>
</html>
View Code

三、正反选：is、prop、checked、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selectAll</title>
    <style>
        .menu input{
            margin:10px;
            font-size:10px;
        }
    </style>
    <script src="jquery-1.12.4.min.js"></script>
</head>
<body>
    <div class="menu">
        <input id="all" type="button" value="全选" />
        <input id="else" type="button" value="反选" />
        <input id="none" type="button" value="取消" />
    </div>
    <div class="cho">
        <input type="checkbox" value="1" name="pro">上海
        <input type="checkbox" value="2" name="pro">合肥
        <input type="checkbox" value="3" name="pro">北京
        <input type="checkbox" value="4" name="pro">武汉
        <input type="checkbox" value="5" name="pro">南京
    </div>
    <script>
        $(function(){
            $("#all").click(function(){$(":checkbox").each(function(){$(this).prop("checked",true)})});
            $("#none").click(function(){$(":checkbox").each(function(){$(this).prop("checked",false)})});
            $("#else").click(function(){
                $(":checkbox").each(function(){
                   if($(this).is(":checked")){
                       $(this).prop("checked",false);
                   } else{
                       $(this).prop("checked",true);
                   };
                });
            });
        });
    </script>
</body>
</html>
View Code

四、返回顶部：animate、fadeIn、fadeOut、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>backToTop</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
        }
        .content{
            height:2000px;
            width:80%;
            margin:0 auto;
            border:1px solid pink;
        }
        .back{
            position:fixed;
            right:10%;;bottom:0;
            background:rgba(100,100,100,.5);
            color:white;
            width:15px;
            margin-right:-15px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div class="content">
        11111111<br><br><br><br><br><br><br>111111111111111
        11111111<br><br><br><br><br><br><br>111111111111111
        11111111<br><br><br><br><br><br><br>111111111111111
    </div>
    <div class="back hide">返回顶部</div>
    <script>
        //效果：按钮先隐藏，页面滑动一个界面后出现，可直接跳转至页首
        var winHeight = $(window).height();
        $(window).scroll(function(){
            var scroll = $(this).scrollTop();
            if(scroll > winHeight){
                $(".back").fadeIn("slow");
            }else{
                $(".back").fadeOut("slow");
            };
        });
        //$(".back").click(function(){$("body").animate({scrollTop:0,},"slow")});
        $(".back").click(function(){$(window).scrollTop(0)});
    </script>
</body>
</html>
View Code

五、左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leftMenu</title>
    <style>
        body{margin:0;}
        ul{
            list-style:none;
            padding:0;
            margin:0;
        }
        .left{
            height:100%;
            width:15%;
            background:rgba(200,50,30,.3);
            float:left;
            position:fixed;
            text-align:center;
            padding-top:30px;
        }
        .right{
            width:85%;
            float:right;
            background:rgba(0,50,30,.3);
        }
        .active{
            background:yellow;
        }
        .right .content .text{
            height:200px;
            border-bottom:1px solid rgba(0,50,30,.4);
        }
        .menu .menu2{
            display:none;
        }
        .yellowM{
            color:yellow;
        }
    </style>
    <script src="jquery-1.12.4.min.js"></script>
</head>
<body>
    <div class="left">
        <div class="menu" >
            <ul>
                <li><h4 loca="0">第1章</h4></li>
                <li class="menu2" lo="0">1.1</li>
                <li class="menu2" lo="1">1.2</li>
                <li class="menu2" lo="2">1.3</li>
                <li class="menu2" lo="3">1.4</li>
            </ul>
        </div>
        <div class="menu" >
            <ul>
                <li><h4 loca="1">第2章</h4></li>
                <li class="menu2" lo="4">2.1</li>
                <li class="menu2" lo="5">2.2</li>
                <li class="menu2" lo="6">2.3</li>
                <li class="menu2" lo="7">2.4</li>
            </ul>
        </div>
        <div class="menu" >
            <ul>
                <li><h4 loca="2">第3章</h4></li>
                <li class="menu2" lo="8">3.1</li>
                <li class="menu2" lo="9">3.2</li>
                <li class="menu2" lo="10">3.3</li>
                <li class="menu2" lo="11">3.4</li>
            </ul>
        </div>
    </div>
    <div class="right">
        <div class="content">
            <div class="text">1.1</div>
            <div class="text">1.2</div>
            <div class="text">1.3</div>
            <div class="text">1.4</div>
        </div>
        <div class="content">
            <div class="text">2.1</div>
            <div class="text">2.2</div>
            <div class="text">2.3</div>
            <div class="text">2.4</div>
        </div>
        <div class="content">
            <div class="text">3.1</div>
            <div class="text">3.2</div>
            <div class="text">3.3</div>
            <div class="text">3.4</div>
        </div>
    </div>
    <script>
    //点击一级菜单时：显示二级菜单\对应相应段落内容
        $("h4").each(function(){
            $(this).click(function(){
                //对应二级菜单
                $("h4").removeClass("active");
                $(".menu2").hide();
                $(this).addClass("active").parent().siblings().slideDown("slow");
                //对应文本段落
                var h = $(".content").eq($(this).attr("loca")).offset()['top'];
                $(window).scrollTop(h);
            });
        });
    //点击二级菜单时：对应显示相应文本\目录字体变色
        $(".menu2").each(function(){
            $(this).click(function(){
                //对应相应文本
                var h = $(".text").eq($(this).attr("lo")).offset()['top'];
                $(window).scrollTop(h);
                //目录字体变色
                $(this).addClass("yellowM").siblings().removeClass("yellowM");
            });
        });
    </script>
</body>
</html>
View Code

六、模态对话框：val、attr、text、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>moTai</title>
    <style>
        input{
            margin:10px;
        }
        .mask{
            position:fixed;
            top:0;right:0;bottom:0;left:0;
            background:rgba(0,0,0,.5);
            display:none;
        }
        .edit{
            position:absolute;
            top:30%;
            left:30%;
            display:none;
        }
    </style>
    <script src="jquery-1.12.4.min.js"></script>
</head>
<body>
    <table border="1" cellpadding="5" cellspacing="0">
        <thead>
            <tr>
                <td>主机名</td>
                <td>IP</td>
                <td>端口</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>c1.com</td>
                <td>1.1.1.1</td>
                <td>8888</td>
                <td class="ed">Edit</td>
            </tr>
            <tr>
                <td>c2.com</td>
                <td>1.1.1.1</td>
                <td>8088</td>
                <td class="ed">Edit</td>
            </tr>
            <tr>
                <td>c3.com</td>
                <td>1.1.1.1</td>
                <td>8080</td>
                <td class="ed">Edit</td>
            </tr>
        </tbody>
    </table>
    <div class="mask"></div>
    <div class="edit">
        <input type="text" val="0" /><br>
        <input type="text" val="1" /><br>
        <input type="text" val="2" /><br>
        <input id="sure" type="button" value="提交" />
        <input id="quit" type="button" value="取消" />
    </div>
    <script>
        $(function(){
        //
            $(".ed").each(function(){
                $(this).click(function(){
                //显示编辑框，匹配相关信息
                    var i=0;
                    var node = $(this).siblings();
                    $(node).each(function(){
                        var info = $(this).text();
                        $(":text").eq(i).attr("value",info);
                        i++;
                    });
                    $(".mask").show();
                    $(".edit").show();
                //文本修改
                    $(":text").each(function(){
                        $(this).change(function(){
                            index = $(this).attr("val");
                            info = $(this).val();
                        });
                    });
                //确认
                    $("#sure").click(function(){
                        $(node).siblings().eq(index).text(info);
                        $(".mask").hide();
                        $(".edit").hide();
                    });
                });
            });
        //取消
            $("#quit").click(function(){
                $(".mask").hide();
                $(".edit").hide();
            });
        });
    </script>
</body>
</html>
View Code

注意：模态对话框比打开新链接少了一次请求，适用于内容较少、且单条修改；当内容较多时，推荐使用链接方式。

七、轮播图：index、setInterval、each、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>runPic</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        .outer{
            margin-top:50px;
            padding:0;
            width:200px;
            height:200px;
            overflow:hidden;
            border:1px solid pink;
            position:relative;
        }
        ul{
            list-style:none;
            padding:0;
            margin:0;
        }
        ul li{
            float:left;
            display:none;
        }
        .pic{
            position:absolute;
            top:0;
            left:0;
        }
        .num{
            position:absolute;
            bottom:0;left:25%;
        }
        .num li{
            margin-left:3px;
            padding:3px;
            font-size:10px;
            color:white;
            background:pink;
            border-radius:50%;
            display:inline-block;
        }
        .arrow{
            height:30px;
            width:20px;
            position:absolute;
            top:50%;
            margin-top:-15px;
            background:pink;
            opacity:0.4;
            color:white;
            font-size:25px;
            font-weight:bolder;
            display:none;
        }
        .outer:hover .arrow{
            display:inline-block;
        }
        .right{
            right:0;
        }

    </style>
</head>
<body>
    <div class="outer">
        <ul class="pic">
            <li style="display:inline-block;"><img src="./pic/1.png"></li>
            <li><img src="./pic/2.png"></li>
            <li><img src="./pic/3.png"></li>
            <li><img src="./pic/4.png"></li>
            <li><img src="./pic/5.png"></li>
            <li><img src="./pic/6.png"></li>
        </ul>
        <ul class="num">
            <li style="color:red">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div class="arrow left"> < </div>
        <div class="arrow right"> > </div>
    </div>
    <script>
        var index = 0;
        function move(){
            if(index == $(".pic li").length - 1){
                index = 0;
            }else{
                index++;
            };
            $(".pic li").eq(index).show().siblings().hide();
            $(".num li").eq(index).css("color","red").siblings().css("color","white");
        };
        var time = setInterval(move,1500);  //自动轮播

        $(".outer")                         //鼠标悬浮时暂停
            .mouseenter(function(){clearInterval(time);})
            .mouseleave(function(){time = setInterval(move,1500);});

        $(".num li").click(function(){      //下方数字点播
            index = $(this).index();
            $(this).css("color","red").siblings().css("color","white");
            $(".pic li").eq(index).show().siblings().hide();
        });

        $(".left").click(function(){        //左按键点播
            if(index == 0){
                index = $(".pic li").length - 2;
            }else{
                index -= 2;
            };
            move();
        });
        $(".right").click(function(){       //右按键点播
            move();
        });

    </script>
</body>
</html>
View Code

八、滑动面板：clientX、clientY、offset、cursor、bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>moveBox</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        .box{
            position:absolute;
            width:400px;
            height:300px;
            border:1px solid red;
            top:20%;
            left:20%;
        }
        .menu{
            height:20%;
            background:gray;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="menu"></div>
        <div class="content"></div>
    </div>
    <script>
        $(function(){
            $(".menu")
                .mouseover(function(){
                    $(this).css("cursor","move");
                })
                .mousedown(function(){
                    var old_m_X = event.clientX;
                    var old_m_Y = event.clientY;
                    var old_b_T = $(".box").offset().top;
                    var old_b_L = $(".box").offset().left;
                    $(this).bind("mousemove",function(){
                        var new_m_X = event.clientX;
                        var new_m_Y = event.clientY;
                        new_b_L = new_m_X - old_m_X + old_b_L;
                        new_b_T = new_m_Y - old_m_Y + old_b_T;
                        $(this).parent().css("top",new_b_T+"px");
                        $(this).parent().css("left",new_b_L+"px");
                    });
                })
                .mouseup(function(){
                    $(this).unbind("mousemove");
                });
        });
    </script>
</body>
</html>
View Code

九、放大镜：图片抖动？？？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>magnifier</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
            padding:0;
        }
        .sBox{
            height:350px;
            width:350px;
            position:absolute;
            border:1px dashed gray;
        }
        .cloth{
            height:175px;
            width:175px;
            position:absolute;
            background:pink;
            opacity:.4;
            z-index:5;
            display:none;
        }
        .bBox{
            height:400px;
            width:400px;
            overflow:hidden;
            position:absolute;
            left:352px;
            border:1px dashed gray;
            display:none;
        }
        .bPic{
            position:absolute;
        }
    </style>
</head>
<body>
    <!--实现放大镜效果-->
    <div>
        <div class="sBox">
            <img class="sPic" src="./pic/m2.jpg">
        </div>
        <div class="cloth"></div>
        <div class="bBox">
            <img class="bPic" src="./pic/m1.jpg">
        </div>
    </div>
    <script>
        $(".sBox")
            .mouseenter(function(){
                $(".cloth").css("display","block");
                $(".bBox").css("display","block");
                $(this).bind("mousemove",mo());
            }).mouseleave(function(){
                $(this).unbind("mousemove");
                $(".cloth").css("display","none");
                $(".bBox").css("display","none");
            });
        function mo(){
            var mouseX = event.clientX;                  //鼠标位置
            var mouseY = event.clientY;
            var sBoxX = $(".sBox").offset().left;      //小图的偏移
            var sBoxY = $(".sBox").offset().top;
            var sBoxW = $(".sBox").width();            //小图的尺寸
            var sBoxH = $(".sBox").height();
            var clothW = $(".cloth").width();            //cloth的尺寸
            var clothH = $(".cloth").height();
            var bBoxW = $(".bBox").width();            //大图的宽、高
            var bBoxH = $(".bBox").height();

            //cloth跟随鼠标偏移
            clothNewLeft = mouseX - sBoxX - clothW/2;
            clothNewTop = mouseY - sBoxY - clothH/2;
            if(clothNewLeft < 0){
                clothNewLeft = 0;
            }else if(clothNewLeft > (sBoxW - clothW)){
                clothNewLeft = (sBoxW - clothW);
            };
            if(clothNewTop < 0){
                clothNewTop = 0;
            }else if(clothNewTop > (sBoxH - clothH)){
                clothNewTop = (sBoxH - clothH);
            };
            $(".cloth").css({"top":clothNewTop+"px","left":clothNewLeft+"px",});

            //大图跟随cloth偏移
            bPicNewLeft = - clothNewLeft * bBoxW / clothW + "px";
            bPicNewTop = - clothNewTop * bBoxH / clothH + "px";
            $(".bPic").css({"top":bPicNewTop,"left":bPicNewLeft,});
        };
    </script>
</body>
</html>
View Code

十、编辑框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editBox</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            font-size:16px;
        }
        .buttons input{
            margin:10px;
        }
        .cEdit{
            width:130px;
            text-align:center;
            height:30px;
            line-height:30px;
            display:inline-block;
            background:orange;
            margin:10px;
        }
        .active{
            color:white;
            background:blue;
        }


    </style>
</head>
<body>
    <div class="buttons">
        <input class="cAll" type="button" value="全选" />
        <input class="cAnti" type="button" value="反选" />
        <input class="cNone" type="button" value="取消" />
        <div class="cEdit" >进入编辑模式</div>
    </div>
    <div class="tableBox">
        <table border="1px" cellpadding="3px" cellspacing="1px">
            <thead>
                <tr>
                    <td>选择</td>
                    <td>主机名</td>
                    <td>端口</td>
                    <td>状态</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" ></td>
                    <td>v1</td>
                    <td>v11</td>
                    <td>在线</td>
                </tr>
                <tr>
                    <td><input type="checkbox" ></td>
                    <td>v2</td>
                    <td>v22</td>
                    <td>在线</td>
                </tr>
                <tr>
                    <td><input type="checkbox" ></td>
                    <td>v3</td>
                    <td>v33</td>
                    <td>在线</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        $(function(){
        //编辑
            function EDITING(ths){
                var nodeList = $(ths).parent().siblings();
                $(nodeList).each(function(){
                    var text = $(this).text();
                    var new_html = '<input type="text" value="' + text + '">';
                    $(this).html(new_html);
                });
            };
        //退出编辑
            function OUTEDIT(ths){
                var nodeList = $(ths).parent().siblings();
                $(nodeList).each(function(){
                    var content = $(this).children().first().val();
                    $(this).children().remove();
                    $(this).text(content);
                });
            };
        //单击进入\退出编辑模式
            $(".cEdit").click(function(){
                if($(this).hasClass("active")){
                    $(this).removeClass("active");
                }else{
                    $(this).addClass("active");
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){
                            EDITING(this);
                        };
                    });
                };
            });
        //全选
            $(".cAll").click(function(){
                if($(".cEdit").hasClass("active")){
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){

                        }else{
                            $(this).prop("checked",true);
                            EDITING(this);
                        };
                    });
                }else{
                    $(":checkbox").prop("checked",true);
                };
            });
        //反选
            $(".cAnti").click(function(){
                if($(".cEdit").hasClass("active")){
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){
                            $(this).prop("checked",false);
                            OUTEDIT(this);
                        }else{
                            $(this).prop("checked",true);
                            EDITING(this);
                        };
                    });
                }else{
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){
                            $(this).prop("checked",false);
                        }else{
                            $(this).prop("checked",true);
                        };
                    });
                };
            });
        //取消
            $(".cNone").click(function(){
                if($(".cEdit").hasClass("active")){
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){
                            $(this).prop("checked",false);
                            OUTEDIT(this);
                        };
                    });
                }else{
                    $(":checkbox").prop("checked",false);
                };
            });
        //屏幕直接操作
            $(":checkbox").each(function(){
                $(this).change(function(){
                    if($(this).prop("checked")){
                        if($(".cEdit").hasClass("active")){
                            EDITING(this);
                        };
                    }else{
                        if($(".cEdit").hasClass("active")){
                            OUTEDIT(this);
                        };
                    };
                });
            });
        });
    </script>
</body>
</html>
View Code

十一、自加、自减：clone（true）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addSelf</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            font-size:16px;
        }
        .buttons input{
            margin:10px;
        }
        .cEdit{
            width:130px;
            text-align:center;
            height:30px;
            line-height:30px;
            display:inline-block;
            background:orange;
            margin:10px;
        }
        .active{
            color:white;
            background:blue;
        }
        .flag{
            font-size:15px;
            font-weight:bold;
            text-align:center;
        }

    </style>
</head>
<body>
    <div class="buttons">
        <input class="cAll" type="button" value="全选" />
        <input class="cAnti" type="button" value="反选" />
        <input class="cNone" type="button" value="取消" />
        <div class="cEdit" >进入编辑模式</div>
    </div>
    <div class="tableBox">
        <table border="1px" cellpadding="3px" cellspacing="1px">
            <thead>
                <tr>
                    <td>新建</td>
                    <td>选择</td>
                    <td>主机名</td>
                    <td>端口</td>
                    <td>状态</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="flag" onclick="add(this)">+</td>
                    <td><input type="checkbox" ></td>
                    <td>v1</td>
                    <td>v11</td>
                    <td>在线</td>
                </tr>
                <tr>
                    <td class="flag" onclick="add(this)">+</td>
                    <td><input type="checkbox" ></td>
                    <td>v2</td>
                    <td>v22</td>
                    <td>在线</td>
                </tr>
                <tr>
                    <td class="flag" onclick="add(this)">+</td>
                    <td><input type="checkbox" ></td>
                    <td>v3</td>
                    <td>v33</td>
                    <td>在线</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //如下代码的调用，放在了标签中，在DOM渲染的时候需要，所以不能放在$(function(){})中，
        //新建
        function add(ths){
            var newNode = $(ths).parent().clone(true);
            //注意：clone()只负责克隆标签，clone（true）除了克隆标签、还有绑定的操作，如click，
            $(newNode).children().first().text("-").attr("onclick","remove8(this)");
            $(ths).parent().after(newNode);
        };
        //删除
        function remove8(ths){
            $(ths).parent().remove();
        };
        $(function(){
        //编辑
            function EDITING(ths){
                var nodeList = $(ths).parent().nextAll();
                $(nodeList).each(function(){
                    var text = $(this).text();
                    var new_html = '<input type="text" value="' + text + '">';
                    $(this).html(new_html);
                });
            };
        //退出编辑
            function OUTEDIT(ths){
                var nodeList = $(ths).parent().nextAll();
                $(nodeList).each(function(){
                    var content = $(this).children().first().val();
                    $(this).children().remove();
                    $(this).text(content);
                });
            };
        //单击进入\退出编辑模式
            $(".cEdit").click(function(){
                if($(this).hasClass("active")){

                }else{
                    $(this).addClass("active");
                    $(this).text("编辑中");
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){
                            EDITING(this);
                        };
                    });
                };
            });
        //全选
            $(".cAll").click(function(){
                if($(".cEdit").hasClass("active")){
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){

                        }else{
                            $(this).prop("checked",true);
                            EDITING(this);
                        };
                    });
                }else{
                    $(":checkbox").prop("checked",true);
                };
            });
        //反选
            $(".cAnti").click(function(){
                if($(".cEdit").hasClass("active")){
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){
                            $(this).prop("checked",false);
                            OUTEDIT(this);
                        }else{
                            $(this).prop("checked",true);
                            EDITING(this);
                        };
                    });
                }else{
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){
                            $(this).prop("checked",false);
                        }else{
                            $(this).prop("checked",true);
                        };
                    });
                };
            });
        //取消
            $(".cNone").click(function(){
                if($(".cEdit").hasClass("active")){
                    $(":checkbox").each(function(){
                        if($(this).prop("checked")){
                            $(this).prop("checked",false);
                            OUTEDIT(this);
                        };
                    });
                    $(".cEdit").removeClass("active").text("进入编辑模式");
                }else{
                    $(":checkbox").prop("checked",false);
                };
            });
        //编辑模式下，直接屏幕操作,
            $(":checkbox").change(function(){
                if($(".cEdit").hasClass("active")){
                    if($(this).prop("checked")){
                        EDITING(this);
                    }else{
                        OUTEDIT(this);
                    };
                };
            });
        });

    </script>
</body>
</html>
View Code

 十二、跑马灯：appendto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>horseRaceLamp</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
            padding:50px;

        }
        ul{
            list-style:none;
            color:red;
            font-size:26px;
        }
        input{
            font-size:26px;
            margin:10px;
        }
    </style>
</head>
<body>
    <ul id="RunTopic">
    <li>文字1</li>
    <li>文字2</li>
    <li>文字3</li>
    <li>文字4</li>
    <li>文字5</li>
    </ul>
    <br>
    <input type="button" onclick="test();" value="run">
    <input type="button" onclick="stop();" value="stop">
    <script>
        function test(){
            runHorse = setInterval(function(){
                $("#RunTopic").find("li:first").appendTo($("#RunTopic"));
            },1000);
        };
        function stop(){
            clearInterval(runHorse);
        };

    </script>
</body>
</html>
View Code

十三、商城三级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>levelMenu</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        .menu{
            margin:50px 50px 0 50px;;
            position:relative;
        }
        .level1{
            background:rgba(200,25,234,.3);
            height:50px;
            line-height:50px;
            font-size:28px;
            padding-left:30px;
            margin:0;
        }
        ul{
            margin:0;
            background:rgba(200,225,34,.3);
            width:150px;
            height:250px;
            font-size:18px;
            position:absolute;
            top:50px;
            display:none;
        }
        .level2 li{
            margin:30px;
        }
        .goods{
            margin:0;
            width:300px;
            height:250px;
            background:rgba(200,225,34,.3);
            position:absolute;
            top:50px;left:180px;
            display:none;
        }
        .goods .details{
            margin:30px;
            font-size:18px;
        }
        .show{
            display:block;
        }
    </style>

</head>
<body>
    <div class="menu">
        <div class="level1">菜单</div>
        <ul class="level2">
            <li goodsStyle="j">家电</li>
            <li goodsStyle="f">服装</li>
            <li goodsStyle="c">餐饮</li>
            <li goodsStyle="y">娱乐</li>
        </ul>
        <div>
            <div class="goods j">
                <div class="details">家电</div>
                <div class="details">家电</div>
                <div class="details">家电</div>
                <div class="details">家电</div>
            </div>
            <div class="goods f">
                <div class="details">服装</div>
                <div class="details">服装</div>
                <div class="details">服装</div>
                <div class="details">服装</div>
            </div>
            <div class="goods c">
                <div class="details">餐饮</div>
                <div class="details">餐饮</div>
                <div class="details">餐饮</div>
                <div class="details">餐饮</div>
            </div>
            <div class="goods y">
                <div class="details">娱乐</div>
                <div class="details">娱乐</div>
                <div class="details">娱乐</div>
                <div class="details">娱乐</div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $(".level1").mouseover(function(){
                if($(".level2").hasClass("show")){
                    $(".level2").removeClass("show");
                    $(".goods").removeClass("show");
                }else{
                    $(".level2").addClass("show");
                };
            });
            $("li").mouseover(function(){
                $(this).css("color","red").siblings().css("color","white");
                var goodsName = $(this).attr("goodsStyle");
                $("."+goodsName).addClass("show").siblings().removeClass("show");
            });
            $(".goods").mouseleave(function(){
                $(this).removeClass("show");
            });
        });
    </script>
</body>
</html>
View Code

十四、Form表单认证：更改头像？？？ajax异步调用？？？tab键同鼠标一样引发聚焦？？？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>registorForm</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        div{
            margin:10px;
            font-size:18px;
        }
        a{
            margin:10px;
            font-size:12px;
            color:gray;
        }
        input{
            height:30px;
            width:300px;
            display:block;
        }
        .button{
            height:40px;
            width:150px;
            background:rgba(120,122,001,.5);
            color:white;
            font-size:26px;
            margin-left:75px;
        }
        .title{
            font-size:26px;
            width:300px;
            text-align:center;
        }
        .registor{
            position:absolute;
        }
        .photo{
            width:100px;
            height:100px;
            display:block;
            border:solid 1px rgba(120,122,001,.5);
            margin-left:100px;
            -webkit-border-radius: 50px;
        }
        .sureCodeW{
            height:40px;
            width:150px;
            display:block;
        }
        .sureCode{
            height:40px;
            width:200px;
            margin-left:0;
            font-size:18px;
            line-height:40px;
            background:rgba(100,125,80,.4);
            color:black;
            text-align:center;
        }
        .showCode{
            font-size:28px;
            color:red;
            background-image:url("./pic/4.png");
        }
        .redWord{
            color:red;
        }
        #pic div{
            margin-left:115px;
        }

    </style>
</head>
<body>
    <div class="registor">
        <div class="title">注册</div>
        <div id="username">用户名<a>必填</a><input type="text" /></div>
        <div id="pwd1">密码<a>必填，需为6-16位数字及字母组合、字母开头</a><input type="text" /></div>
        <div id="pwd2">确认密码<a>必填,两次密码输入需要保持一致</a><input type="text" /></div>
        <div id="birth">生日<a>必填，格式：20120909</a><input type="text" /></div>
        <div id="mail">电子邮箱地址<a>请输入正确邮箱地址，用于找回密码</a><input type="text" /></div>
        <div id="tel">手机号<a>必填，请输入11位手机号码</a><input type="text" /></div>
        <div id="pic"><img class="photo" src="./pic/1.png" alt="头像" /><div>更换头像</div></div>
        <div id="code">验证码<a>必填,请正确输入,字母区分大小写</a><input type="text" /></div>
        <div class="sureCode"><span>点击生成验证码</span></div>
        <div id="regi"><input class="button" type="button" value="注册" /></div>
    </div>

    <script>
        $(function(){
            var name,password1,password2,birthday,email,phone,codes;
        //上传头像
            $("#photo").click(function(){


            });
        //注册信息提交
            $("#regi").click(function(){
                if($("*").hasClass("redWord")){

                }else{
                    console.log(name+password1+birthday+email+phone);
                };
            });
        //生成验证码
            $(".sureCode").click(function(){
                //生成新验证码
                var codeList = ['A','B','C','D','E','F','G',
                                'H','I','J','K','L','M','N',
                                'O','P','Q','R','S','T','U',
                                'V','W','X','Y','Z','a','b',
                                'c','d','e','f','g','h','i',
                                'j','k','l','m','n','o','p',
                                'q','r','s','t','u','v','w',
                                'x','y','z','0','1','2','3',
                                '4','5','6','7','8','9'];
                codes = "";
                for(var i=0;i<6;i++){
                    var newCode = codeList[Math.floor(Math.random()*codeList.length)];
                    codes += newCode;
                };
                $(this).addClass("showCode").find("span").text(codes);
            });
        //验证码校验
            $("#code").find("input")
                .mouseover(function(){
                    $(this).focus().prev().removeClass("redWord");
                })
                .mouseleave(function(){
                    inputCode = $(this).val();
                    $(this).blur(function(){
                        if(inputCode == codes){
                            return;
                        }else{
                            $(this).prev().addClass("redWord");
                        };
                    });
                });

        //用户名信息:name
            $("#username").find("input")
                .mouseover(function(){
                    $(this).focus().prev().removeClass("redWord");
                })
                .mouseleave(function(){
                    name = $(this).val();
                    $(this).blur(function(){
                        if(name == ""){
                            $(this).prev().addClass("redWord");
                        }
                    });
                });
        //密码:password1
            $("#pwd1").find("input")
                .mouseover(function(){
                    $(this).focus().prev().removeClass("redWord");
                })
                .mouseleave(function(){
                    password1 = $(this).val();
                    $(this).blur(function(){
                        var ret = /^[a-zA-Z][a-zA-Z0-9_]{6,16}$/;
                        if (ret.test(password1)){
                            return
                        }else{
                            $(this).prev().addClass("redWord");
                        };
                    });
                });
        //验证密码:password2
            $("#pwd2").find("input")
                .mouseover(function(){
                    $(this).focus().prev().removeClass("redWord");
                })
                .mouseleave(function(){
                    password2 = $(this).val();
                    $(this).blur(function(){
                        if(password2 == password1){
                            return
                        }else{
                            $(this).prev().addClass("redWord");
                        };
                    });
                });

        //生日：birthday
            $("#birth").find("input")
                .mouseover(function(){
                    $(this).focus().prev().removeClass("redWord");
                })
                .mouseleave(function(){
                    birthday = $(this).val();
                    $(this).blur(function(){
                        var ret = /^[0-9]{8}$/;
                        if(ret.test(birthday)){
                            return
                        }else{
                            $(this).prev().addClass("redWord");
                        };
                    });
                });
        //邮箱：email
            $("#mail").find("input")
                .mouseover(function(){
                    $(this).focus().prev().removeClass("redWord");
                })
                .mouseleave(function(){
                    email = $(this).val();
                    $(this).blur(function(){
                        var ret = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
                        if(ret.test(email)){
                            return
                        }else{
                            $(this).prev().addClass("redWord");
                        };
                    });
                });
        //手机:phone
            $("#tel").find("input")
                .mouseover(function(){
                    $(this).focus().prev().removeClass("redWord");
                })
                .mouseleave(function(){
                    phone = $(this).val();
                    $(this).blur(function(){
                        var ret = /^[1-9][\d]{10}$/;
                        if(ret.test(phone)){
                            return
                        }else{
                            $(this).prev().addClass("redWord");
                        };
                    });
                });
        });
    </script>
</body>
</html>
View Code