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/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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/bootstrap@3.3.7/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的更多相关文章

  1. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  2. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  3. 第四章 jQuery节点操作

    1.DOM操作分为三类:(1)DOM Core:任何一种支持DOM的编程语言都可以使用用它如:getElementById()(2)HTML-DOM:用于处理HTML文档,如document,form ...

  4. JQuery --- 第五期 (JQuery节点操作)

    学习笔记 1.JQuery添加节点相关方法 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. jquery节点操作

    很久没有jquery写东西了,最近使用jquery的时候发现很多节点的操作都不太熟悉了,于是就进行了一个小小的总结. 创建节点:var dom=$('<div></div>') ...

  6. jquery 节点操作大全

    $para.attr("title"); 实例: <script type="text/javascript"> //<![CDATA[ $( ...

  7. jQuery 节点操作（创建 插入 删除 复制 替换 包裹）

    一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...

  8. jQuery——节点操作

    创建节点 1.$():创建一个li标签 $("<li class='aaa'>我是li标签</li>") 2.html():创建一个li标签并同时添加到ul ...

  9. 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON

    一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...

随机推荐

  1. 20165207 Exp4 恶意代码分析

    目录 1.实验内容 1.1.系统运行监控 1.1.1.使用命令行创建计划任务 1.1.2.使用命令行借助批处理文件创建计划任务 1.1.3.分析netstat计划任务的最终结果 1.1.4.安装配置s ...

  2. 20165310 学习基础和C语言基础调查

    学习基础和C语言基础调查 做中学体会 阅读做中学之后,了解老师关于五笔练习.减肥.乒乓和背单词的经历,不禁联想到自己学古筝的经历. 成功的经验 兴趣 我其实小时候学过一段时间古筝,但是那时候是因为父母 ...

  3. Eclipse给方法或者类添加自动注释

    自动生成注释: 在团队开发中,注释是必不可少的,为了是自己的注释看起来更加优雅,注释的格式应该统一,我们可以使用Eclipse注释模板自动生成注释. 具体操作如下: 打开注释模板编辑窗口:Window ...

  4. jquery hover最后解决 - 不再疑惑 - 例子在这里

    hover具有动画累计的bug, 可以使用 stop 或 filter(:not(:animated))来消除, 但是, 即使这样, 当鼠标反复滑入或滑出的时候, 虽然没有动画累计的问题, 但是 下面 ...

  5. 2018 leetcode

    2018-8-6 Lowest Common Ancestor of a Binary Tree(二叉树) Merge Intervals(排序) 2018-8-7 Maximal Square (动 ...

  6. POJ 3164 Command Network（最小树形图模板题+详解）

    http://poj.org/problem?id=3164 题意: 求最小树形图. 思路: 套模板. 引用一下来自大神博客的讲解:http://www.cnblogs.com/acjiumeng/p ...

  7. BZOJ 1006: [HNOI2008]神奇的国度（弦图染色）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1006 题意: 思路: 这个就是弦图染色问题,弦图啥的反正我也不懂,具体看论文https://wenk ...

  8. mysql 对比两个表的一致性

    -- A和B两个表 数据是否一致select 自定义 from A left join B on A.id = B.id where B.id is null 注释:这样查询的结果是A表中有而B表中没 ...

  9. java编程内容之开始

    java应用程序开发应该掌握的各方面技术 1.初识java,熟悉Eclipse开发工具 2.java语言基础 3.流程控制,数组,字符串,类与对象 4.接口,继承与多态,类的高级特性 5.Java集合 ...

  10. 【Python】【内置函数】【bytes&bytearray&str&array】

    [bytes] 英文文档: class bytes([source[, encoding[, errors]]]) Return a new “bytes” object, which is an i ...