码迷，mamicode.com
首页 > Web开发 > 详细

jquery练习

时间：2018-11-01 18:29:34      阅读：160      评论：0      收藏：0      [点我收藏+]

标签：通过   bootstra   user   .sh   sbo   cccccc   adc   back   技术分享   

左侧菜单　

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>left_menu</title>

    <style>
          .menu{
              height: 500px;
              width: 20%;
              background-color: gainsboro;
              text-align: center;
              float: left;
          }
          .content{
              height: 500px;
              width: 80%;
              background-color: darkgray;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: wheat;
             color: rebeccapurple;}


         .hide{
             display: none;
         }


    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>
<script src="jquery.min.js"></script>
<script>
           $(".item .title").mouseover(function () {
                $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

//                $(this).next().removeClass("hide");
//                $(this).parent().siblings().children(".con").addClass("hide");
           })
</script>


</body>
</html>
View Code

Tab切换

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab_outer{
            margin: 20px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            /*border: 1px solid red;*/
            line-height: 40px;
            text-align: center;
        }
        .menu li{
            display: inline-block;
            margin-left: 14px;
            padding:5px 20px;

        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;

        }
        .hide{
            display: none;
        }

        .current{
            background-color: #2868c8;
            color: white;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li relation="c1" class="current">菜单一</li>
              <li relation="c2" >菜单二</li>
              <li relation="c3">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>

      </div>
</body>


<script src="jquery.min.js"></script>
    <script>
          $(".menu li").click(function(){

               var index=$(this).attr("relation");
               $("#"+index).removeClass("hide").siblings().addClass("hide");
               $(this).addClass("current").siblings().removeClass("current");

          });


    </script>
</html>
View Code

table正反选

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

     <button>全选</button>
     <button>取消</button>
     <button>反选</button>
     <hr>
     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
             <td>111</td>
             <td>111</td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
             <td>222</td>
             <td>222</td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
             <td>333</td>
             <td>333</td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
             <td>444</td>
             <td>444</td>
             <td>444</td>
         </tr>
     </table>




<script src="jquery.min.js"></script>
    <script>

            $("button").click(function(){

               if($(this).text()=="全选"){    // $(this)代指当前点击标签

                   $("table :checkbox").prop("checked",true)
               }
                else if($(this).text()=="取消"){
                   $("table :checkbox").prop("checked",false)
               }
                else {
                   $("table :checkbox").each(function(){

                     $(this).prop("checked",!$(this).prop("checked"));

                 });
               }



            });

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

模态对话框

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .back{
            background-color: wheat;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: darkgray;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: white;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>


<script src="jquery.min.js"></script>
<script>

    function action1(self){
        $(self).parent().siblings().removeClass("hide");

    }
    function action2(self){
        //$(self).parent().parent().children(".models,.shade").addClass("hide")

        $(self).parent().addClass("hide").prev().addClass("hide")

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

复制样式条

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
            <div class="outer">
                <div class="item">
                        <input type="button" value="+">
                        <input type="text">
                </div>
            </div>


<script src=jquery.min.js></script>
    <script>

            function add(self){
                // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
                 var $clone_obj=$(self).parent().clone();
                 $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
                 $(self).parent().parent().append($clone_obj);
            }
           function removed(self){

               $(self).parent().remove()

           }


/*
        $("[value=‘+‘]").click(function(){

             var $clone_obj=$(this).parent().clone();
                 $clone_obj.children(":button").val("-").attr("class","mark");
                 $(this).parent().parent().append($clone_obj);

        });



        $(".outer").on("click",".item .mark",function(){

            console.log($(this));  // $(this):  .item .mark标签
            $(this).parent().remove()

        })

*/


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

注册验证

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<form class="Form" id="form">

    <p><input class="v1" type="text" name="username" mark="用户名"></p>
    <p><input class="v1" type="text" name="email" mark="邮箱"></p>
    <p><input type="submit" value="submit"></p>

</form>

<script src="jquery.min.js"></script>
<script>


    $("#form :submit").click(function(){
          flag=true;

          $("#form .v1").each(function(){

          $(this).next("span").remove();// 防止对此点击按钮产生多个span标签

          var value=$(this).val();

          if (value.trim().length==0){
                 var mark=$(this).attr("mark");
                 var ele=document.createElement("span");
                 ele.innerHTML=mark+"不能为空!";
                 $(this).after(ele);
                 $(ele).prop("class","error");// DOM对象转换为jquery对象
                 flag=false;
                 return false ; //-------->引出$.each的return false注意点
            }

        });

        return flag
    });




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

拖动面板

技术分享图片 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $(‘#title‘).mouseover(function(){
            $(this).css(‘cursor‘,‘move‘);
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).on(‘mousemove‘, function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css(‘left‘,x+‘px‘);
                $(this).parent().css(‘top‘,y+‘px‘);

            })
        }).mouseup(function(){
            $(this).off(‘mousemove‘);
        });
    })
