51 jquery 节点操作和 bootstrapt

jquery 和 bootstrapt
1.jquery each 函数

    1.each 循环方式一：
        可循环对象: var arr =["alex","deng","wang"] 或 var dic ={"name":"deng","age":18}
        $.each(可循环对象，function（index,value）{})

    2.each 循环方式二：
        $("选择器").each(function(){})
        例子：

        $("p").each(function () {
            if ($(this).html()=="yuan"){
               // return false   // 类似break
                return    // 类似continue
            }
            //console.log(this.innerHTML);    //   this 当前循环的dom对象
            console.log($(this).html());   //   this 当前循环的dom对象
            //$(this).html($(this).html()+"!")

        })

        3.节点操作
            1.创建节点
                $("<p>")
            2.添加节点
                $("父节点").append("<p></p>")  //可以直接添加标签字符串
                $("父节点").append($("<p>"))
            3.删除节点
                $("p").remove()
            4.替换节点
                $("旧节点").replaceWith("新节点")

            5.克隆节点
                $("p").clone()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
    <div class="box">
         <div class="item">
                <button>+</button><input type="text">
        </div>
    </div>


    <script>
        $("button").click(function () {
            var obj = $(this).parent().clone();
            //box最后添加一个孩子，在把button中的按钮的加号改为—
            $(".box").append(obj).children().last().children(":first").html("-").attr("class","rem");
        });
        $(".box").on("click",".rem",function () {
            $(this).parent().remove();
        })

    </script>


</body>
</html>

克隆节点事例


        4.获取和设置query（input）对象的value值
            1. $("input").val() //获取属性值
            2. $("input").val("值") //设置属性值 

　　　　　　　　$("td").html("<input type ='text'>")  //可以直接    替换的作用，标签替换文本      便签《======》文本
　　　　　　　　 

        5.轮播图中涉及的知识点：
            1.定时器操作：
                设置定时器 var ID = setIntval(GO_R,1000); //自动轮播的时候开启定时器
                清除定时器 clearInval(ID)  // 鼠标悬停在大框上时，清除定时器，移开时又开起定时器
                该处用到 .hover 事件，接两个函数，第一个函数为鼠标在其上要进行的操作，第二个函数为鼠标移开时要进行的操作
                      // 停止定时器 .hover 事件  括号中接两个函数
                        $(".outer").hover(function(){},function(){})

                        $(".outer").hover(function () {
                            console.log(123);// 暂停定时器
                            clearInterval(ID)
                        },function () {
                            ID=setInterval(GO_R,2000);
                        })

            2.  淡入淡出

                fadeIn(时间) ：淡入
                fadeOut(时间)：淡出
                $("li").stop():表示停下之前的操作，直接跳到当前的操作。主要是防止用户连续点击后，图片跳转不过来

                    $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);//淡入或淡出经过一秒完成
                    $(".num li").eq(index).addClass("active").siblings().removeClass("active")

            3.$(this).index() 获取索引值，鼠标放在li小圈上，可以用
                $(".num li").mouseover(function () {
                    console.log($(this).index());
                    $(".img li").eq($(this).index()).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                    $(".num li").eq($(this).index()).addClass("active").siblings().removeClass("active")
                    index=$(this).index()
                })


二.bootstrapt
    1.注意事项：
        1. bootstrapt 是基于jquery的，所有在导入bootstrapt 文件时，需要先导入jquery
        2.bootstrapt 中文文档地址：https://v3.bootcss.com

    2.Bootstrapt 尺寸控制
        1.宽度的控制
            栅格系统 ：需要用层div,外层设置class ="row" 属性，内层div 设置class ="col-md-num"属性，内层div装input标签
                <div class="row">
                  <div class="col-xs-2">
                    <input type="text" class="form-control" placeholder=".col-xs-2">
                  </div>
                  <div class="col-xs-3">
                    <input type="text" class="form-control" placeholder=".col-xs-3">
                  </div>
                  <div class="col-xs-4">
                    <input type="text" class="form-control" placeholder=".col-xs-4">
                  </div>
                </div>

        2.高度
        
        3.大小的控制
            -lg , -md ,-sm , -xs
            <input type="button" class="btn btn-danger btn-xs" value="anwo">
            <input type="button" class="btn btn-danger btn-sm" value="anwo">
            <input type="button" class="btn btn-danger btn-md" value="anwo">
            <input type="button" class="btn btn-danger btn-lg" value="anwo">

    3.颜色控制
        文本颜色  text-muted , -primary ,-success ,-info ,-warning, -danger
        情境背景色： bg-primary, bg-success, -info,-warning,-danger
        按钮色 ：btn-primary  ,  ......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <style>

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

        #box{

          padding-top:50px;
        }

       .add{
           margin:20px 0;
       }

        td{
            width: 15%;
        }

    </style>