</script>
</body>
</html>
View Code

轮播图

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>


    <style>

            .outer{
                width: 790px;
                height: 340px;
                margin: 80px auto;
                position: relative;
            }

            .img li{
                 position: absolute;
                 list-style: none;
                 top: 0;
                 left: 0;
                 display: none;
            }

           .num{
               position: absolute;
               bottom: 18px;
               left: 270px;
               list-style: none;


           }

           .num li{
               display: inline-block;
               width: 18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 4px;
           }

           .btn{
               position: absolute;
               top:50%;
               width: 30px;
               height: 60px;
               background-color: lightgrey;
               color: white;

               text-align: center;
               line-height: 60px;
               font-size: 30px;
               opacity: 0.7;
               margin-top: -30px;

               display: none;

           }

           .left{
               left: 0;
           }

           .right{
               right: 0;
           }

          .outer:hover .btn{
              display: block;
          }

        .num .active{
            background-color: red;
        }
    </style>

</head>
<body>


      <div class="outer">
          <ul class="img">
              <li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
              <li><a href=""><img src="img/2.jpg" alt=""></a></li>
              <li><a href=""><img src="img/3.jpg" alt=""></a></li>
              <li><a href=""><img src="img/4.jpg" alt=""></a></li>
              <li><a href=""><img src="img/5.jpg" alt=""></a></li>
              <li><a href=""><img src="img/6.jpg" alt=""></a></li>
          </ul>

          <ul class="num">
              <!--<li class="active"></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>

      </div>
<script src="jquery-3.1.1.js"></script>
<script>
    var i=0;
//  通过jquery自动创建按钮标签

    var img_num=$(".img li").length;

    for(var j=0;j<img_num;j++){
        $(".num").append("<li></li>")
    }

    $(".num li").eq(0).addClass("active");


// 手动轮播

    $(".num li").mouseover(function () {
        i=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");

        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });


// 自动轮播
    var c=setInterval(GO_R,1500);

    function GO_R() {

        if(i==img_num-1){
            i=-1
        }
         i++;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }


    function GO_L() {
        if(i==0){
            i=img_num
        }
         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);  // fadeIn,fadeOut单独另开启的线程


    }
    $(".outer").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GO_R,1500)
    });



// button 加定播 
    $(".right").click(GO_R);
    $(".left").click(GO_L)



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

表格编辑操作 

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="jquery-2.1.4.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <style>

        .container .row td{
            padding: 10px;
        }

        #box{

          padding-top:50px;
        }

       .add{
           margin:20px 0;
       }

    </style>
</head>
<body>




<div class="container">
    <div class="row">

        <div class="col-md-7 col-lg-offset-3" id="box" >
            <div>
                <button type="button" class="btn btn-success add" data-toggle="modal" data-target="#myModal">
                添加员工信息
                </button>
            </div>

            <table class="table table-striped">
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>薪水</th>
                    <th>操作</th>
                </tr>

                <tr>
                    <td>张三</td>
                    <td>23</td>
                    <td>销售部</td>
                    <td>3000</td>
                    <td>
                        <button class="btn btn-danger btn-sm del">删除</button>
                        <button class="btn btn-info btn-sm edit">编辑</button>
                        <button class="btn btn-primary btn-sm">查看</button>
                    </td>
                </tr>

                 <tr class="handle">
                    <td>李四</td>
                    <td>32</td>
                    <td>保安部</td>
                    <td>5000</td>
                    <td>
                        <button class="btn btn-danger btn-sm del">删除</button>
                        <button class="btn btn-info btn-sm edit">编辑</button>
                        <button class="btn btn-primary btn-sm">查看</button>
                    </td>
                </tr>
            </table>
        </div>

    </div>

</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

          <div class="row">

              <div class="col-md-5 col-lg-offset-3">
                        <form class="add_form edit_form">
                              <div class="form-group">
                                <label for="username">姓名</label>
                                <input type="text" class="form-control" id="username" placeholder="username">
                              </div>
                              <div class="form-group">
                                <label for="age">年龄</label>
                                <input type="text" class="form-control" id="age" placeholder="age">
                              </div>
                              <div class="form-group">
                                <label for="dep">部门</label>
                                <input type="text" id="dep" placeholder="dep" class="form-control">

                              </div>

                               <div class="form-group">
                                <label for="salary">薪水</label>
                                <input type="text" class="form-control" id="salary" placeholder="salary">
                              </div>
                          </form>
              </div>
          </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary add_save">Save changes</button>
        <button type="button" class="btn btn-primary edit_save" style="display: none">Save changes</button>

      </div>
    </div>
  </div>
</div>


<script>
         // 提炼出一个创建tr的函数
         function createTr(){
             var $tr=$("<tr>");

             $(".add_form :text").each(function(){

                 $tr.append($("<td>").html($(this).val()))
             });


             $handle=$(".handle td:last").clone();
             $tr.append($handle);

             return $tr
         }

         // 添加按钮

         $(".add_save").click(function(){



             $("#myModal").modal("hide");

             var $tr=createTr();


             $(".table tbody").append($tr)

         });

         // 删除按钮
         $("table").on("click",".del",function(){
            $(this).parent().parent().remove()
         });

         //编辑按钮

         $("table").on("click",".edit",function(){
             var $edit_obj=$(this).parent().parent();
             var arr=[];
             $(this).parent().siblings().each(function(){
                 arr.push($(this).text())

             });

             $(".edit_form :text").each(function(i){
                  $(this).val(arr[i])
             });

             $("#myModal").modal("show");


              $(".edit_save").show().prev().hide();
              $(".edit_save").click(function(){
                  $("#myModal").modal("hide");

                  // 创建tr标签
                 var $tr=createTr();
                 $edit_obj.replaceWith($tr);
                 $(".edit_save").hide().prev().show();
             });

          })


</script>




</body>
</html>
View Code

注册实例 

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .error{
            color:red
        }
    </style>
</head>
<body>


<form class="Form">

    <p><input class="v1" type="text" name="username" mark="用户名"></p>
    <p><input class="v1" type="text" name="email" mark="邮箱"></p>
    <p><input type="submit" value="submit"></p>

</form>

<script src="jquery-2.1.4.min.js"></script>

<script>
    $(".Form :submit").click(function(){

        flag=true;

        $("Form .v1").each(function(){

            var value=$(this).val();
            if (value.trim().length==0){
                 var mark=$(this).attr("mark");
                 var $span=$("<span>");
                 $span.html(mark+"不能为空!");
                 $span.prop("class","error");
                 $(this).after($span);

                 setTimeout(function(){
                      $span.remove();
                 },800);

                 flag=false;
                 return flag;
            }

        });

        return flag



    });


</script>



</body>
</html>
View Code

 

 

 

 

　　

 

jquery练习

标签：通过   bootstra   user   .sh   sbo   cccccc   adc   back   技术分享   

原文地址：https://www.cnblogs.com/feifeifeisir/p/9890871.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！