</head>
<body>




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

        <div class="col-md-10 col-lg-offset-1" 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>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>薪水</th>
                    <th>操作</th>
                </tr>

                <tr>
                    <td>1</td>
                    <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>2</td>
                    <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>");
             var l=$("tr").length;
             $tr.append("<td>"+l+"</td>")
             $(".add_form :text").each(function(){

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


             $handle="<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.append($handle);

             return $tr
         }

         // 添加按钮

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



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

             var $tr=createTr();

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

             $(".add_form :text").val("");
         });

         // 删除按钮
         $("table").on("click",".del",function(){
            $(this).parent().parent().nextAll().children(":first").each(function () {
                $(this).html(parseInt( $(this).html())-1)
            });
            $(this).parent().parent().remove();

         });

         //编辑按钮

         $("table").on("click",".edit",function(){

             $(this).attr("class","btn btn-warning btn-sm keep").html("保存");

             console.log($(this).parent().prevAll(":lt(4)"));
             $(this).parent().prevAll(":lt(4)").each(function () {
                 let val=$("<input type='text' class='edit_input'>").val($(this).html())
                 $(this).html(val)
             })



         });

         /*
         $("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();
             });

          })

          */
         // 保存事件
          $("table").on("click",".keep",function(){
              $(this).parent().prevAll(":lt(4)").each(function () {
                 let val=$(this).children("input").val();
                 $(this).html(val)
             });
              $(this).attr("class","btn btn-info btn-sm edit").html("编辑");


          });

          /*
          $("table").on("blur",".edit_input",function(){
              console.log(">>>",$(".edit_input").parent())

              $(this).parent().parent().find(".keep").attr("class","btn btn-info btn-sm edit").html("编辑");
              $(".edit_input").parent().each(function () {
                 let val=$(this).children("input").val();
                 $(this).html(val)
              });

          })

          */



</script>




</body>
</html>

表格的增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            margin: 100px auto;
            width: 70%;


        }

        ul{
            list-style: none;
            background-color: gray;
            height: 40px;
            line-height: 40px;
        }
        ul li{
             display: inline-block;
             width: 80px;
             margin-left: 40px;
        }
        .content{
            margin-top: -15px;
        }
        .content div{
            height: 200px;
            background-color: lightgoldenrodyellow;
        }

        .active{
            background-color: #e4393c;
            color: white;
            text-align: center;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>


<div class="box">
    <ul>
        <li rel="introduce" class="active"> 商品介绍</li>
        <li rel="after-sale"> 售后</li>
        <li rel="comment"> 评价</li>
    </ul>

    <div class="content">
        <div class="introduce">商品介绍....</div>
        <div class="after-sale hide">售后....</div>
        <div class="comment hide">评价....</div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    /*
    $("ul li").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          let val=$(this).attr("rel");
         $("."+val).removeClass("hide").siblings().addClass("hide");
    });

    */

    // JS版本

    let lis=document.getElementsByTagName("li");
    for (var i=0;i<lis.length;i++){
        lis[i].onclick=function () {
            this.classList.add("active");

             let val=this.getAttribute("rel");
             let rel2=document.getElementsByClassName(val)[0];
             rel2.classList.remove("hide");

              for (var j=0;j<lis.length;j++){
                 if(lis[j]!=this){
                     //  去除样式
                     lis[j].classList.remove("active");
                     // 隐藏内容
                     let val=lis[j].getAttribute("rel");
                     let rel_sib=document.getElementsByClassName(val)[0];
                     rel_sib.classList.add("hide");

                 }
             };


        }
    }




</script>
</body>
</html>

tab栏 jquery 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <style>
        .outer{
            margin: 100px auto;
            width: 590px;
            height:470px ;
            border: solid red 1px;
            position: relative;
        }

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

        }

        .num {
            width: 100%;
            position: absolute;
            left: 40px;
            bottom: 20px;
            list-style: none;
        ;}
        .num li{
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: gray;
            margin-left: 40px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
        }

        .btn{
            position: absolute;
            top: 50%;
            width: 60px;
            height: 90px;
            background-color: darkgray;
            font-size: 36px;
            text-align: center;
            line-height: 70px;
            margin-top: -45px;
            opacity: 0.4;

        }
         .btn:hover{
             opacity: 1;
         }

        .left{
            left:0;
        }
        .right{
            right:0
        }

        .hide{
            display: none;
        }
        .active{
            background-color: red!important;
        }

    </style>

</head>
<body>


<div class="outer">
      <ul class="img">
          <li><a href=""><img src="img/1.jpg" alt=""></a></li>
          <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li>
          <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li>
          <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li>
          <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li>
      </ul>

    <ul class="num">

    </ul>

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


<script>
    //  动态添加num li
    let img_num=$("ul.img li").length;
    let s
    for(var i=0;i<img_num;i++){
        if (i==0){
            s="<li class='active'></li>"
        }else{
            s="<li></li>"
        }
        $(".num").append(s)
    }

    // 自动轮播
    var ID=setInterval(GO_R,2000);
    var index=0;
    function GO_R() {
        if(index==img_num-1){
            index=-1;
        }
        index++;
        $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".num li").eq(index).addClass("active").siblings().removeClass("active")
    }

       function GO_L() {
        if(index==0){
            index=img_num;
        }
        index--;
         $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".num li").eq(index).addClass("active").siblings().removeClass("active")
    }
    // 停止定时器
    
    $(".outer").hover(function () {
        console.log(123)// 暂停定时器
        clearInterval(ID)
    },function () {
        ID=setInterval(GO_R,2000);
    })
    
    //  手动轮播
    
    $(".right").click(function () {
        GO_R()
    });
     $(".left").click(function () {
        GO_L()
    })
    
    // 悬浮显示
    
    $(".num li").mouseover(function () {
        console.log($(this).index());
        $(".img li").eq($(this).index()).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".num li").eq($(this).index()).addClass("active").siblings().removeClass("active")
        index=$(this).index()
    })



</script>

</body>
</html>

轮播图定时器 fadeIn/fadeOut

51 jquery 节点操作和 bootstrapt

猜你喜欢