jQuery&ES6&Bootstrap

jQuery 2021-06-11

前端

jQuery

jQuery介绍

jQuery由美国人John Resig（约翰·莱西格）于2006年创建

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

它的设计思想是write less,do more

jQuery能做什么?

1、访问和操作DOM元素

2、控制页面样式

3、对页面事件进行处理

4、扩展新的jQuery插件

5、与Ajax技术完美结合

6、jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

7、jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

jQuery的优势

1、体积小，压缩后只有100KB左右

2、强大的选择器

3、出色的DOM封装

4、可靠的事件处理机制

5、出色的浏览器兼容性

jQuery下载

jQuery官网：http://jQuery.com

jQuery使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突。在页面中使用传统引入js文件的方式引入即可

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

基本语法

<script> $(selector).action(); </script>

说明：

1、工厂函数 $() ：将DOM对象转化为jQuery对象

2、选择器 selector：获取需要操作的DOM 元素（用法基本上和css一致 ）

3、方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”

<body>
    <p>hello,jQuery!</p>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        alert($("p").text());
    </script>
</body>

jQuery对象与DOM对象

1、DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

2、DOM对象转jQuery对象

3、jQuery对象转DOM对象

<body>
    
    <p id="title">拉勾网</p>

    <script src="js/jquery-3.4.1.min.js"></script>
    
    <script>
        // js方式获得dom对象
        // alert(document.getElementById("title").innerHTML);

        // jQuery方式获得dom对象
        // alert($("p").html());

        var jsDom = document.getElementById("title");
        var jqDom = $("p");

        // alert(jsDom);
        // alert(jqDom);

        //alert(jsDom.html());    // 使用js对象,调用jq的函数，报错，混搭不允许

        // js对象调用jq的方法，必须进行对象的转换
        // js对象-->转换-->jq对象
        jqDom = $(jsDom);
        // alert(jqDom.html());

         // jq对象-->转换-->js对象
         jsDom = jqDom.get((0));
         alert(jsDom.innerHTML);
    </script>
</body>

选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

名称语法构成描述示例
标签选择器element根据给定的标签名匹配元素$(“h2” )选取所有h2元素
类选择器.class根据给定的class匹配元素$(" .title")选取所有class为title的元素
ID选择器#id根据给定的id匹配元素$(" #title")选取id为title的元素
并集选择器selector1,selector2,…,selectorN将每一个选择器匹配的元素合并后一起返回$(“div,p,.title” )选取所有div、p和拥有class为title的元素
交集选择器element.class或element#id匹配指定class或id的某元素或元素集合$(“h2.title”)选取所有拥有class为title的h2元素
<body>
    <p>中国</p>
    <p>武汉</p>
    <p class="jy">加油</p>
    <p id="wan">祖国万岁</p>
    <h3 class="jy">祖国万岁</h3>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        // $("p").css("color","red");  // 标签选择器，获得所有的p
        // $(".jy").css("color","red"); // 类选择器
        // $("#wan").css("color","red");   // ID选择器，更具备唯一性
        // $(".jy,#wan").css("color","red");  // 并集选择器，.jy和#wan
        $("h3.jy").css("color","red");        // 交集选择器,既是h3标签，又拥有.jy的元素
    </script>  
</body>
层次选择器
名称语法构成描述示例
后代选择器ancestor descendant选取ancestor元素里的所有descendant（后代）元素$("#menu span" )选取#menu下的元素
子选择器parent>child选取parent元素下的child（子）元素$(" #menu>span" )选取#menu的子元素
相邻元素选择器prev+next选取紧邻prev元素之后的next元素$(" h2+dl " )选取紧邻元素之后的同辈元素
同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$(" h2~dl " )选取元素之后所有的同辈元素
<body>

    <h3>000</h3>
    <div id="x">
        111
        <p>p1</p>
        <div>
            <p>p2</p>
        </div>
    </div>
    <h3>222</h3>
    <h3>333</h3>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        // $("#x p").css("color","red");   // 后代选择器，忽略层级
        // $("#x>p").css("color","red");   // 子选择器，只负责子集
        // $("#x+h3").css("color","red");   // 相邻选择器，下一个紧邻的兄弟h3
        $("#x~h3").css("color","red");   // 同辈选择器，下面的所有兄弟h
    </script>
</body>
属性选择器
名称语法构成描述示例
属性选择器[attribute]选取包含给定属性的元素$(" [href]" )选取含有href属性的元素
[attribute=value]选取等于给定属性是某个特定值的元素$(" [href =’#’]" )选取href属性值为“#”的元素
[attribute !=value]选取不等于给定属性是某个特定值的元素$(" [href !=’#’]" )选取href属性值不为“#”的元素
[attribute^=value]选取给定属性是以某些特定值开始的元素$(" [href^=‘en’]" )选取href属性值以en开头的元素
[attribute$=value]选取给定属性是以某些特定值结尾的元素 ( " [ h r e f (" [href ("[href=’.jpg’]" )选取href属性值以.jpg结尾的元素
[attribute*=value]选取给定属性是以包含某些值的元素$(" [href* =‘txt’]" )选取href属性值中含有txt的元素
[s1] [s2] [sN]选取满足多个条件的复合属性的元素$(“li[id][title=新闻]” )选取含有id和title属性为新闻的< li>元素
<body>

    <a href="www.lagou.com">拉勾网</a>
    <a href="www.sina.com.cn">新浪网</a>
    <a href="http://www.163.com">网易</a>
    <p href="x">哈哈1</p>
    <p href="x" title="x">哈哈2</p>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        // $("[href]").css("color","red"); // 选取拥有href属性的元素
        // $("[href='x']").css("color","red"); // 选取拥有href=x的元素
        // $("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
        // $("[href^='www']").css("color","red"); // 选取href属性www开头的元素
        // $("[href$='com']").css("color","red"); // 选取href属性com结尾的元素
        // $("[href*='a']").css("color","red");    // 选取href属性包含a的元素
        $("p[href][title='x']").css("color","red"); // 选取拥有href属性和包含title=x的元素
    </script>
</body>
过滤选择器
语法构成描述示例
:first选取第一个元素$(" li:first" )选取所有元素中的第一个元素
:last选取最后一个元素$(" li:last" )选取所有元素中的最后一个元素
:even选取索引是偶数的所有元素（index从0开始）$(" li:even" )选取索引是偶数的所有元素
:odd选取索引是奇数的所有元素（index从0开始）$(" li:odd" )选取索引是奇数的所元素有
:eq(index)选取索引等于index的元素（index从0开始）$(“li:eq(1)” )选取索引等于1的元素
:gt(index)选取索引大于index的元素（index从0开始）$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)选取索引小于index的元素（index从0开始）$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）
<body>

    <h2 id="h2#x">修仙小说</h2>
    <ul>
        <li>凡人修仙传</li>
        <li>遮天</li>
        <li>神墓</li>
        <li>残袍</li>
        <li>大主宰</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        // $("li:first").css("color","red");   // 第一个li
        // $("li:last").css("color","red");    // 最后一个li
        // $("li:even").css("color","red");    // 偶数行的li
        // $("li:odd").css("color","red");     // 奇数行的Li
        // $("li:eq(1)").css("color","red");   // 下标为1的li
        // $("li:gt(3)").css("color","red");   // 下标大于3的li
        // $("li:lt(3)").css("color","red");   // 下标小于3的li
        $("#h2\\#x").css("color","red");       // 使用转义字符
    </script>
</body>

事件

鼠标事件
方法描述执行时机
click( )触发或将函数绑定到指定元素的click事件单击鼠标时
mouseover( )触发或将函数绑定到指定元素的mouse over事件鼠标移过时
mouseout( )触发或将函数绑定到指定元素的mouse out事件鼠标移出时
<body>
    <img src="img/1.jpg" width="200px">
    <img src="img/1.jpg" width="200px">
    <img src="img/1.jpg" width="200px">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("img").click( function(){
            // 点击换照片
            $(this).attr("src","img/2.jpg");    // this就是事件触发的源头
        } );

        $("img").mouseover(function(){      // 移动到元素上
            $(this).css("border","2px solid red");
        });
        $("img").mouseout(function(){       // 离开元素
            $(this).css("border","2px solid white");
        });
    </script>
</body>
键盘事件
方法描述执行时机
keydown( )触发或将函数绑定到指定元素的keydown事件按下键盘时
keyup( )触发或将函数绑定到指定元素的keyup事件释放按键时
<body>   
    <input>
    <h3></h3>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("input").keyup(function(){
            var str = $(this).val();    // 获取框中的值
            $("h3").text(str);          // 将h3元素中的文本内容更改为str
        });
    </script>
</body>
表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件

方法描述执行时机
focus( )触发或将函数绑定到指定元素的focus事件获得焦点
blur( )触发或将函数绑定到指定元素的blur事件失去焦点
<body>    
    <form action="">
        <p>账号：<input id="a" value="请输入账号..."></p>
        <p>电话：<input id="b"></p>
    </form>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#a").focus(function(){
            // 获得焦点(激活/点击一下)
            $(this).val("");
        });

        // 失去焦点(未激活/未点击)
        $("#a").blur(function(){
            $(this).val("请输入账号...");
        });
    </script>
</body>
鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<body>
    
    <img src="img/3.jpg" wdth="400px">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("img").hover(
            function(){
                $(this).css("border","5px solid red");
            },
            function(){
                $(this).css("border","5px solid white");
            }
            );
    </script>
</body>
连续点击复合事件

toggle()除了可以模拟鼠标的连续单击事件

<body>  
    <h2>修仙小说</h2>
    <ul>
        <li>凡人修仙传</li>
        <li>遮天</li>
        <li>神墓</li>
        <li>残袍</li>
        <li>大主宰</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("h2").click(function(){
            $("ul").toggle();   // 连续点击，实现ul的可见和隐藏进行切换
        });
    </script>
</body>
事件的动态绑定

对dom元素绑定事件的另一种写法

​ 绑定一个事件

​ 绑定多个事件

<body>
    <h2>点我试试</h2>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        /*
        $("h2").click(function(){
            alert("试试就试试");
        });
        */

        /*
        $("h2").on("click",function(){
            alert("点击了");
        });
        */

        // 可以绑定多种类型的事件
        $("h2").on("click mouseover",function(){
            alert("点我或移动上来");
        });
    </script>
</body>

元素的隐藏和显示

改变元素的宽和高（带动画效果）

​ show( speed )：显示

​ hide( speed )：隐藏

​ toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>

    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn2").click(function(){
            // $("div").hide('fast');
            $("div").hide(2000);
        });

        $("#btn1").click(function(){
            $("div").show('slow');
        });

        $("#btn3").click(function(){
            $("div").toggle(1000);
        });

    </script>
</body>
改变元素的高（拉伸效果）

​ slideDown( speed ) ：显示

​ slideUp( speed )：隐藏

​ slideToggle( speed )等价于slideDown+slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn2").click(function(){
            $("div").slideUp(1000); // 向上收缩
        });

        $("#btn1").click(function(){
            $("div").slideDown(1000); 向下伸展
        });

        $("#btn3").click(function(){
            $("div").slideToggle(1000); // 切换
        });
    </script>
</body>
不改变元素的大小（淡入淡出效果）

​ fadeIn( speed ) 显示

​ fadeOut( speed ) 隐藏

​ fadeToggle( speed ) 等价于fadeIn+fadeOut动画

​ fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <button id="btn4">透明</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn2").click(function(){
            // $("div").hide('fast');
            // $("div").hide(2000);
            // $("div").slideUp(1000); // 向上收缩
            $("div").fadeOut(1000);	// 隐藏：淡出视线
        });

        $("#btn1").click(function(){
            // $("div").show('slow');
            // $("div").slideDown(1000); 向下伸展
            $("div").fadeIn(1000);	// 显示：映入眼帘
        });

        $("#btn3").click(function(){
            // $("div").toggle(1000);
            // $("div").slideToggle(1000); // 切换
            $("div").fadeToggle(1000);	// 切换
        });
        
        $("#btn4").click(function(){
            $("div").fadeTo(1000,0.5);	// 1秒捏编程50%透明度
        });
    </script>
</body>
链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起

例如：点击一次按钮，让div完成4个指定动作

  1. 背景变粉
  2. 字体变绿
  3. 收缩
  4. 拉伸
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
        color: white;
        font:3em;
    }
</style>
<body>
    <button>试试</button>
    <div>hello</div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
        });
    </script>
</body>

DOM和CSS的操作

属性函数

attr( “属性” ); 获得元素的属性值

​ attr( “属性” , “新值” ); 修改元素的属性值

​ attr( 样式参数 ) ：样式参数可以写成json格式

<body>
    <button id="btn1">点我试试</button>
    
    <img src="img/1.jpg" title="美女大图" width="300px">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            $("img").attr("src","img/2.jpg");
            $("img").attr("title","高清无码");
            $("img").attr({windth:"200",height:"200"});
        });
    </script>
</body>

val() ; 获得表单元素中的value值

​ val(“x”) 修改表单元素中的value值

html(); 获得元素中的内容（标签+文本

​ html(“x”) 修改元素中的内容（标签+文本）

text(); 获得元素中的文本

​ text(“x”) 修改元素中的文本

<body>
    <button>试试</button>
    <hr>
    <input id="username">

    <div>
        <h1><i>中国加油！</i></h1>
    </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // alert($("input").val()); // input框中的值
            // $("input").val("哈哈哈");   // 修改input框中的值

            // alert($("div").html()); // 获得div中的内容（包含标签信息）
            // alert($("div").text())     // 获得div中的内容（不包含标签信息，只获得文本信息）
            $("div").text("祖国万岁！");   // 修改div中的内容(全部内容都覆盖)
        });
    </script>
</body>
样式函数

css( “属性”); 获得该属性值

css( “属性”,“值”); 设置属性的值

css( { json} ); 设置多个属性的值

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            var w = $("div").css("width");  //获取css属性，width的值

            // 1.一个键值对
            // $("div").css("background-color","pink");

            // 2.链式编程
            // $("div").css("background-color","pink").css("border-radius","50%");

            // 3.json为参数
            $("div").css({
                opacity:"0.4",
                background:"orange",
                borderRadius:"50%"
            });
        });
    </script>
</body>

width(); 获得元素的宽度

width( number ); 修改元素的宽度

height(); 获得元素的高度

height( number ); 修改元素的高度

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            var w = $("div").width();   // （无参）获取宽度
            var h = $("div").height();  // （无参）获取高度
            // alert("宽："+w+"px"+"高："+h+"px");
            $("div").width("300");  // （传参）修改宽度
            $("div").height("300"); // （传参）修改高度
        });
    </script>
</body>
类样式函数

addClass(); 为元素添加类样式

removeClass(); 将元素的类样式移除

toggleClass(); 样式的切换（有->无，无->有）

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }

    .a{
        background: palevioletred;
        border-radius: 50%;
    }

    .b{
        border: 5px dashed darkcyan;
        opacity: 0.6;
    }

    .cn{
        background: #000;
        color: #fff;
        font-family: 华文彩云;
    }
</style>
<body>
    <button id="btn1">试试</button>
    <button id="btn2">取消透明度</button>
    <button id="btn3">样式切换</button>
    <hr>
    <div></div>
    <h1>中华人民共和国，万岁！</h1>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            // $("div").addClass("a");
            $("div").addClass("a b");
        });

        $("#btn2").click(function(){
            $("div").removeClass("b");
        });

        $("#btn3").click(function(){
            $("h1").toggleClass("cn");
        });
    </script>
</body>
节点操作

创建节点

​ 工厂函数$()用于获取或创建节点

插入节点

​ 插入子节点

语法功能
append(content)$(A).append(B)表示将B追加到A中
appendTo(content)$(A).appendTo(B)表示把A追加到B中
prepend(content)$(A). prepend (B)表示将B前置插入到A中
prependTo(content)$(A). prependTo (B)表示将A前置插入到B中

​ 插入同辈节点

语法功能
after(content)$(A).after (B)表示将B插入到A之后
insertAfter(content)$(A). insertAfter (B)表示将A插入到B之后
before(content)$(A). before (B)表示将B插入至A之前
insertBefore(content)$(A). insertBefore (B)表示将A插入到B之前

替换节点

​ replaceWith()

​ replaceAll()

复制节点

​ clone()

删除节点

​ remove()删除整个节点

​ empty()清空节点内容

<body>

    <input> <button id="add">添加</button>

    <ul>
        <li>金瓶梅</li>
        <li>貂蝉往事</li>
        <li>东京热不热</li>
    </ul>
    
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#add").click(function(){
            var bookname = $("input").val();
            var newli = $("<li>"+bookname+"</li>"); // 通过工厂函数，创建新的li节点

            // 插入子节点
            // $("ul").append(newli);  // newli添加到ul后面
            // newli.appendTo("ul");  // newli添加到ul后面

            // $("ul").prepend(newli);   // newli添加到ul前面
            // newli.prependTo("ul");
 
            // 插入同辈节点
            // $("li:last").after(newli);  // newli添加到最后的li后面
            // newli.insertAfter("li:last");
            // $("li:last").before(newli);    // newli添加到最后的li前面
            // newli.insertBefore("li:last");

            // 替换节点
            // $("li:eq(1)").replaceWith(newli);   // 将第二个li替换成newli
            // newli.replaceAll("li:eq(1)");

            // 复制节点
            // $("li:first").clone().insertAfter("li:last");   // 复制第一个li，并插入到最后一个li的后面

            //  删除节点
            // $("li:eq(1)").empty();  // 清空了节点上的文本（节点没有消失）
            $("li:eq(1)").remove();    // 删除节点
        });
    </script>
</body>

遍历节点

祖先元素

用于向上遍历 DOM 树的方法

​ parent() 返回被选元素的直接父元素，仅仅是上一级 （找爸爸）

​ parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

<body>  
    <p><button>测试</button></p>
    <ul>
        <li>a</li>
        <li>
            <b>b</b>
        </li>
        <li>c</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // var x = $("b").parent().html();      // 找爸爸
            // var x = $("b").parents("ul").html(); // 找祖宗 ul
            var x = $("b").parents("body").html();   // 找祖宗 body
            alert(x);
        });
    </script>
</body>
同辈元素

next() 获取紧邻匹配元素之后的元素

prev() 获取紧邻匹配元素之前的元素

siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

<body>  
    <p><button>测试</button></p>
    <p>p1</p>
    <ul>
        <li>a</li>
        <li>
            <b>b</b>
        </li>
        <li>c</li>
    </ul>
    <p>p2</p>
    <p id="x">p3</p>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // var x = $("ul").next().html();  // 紧邻的下一个元素
            // var x = $("ul").prev().html();  // 紧邻的上一个元素
            // var x = $("ul").siblings("#x").html();  // 所有兄弟中,id=x的

            var arr = $("ul").siblings();  // ul的所有兄弟,1个button,3个p,2个script
            for(var i=0;i<arr.length;i++){
                alert(arr[i]);
            }
        });
    </script>
</body>
后代元素

后代是子、孙、曾孙等等

​ children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”

<body>
    <button>测试</button>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // var x = $("ul").children().text();  // 所有子节点：abc
            var x = $("ul").children("li:first").text();   // ul中的第一个子节点
            alert(x);
        });
    </script>
</body>

​ find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代

<body>
    <button>测试</button>
    <ul>
        <li>盘古</li>
        <li>蚩尤</li>
        <li>刑天
            <p>龚工</p>
        </li>
        <h3>祝融</h3>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // var x = $("ul").find("p").text();   // ul中查找p元素，忽略层级
            // var x = $("ul").find("h3").text();   // ul中查找h3元素，忽略层级
            var x = $("ul").find().text();   // 找什么？不知道
            alert(x);
        });
    </script>
</body>
元素的过滤

first()：过滤第一个元素

last()：过滤最后一个元素

eq(index)：过滤到下标为index的元素

not()：除了什么之外的元素

is()：返回布尔，判断是不是这种元素

<body>
    <button>测试</button>
    <ul>
        <li>盘古</li>
        <li>蚩尤</li>
        <li>刑天</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // var x = $("li").first().text(); // 第一个li
            // var x = $("li").last().text(); // 最后一个li
            // var x = $("li").eq(1).text(); // 下标为1的li
            // var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li
            var x = $("li").parent().is("ul"); // 返回布尔值，li的父节点是不是ul
            alert(x);
        });
    </script>
</body>

案例

手风琴特效

<style>
    dd{
        display: none;  /*隐藏元素*/
    }
</style>
<body>
    <nav>
        <header>拉勾网</header>
        <ul>
            <li>
                <dl>
                    <dt>求职</dt>
                    <dd>1.简历</dd>
                    <dd>2.面试</dd>
                    <dd>3.入职</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>教育</dt>
                    <dd>1.看视频</dd>
                    <dd>2.做作业</dd>
                    <dd>3.24小时在线辅导</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>3w创业</dt>
                    <dd>1.帮助小企业</dd>
                    <dd>2.头脑风暴</dd>
                    <dd>3.赚钱了</dd>
                </dl>
            </li>
        </ul>
    </nav>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("nav dt").click(function(){
            // 其他的dd全部都闭合上,除了自己的兄弟
            $("dd").not($(this).siblings()).slideUp(500);
            // 自己的兄弟进行切换，显示闭合上，闭合的显示出来
            $(this).siblings().slideToggle(500);
            
        });
    </script>
</body>

购物车结算

<style>
    .jian,.jia{
        border: 1px solid #999;
        display: inline-block;  /*超链接a是行内元素，只能转换成块元素，才能改变宽和高*/
        width: 20px;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }
</style>
<body>
    <table border="1" cellspacing="0" width=400px>
        <tr>
            <td>商品编号</td>
            <td>名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>总价</td>
        </tr>
        <tr>
            <td>1</td>
            <td>炸香肠</td>
            <td>3</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>恐龙</td>
            <td>1000</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>1000</td>
        </tr>
    </table>
    
    <p style="width: 500px;text-align: right;">
        总价：<b style="color: red;">xxx</b> <button>提交</button>
    </p>
</body>

$(".jia").click(function(){
    var i = $(this).prev().text();  // 获得原来的商品数量
    // alert(i);
    i++;
    $(this).prev().text(i);         // 现在的商品数量

    var price = $(this).parent().prev().text(); // 商品单价
    var zong = i*price; // 商品总价
    $(this).parent().next().text(zong); // 现在商品总价

    getTotal();
});

$(".jian").click(function(){
    var i = $(this).next().text();
    // alert(i);
    i--;

    if(i == 0){
        // 询问用户数量已经是0了，是否删除该商品
        if(confirm("是否删除该商品?")){
            $(this).parents("tr").remove();
        }
    }else{
        $(this).next().text(i);
    }
    

    var price = $(this).parent().prev().text(); // 商品单价
    var zong = i*price; // 商品总价
    $(this).parent().next().text(zong); // 现在商品总价

    getTotal();
});

// 计算所有商品总价
// function getTotal(){
//     var sum = 0;    // 总价钱
//     var arr = $("tr:not(tr:first)").find("td:last");
//     for(var i = 0;i<arr.length;i++){
//         sum += Number(arr[i].innerHTML);
//     }

//     $("b").text(sum);
// }

function getTotal(){
    var sum = 0;
    $("tr:not(tr:first)").find("td:last").each(function(){
        sum += Number($(this).text());
    });
    $("b").text(sum);
}

ES6

ECMAScript6 简介

​ ECMAScript 6.0（以下简称 ES6）是 JavaScript语言的下一代标准，在2015年6月正式发布。目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 和 JavaScript 的关系

1、1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准。

2、ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

3、因此，ECMAScript （宪法）和 JavaScript（律师） 的关系是，前者是后者的规格，后者是前者的一种实现。

ES6 与 ECMAScript 2015 的关系

1、2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指JavaScript 语言的下一个版本。

2、ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等。

搭建前端环境

Node 环境

什么是Node.js

​ Node.js就是运行在服务端的 JavaScript。

​ Node.js是脱离浏览器环境运行的JavaScript程序，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好

Node.js有什么用

​ 如果你是前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那Node.js是一个非常好的选择。

​ Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。

​ 当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

安装

1、下载

官网：https://nodejs.org/en/

中文网：http://nodejs.cn/

LTS：长期支持版本

Current：最新版

安装：Windows下双击点击安装——>Next——>finish

注意：

​ node-v14.5.0-x64.msi 最新版本，如果是win7系统的话，可能安装不了。

​ 如果是win7系统，安装node-v10.14.2-x64.msi这个版本

2、查看版本

在dos窗口中执行命令查看版本号

node -v

创建文件夹 lagou-node
用vscode打开目录，其目录下创建hello.js

console.log("hello,nodejs");

打开命令行终端：Ctrl + Shift + y

输入命令(tab键补齐)

node hello.js
服务器端应用开发（了解）

创建 node-server.js

const http = require("http");   // node中自带的require引入方法，http也是node中自带的服务对象
const { type } = require("os");
http.createServer(function(request,response){
    // 发出http请求的头部信息
    // http的状态码：200; ok
    // 请求的内容：text/plain
    response.writeHead(200,{"Content-type":"text/plain"});

    // 响应的数据 "hello,welcome!",此时并不支持中文（以后解决）
    response.end("hello,welcome!");
}).listen(8888);    // 监听端口

console.log("服务器已启动，请访问http://127.0.0.1:8888");

服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面

停止服务：ctrl + c

NPM环境

什么是NPM

​ NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于前端的Maven。

NPM工具的安装位置

node的环境在安装的过程中，npm工具就已经安装好了。

Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules

在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
使用npm管理项目

项目初始化

​ 全新创建一个目录，作为项目目录，使用dos命令进入此目录，输入命令

npm init
# 接下来是一堆项目信息等待着你输入，如果使用默认值或你不知道怎么填写，则直接回车即可。
# package name: 你的项目名字叫啥
# version: 版本号
# description: 对项目的描述
# entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
# test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
# git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地
址了）
# keywirds： 项目关键字（我也不知道有啥用，所以我就不写了）
# author: 作者的名字（也就是你叫啥名字）
# license: 发行项目需要的证书（这里也就自己玩玩，就不写了）

最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml，我们之后也可以根据需要进行修改。

上述初始化一个项目也太麻烦了，要那么多输入和回车。想简单点，一切都按照默认值初始化即可，ok，安排

npm init -y
修改npm镜像 和 存储地址

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像和存储地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org

#设置npm下载包时保存在本地的地址（建议英文目录）
npm config set prefix "D:\\repo_npm"

#查看npm配置信息
npm config list
npm install命令的使用
npm install jquery

使用 npm install 安装依赖包的最新版

模块安装的位置：项目目录\node_modules

安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本

同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的< dependencies>

jQuery版本有很多，上述命令下载的什么版本的？ 最新版

如果我的项目使用1.9.1版本进行开发的，通过npm安装的3.5.1版本太新，会导致项目失效，如何安装指定版本库？

npm install jquery@1.9.1

ES6基本语法

​ ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

let声明变量

与我们的JavaScript中var声明变量有什么区别？

1、作用域不同

{
    var a = 0;  // var声明的变量是全局变量
    let b = 0;  // let声明的变量是局部变量
}

console.log(a);
console.log(b); // b is not defined：b没有定义

2、声明次数不同

// var可以声明多次
// let只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4;  // Identifier 'n' has already been declared（语法错误：n已经声明过了）

console.log(m);
console.log(n);

3、声明与使用顺序不同

// var声明的变量会全局储存
// let声明的变量只能在执行后才储存
console.log(x); // 没有报错，输出：undefined
var x = "苹果";

console.log(y); // y is not defined(y没有定义)
let y = "香蕉";aaaaaaaaaaaaaaaaa

const声明常量

const 声明常量，为只读变量

​ 1.一旦声明之后，其值是不允许改变的

​ 2.一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）

const PI = 3.14;
PI = 3.1415;  // Assignment to constant variable.(声明的是常量)

console.log(PI);

解构赋值

解构赋值是对赋值运算符的扩展

它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

解构，顾名思义，是将集合型数据进行分解，拆分，把里面的值逐一遍历获取

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

数组解构
var arr = [1,2,3];

// 传统的js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);

// es6的解构
var [x,y,z] = arr;
console.log(x,y,z);
对象解构
var user = {
    username:"吕布",
    weapon:"方天画戟",
    horse:"赤兔马"
};

// 传统js
let mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名："+mingzi+",武器："+wuqi+",坐骑："+zuoji);

// es6的解构
let {username,weapon,horse} = user; // 注意：解构的变量名必须是对象中的属性
console.log("姓名："+username+",武器："+weapon+",坐骑："+horse);

模板字符串

模板字符串相当于加强版的字符串

用反引号 `,除了作为普通字符串，还可以用来定义多行字符串

还可以在字符串中加入变量和表达式

定义多行字符串

再见了，\n

let str = `hello,
你俩在哪呢？
心情不好，出来喝点啊！`;

console.log(str);
字符串插入变量和表达式

再见了，字符串的拼接用 +

let name = `吕布`;
let age = 24;

// 传统拼接字符串
var info1 = "我叫："+ name + ",我今年"+age+"岁！";
console.log(info1);

// es6拼接字符串
var info2 = `我叫：${name},我明年${age+1}岁！`;
console.log(info2);
字符串中调用函数
function test(){
    return "吃喝玩乐";
}

let str = `悲惨的人生，从${test()}开始`;
console.log(str);

声明对象简写

定义对象的时候，可以用变量名作为属性名

let name = `吕布`;
let age = 28;

// 传统
let user1 = {
    name:name,
    age:age
};
console.log(user1);

// es6新语法中的简写
let user2 = {name,age};
console.log(user2);

定义方法简写

// 传统
let user1 = {
    say : function(){
        console.log("大家好！");
    }
};

user1.say();

// es6
let user2 = {
    say(){
        console.log("大家好啊！");
    }
};

user2.say();

对象拓展运算符

拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

拷贝对象(深拷贝)

科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人

let user1 = {
    name:"项羽",
    age:34
};

let user2 = {...user1}; // 深拷贝（克隆）

console.log(user1);
console.log(user2);
合并对象

吞噬合并（两个对象合并成一个对象）

let user1 = {
    name:"项羽",
    age:34
};

let user2 = {head:"诸葛亮"};

let user = {...user1,...user2};

console.log(user);

函数的默认参数

形参处已声明，但不传入实参会怎样？

function test(name,age = 18){
    console.log(`我叫${name},我今年${age}岁`);
}

test("吕布",33);    // 我叫吕布,我今年33岁
test("貂蝉");       // 我叫貂蝉,我今年18岁
test("关羽",null);  // 我叫关羽,我今年null岁
test("马超","");    // 我叫马超,我今年岁
test("张飞",undefined); // 我叫张飞,我今年18岁

函数的不定参数

定义方法时，不确定有几个参数？

function test( ...arg ){
    console.log(`传入了${arg.length}个参数`);
    for(var i = 0; i<arg.length;i++){
        console.log(arg[i]);
    }
}

test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);

箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体

// 传统
var f1 = function(a){
    return a*10;
}

console.log( f1(10) );

// es6
var f2 = a=>a*10;
console.log( f2(20) );

// 当箭头函数有一个参数时，()可以省略
// 当箭头函数没有参数或者有多个参数，要用()括起来
// 当箭头函数的函数体有多行语句，用{}括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略{}，结果会自动返回

var f3 = (a,b) => {
    let sum = a+b;
    return sum;
}
console.log( f3(3,7) );

// 可以将f3进行简化
var f4 = (a,b) => a+b;
console.log( f4(11,22) );

Promise（了解）

setTimeout(()=>{
      console.log(1);
      setTimeout(()=>{
        console.log(2);
        setTimeout(()=>{
          console.log(3);
          setTimeout(()=>{
            console.log(4);
         },1000);
       },1000);
     },1000);
    },1000);

使用promise

next = n =>
    //Promise的构造函数接收一个参数，是函数，
    //并且传入两个参数：resolve(异步操作执行成功后的回调函数)，reject(异步操作执行失败后的回调函数)
    new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(n);
        }, 1000);
    });

next(1)
    .then(res => { // 成功
        console.log(res);
        return next(2); //在then方法中调用的next方法，一定要用return ，否则不会通过resolve把数据往下传递
    })
    .then(res => {
        console.log(res);
        return next(3);
    })
    .then(res => {
        console.log(res);
    })
    .catch(() => {  //处理失败：catch方法的第二个参数是失败的回调
        console.log("出错啦！");
    });

模块化

如果a.js文件中定义了5个方法，b.js文件中想使用a中的5个方法，怎么办？

java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程

将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块

每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

传统的模块化

创建user.js文件

function addUser(name){
    return `保存${name}成功！`;
}

function removeUser(id){
    return `删除${id}号成功！`;
}

// 声明模块并导出
/*
module.exports={
    sava:addUser,
    delete:removeUser
}
*/

// 声明模块并导出简写
module.exports={
    addUser,
    removeUser
}

test.js

let user = require("./user.js");    // 引入user模块

console.log( user );

// let result1 = user.sava("吕布");
// let result2 = user.delete(101);

let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);

console.log(result1);
console.log(result2);
ES6的模块化

user.js

let name = "老孙";
let age = 66;
let fn = function(){
    return `我是${name}!我今年${age}岁了！`;
}

// 声明模块并导出
export{
    name,
    age,
    fn
}

test.js

import {name,age,fn} from "./user.js"

console.log(name);
console.log(age);
console.log(fn);

运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置 ）

原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！

babel环境

babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持

安装babel客户端环境

创建新目录 lagou-babel，在终端中打开，运行命令：

npm install --global babel-cli

查看版本

babel --version

如果报错1：（win7系统中）

‘babel’ 不是内部或外部命令，也不是可运行的程序或批处理文件。（babel命令在当前系统中不被认可）

​ 由于babel是通过npm安装，所以babel会默认安装到 D:\repo_npm

​ 在 D:\repo_npm 这个目录下，进入dos命令，执行 babel --version， 如果是成功的，说明babel已经安装成功

​ 但是在vscode的终端中打不开，那么只可能是两个原因：

​ a.环境变量没有配置

​ 系统环境变量中 path中加入 ;D:\repo_npm;

​ 在任意位置进入dos窗口，babel --version可以了，说明环境变量配置成功

​ b.vscode关掉，重新以“管理员身份运行 ”

如果报错2：（win10系统中）

windows10默认禁止运行有危险的脚本，修改一下系统策略就好了

开始菜单-> Windows PowerShell (切记要以管理员身份运行)，输入代码

set-ExecutionPolicy RemoteSigned
安装转码器

1、创建lagou-babel专属目录，在其中初始化项目

npm init -y

2、创建babel配置文件 .babelrc ，并输入代码配置：

{
"presets": ["es2015"],
"plugins": []
}

3、安装转码器

npm install --save-dev babel-preset-es2015

4、转码

创建dist目录，用来存放转码后的文件

babel user.js --out-file .\dist\user.js
或
babel user.js -o .\dist\user.js

5、运行转码后的文件

node .\dist\test.js

ES6模块化的另一种写法

as的用法

user.js：如果你不想暴露模块当中的变量名字，可以通过as来进行操作：

let name = "老孙";
let age = 66;
let fn = function(){
    return `我是${name}!我今年${age}岁了！`;
}

// 声明模块并导出
export{
    name as a,
    age as b,
    fn as c
}

test.js

import {a,b,c} from "./user.js";

console.log(a);
console.log(b);
console.log(c());

也可以接收整个模块

test.js

import * as info from "./user.js";   // 通过*来批量接收，用as来指定接收的对象名字

console.log(info.a);
console.log(info.b);
console.log(info.c());
默认导出

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

/***********导出***************/
export default{
      name:"老孙",
      eat(){
        return "吃点啥！";
    }
}

/***********导入***************/
import p from "./person.js";
console.log( p.name, p.eat() );
重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，

为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

/***********student1.js***************/
export let name = "我是来自student1.js";
/***********student2.js***************/
export let name = "我是来自student2.js";

/***********test_student.js***************/
import {name as name1} from "./student1.js";
import {name as name2} from "./student2.js";

console.log(name1);	// 我是来自student1.js
console.log(name2);	// 我是来自student2.js

Bootstrap

bootstrap简介

什么是Bootstrap？

Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。

Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

为什么使用 Bootstrap？

移动设备优先：Bootstrap3起，框架包含了贯穿于整个库移动设备优先的样式

​ 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中

​ 也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件

浏览器支持：所有的主流浏览器都支持 Bootstrap

容易上手：只要具备HTML和CSS的基础知识，可以开始学习 Bootstrap

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

为开发人员创建接口提供了一个简洁统一的解决方案

包含了功能强大的内置组件，易于定制

提供了基于 Web 的定制

是开源的

下载与使用

中文官网：https://www.bootcss.com/

英文官网：http://getbootstrap.com

下载好，压缩包解压出来。就得到了bootstrap的资源文件了。

分别是css、js、font字体，全部放在项目的根目录即可

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉勾教育</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 100px;">

    <h1>hello,bootstrap!</h1>
    <button class="btn btn-primary">学习充电</button>
    <button class="btn btn-success">极速入职</button>
    
</body>
</html>

Bootstrap的使用

表格

和之前的表格相比，标签更丰富更加语义化，效果更佳美观

丰富的标签

< table > 为表格添加基础样式

表格**标题行**的容器元素（） 表格**主体**中的表格行的容器元素（） 表格行 默认的表格单元格 特殊的表格单元格，（居中和加粗的效果）。必须在 内使用 关于表格存储内容的描述或**总结**
好看的类样式

.table 为任意

添加基本样式 (只有横向分隔线)

.table-striped 在 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色

.table-bordered 为所有表格的单元格添加边框

.table-hover 在 内任一行启用鼠标悬停状态，鼠标悬停高亮突出显示

.table-condensed 让表格更加紧凑

情景色类样式

适合应用在、，

.active 激活效果（悬停颜色）

.success 表示成功或积极的动作

.info 表示普通的提示信息或动作

.warning 表示警告或需要用户注意

.danger 表示危险或潜在的带来的负面影响的动作

响应式表格

表格的父元素设置响应式，小于768px，出现边框

<body style="padding: 30px;">
    <table class="table table-responsive">
        <caption>经营产品大全</caption>
        <thead>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
        </thead>
        <tbody>
            <tr class="active">
                <td>产品1</td>
                <td>2021-1-1</td>
                <td>待发货</td>
            </tr>
            <tr class="success">
                <td>产品2</td>
                <td>2021-1-2</td>
                <td>已发货</td>
            </tr>
            <tr class="info">
                <td>产品3</td>
                <td>2021-1-3</td>
                <td>未付款</td>
            </tr>
            <tr class="warning">
                <td>产品4</td>
                <td>2021-1-4</td>
                <td>已退货</td>
            </tr>
            <tr class="danger">
                <td>产品5</td>
                <td>2021-1-5</td>
                <td>已退款</td>
            </tr>
        </tbody>
    </table>
</body>

表单

表单布局
默认布局
<body style="padding:100px;">
    <form>
        <div class="form-group">
            <label>邮箱</label>
            <input type="email" class="form-control" placeholder="请输入邮箱">
        </div>
        
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="请输入密码">
        </div>

        <div class="form-group">
            <button class="btn btn-primary">提交</button>
        </div>
    </form>
</body>
内联布局

让所有表单元素居于一行

注意：当小于768px时，会自动还原成移动端样式

<body style="padding:100px;">
    <form class="form-inline">
        <div class="form-group">
            <label>邮箱</label>
            <input type="email" class="form-control" placeholder="请输入邮箱">
        </div>
        
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="请输入密码">
        </div>

        <div class="form-group">
            <button class="btn btn-primary">提交</button>
        </div>
    </form>
</body>
表单控件
输入框
<form>
    <div class="form-group">
        <label for="">输入框</label>
        <input type="text" class="form-control" placeholder="请输入文本">
    </div>
</form>
文本框
<div class="form-group">
    <label for="">文本框</label>
    <textarea class="form-control" cols="30" rows="5"></textarea>
</div>
复选框

checkbox 默认

checkbox-inline 内联

<div class="checkbox">
    <label>
        <input type="checkbox"> 抽烟
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"> 喝酒
    </label>
</div>

<hr>

<div class="checkbox-inline">
    <label>
        <input type="checkbox"> 洗澡
    </label>
</div>
<div class="checkbox-inline">
    <label>
        <input type="checkbox"> 烫头
    </label>
</div>
复选按钮
<form>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox"> 音乐
        </label>
        <label class="btn btn-primary">
            <input type="checkbox"> 体育
        </label>
        <label class="btn btn-primary">
            <input type="checkbox"> 美术
        </label>
        <label class="btn btn-primary">
            <input type="checkbox"> 电脑
        </label>
    </div>
</form>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
单选框
<label class="radio">
    <input type="radio" name="sex"> 男
</label>
<label class="radio">
    <input type="radio" name="sex"> 女
</label>
<hr>
<label class="radio-inline">
    <input type="radio" name="gender"> 男
</label>
<label class="radio-inline">
    <input type="radio" name="gender"> 女
</label>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
单选按钮
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="gender"> 男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="gender"> 女
    </label>
</div>

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

按钮

<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">链接按钮</button>

按钮大小

<button class="btn btn-primary btn-lg">超大按钮（高清大屏台式机）</button>
<button class="btn btn-primary">大按钮（笔记本屏幕）</button>
<button class="btn btn-primary btn-sm">小按钮（平板）</button>
<button class="btn btn-primary btn-xs">超小按钮（手机）</button>

按钮状态

​ 激活状态：按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）;

​ 禁用状态：当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变;

<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default active">激活按钮</button>
<button class="btn btn-default" disabled>禁用按钮</button>

图片

.img-rounded：添加 border-radius:6px 来获得图片圆角

.img-circle：添加 border-radius:50% 来让整个图片变成圆形

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
    <img src="img/1.jpg" class="img-rounded" width="33%">
    <img src="img/1.jpg" class="img-circle" width="33%">
    <img src="img/1.jpg" class="img-thumbnail" width="33%">  
</body>

响应式图片

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
    <img src="img/1.jpg" class="img-responsive">
</body>

下拉菜单组件

<body style="padding: 30px;">
    <div class="dropdown">
        <button class="btn btn-primary" data-toggle="dropdown">拉勾教育 <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">前沿技术</a></li>
            <li><a href="#">名师制作</a></li>
            <li><a href="#">24小时导师</a></li>
        </ul>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

用法的关键核心

​ 1、外围容器使用 class="dropdown"包裹

​ 2、内部点击按钮事件绑定 data-toggle=“dropdown”

​ 3、菜单元素使用 class=“dropdown-menu”

分页组件

<body style="padding: 20px;">
    <ul class="pagination">
    <!-- <ul class="pager"> -->
        <li class="previous"><a href="#"> &laquo; </a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="next"><a href="#"> &raquo; </a></li>
    </ul>
</body>

栅格系统

bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子

当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gpfvkvdi-1622545592897)(E:\MarkDown\拉勾笔记\Bootstrap栅格参数表)]

显示屏幕的扩大和缩小

<style>
    .a{
        height: 50px;
        border: 1px solid red;
        background-color: #eeeeee;
    }
</style>
<body>
    <div class="container">
        <div class="row">

            <!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
            <!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
            <!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
            <!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->

            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>

            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>

            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6  a">x</div>
        </div>
    </div>
</body>

缩略图组件

配合响应式的栅格系统

<style>
    .a{
        height: 50px;
        border: 1px solid red;
        background-color: #eeeeee;
    }
</style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                </div>
            </div>
        </div>
    </div>
</body>

自定义内容

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption">
                        <h3>视频标题</h3>
                        <p>视频介绍：美女众多...</p>
                        <p>
                            <a href="#" class="btn btn-primary">试看</a>
                            <a href="#" class="btn btn-warning">购买</a>
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- 其余三个省略 -->
            
</body>

模态框组件

data-toggle=“modal” 触发类型:模态框modal

data-target="#myModal" 触发的节点

data-backdrop=“static” 点击黑灰色背景，不会关闭模态框

<body style="padding:20px;">

    <button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>

    <!-- 声明定义模态框组件 -->
    <div class="modal" id="myModal" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">友情提示</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">
                    服务器错误，请稍后再试！
                    <hr>
                    <img src="img/1.jpg" width="200px">
                    <hr>
                    <input type="text">
                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

案例d

首页轮播大图

1、大小屏幕自动适应,扩大缩小浏览器

2、滚动数字区点击左右切换图片

3、左右区域点击切换

4、默认5秒钟自动切换下一张

5、最后一张，回到第一张

<body>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- 滚动圆点区域 -->
        <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#myCarousel"></li>
            <li data-slide-to="1" data-target="#myCarousel"></li>
            <li data-slide-to="2" data-target="#myCarousel"></li>
        </ol>

        <!-- 图片区 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/1.jpg">
            </div>
            <div class="item">
                <img src="img/2.jpg">
            </div>
            <div class="item">
                <img src="img/3.jpg">
            </div>
        </div>

        <!-- 左右切换 -->
        <a href="#myCarousel" data-slide="prev" class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

data 属性解释：

​ 1、data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；

​ 2、data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to=“2” 将把滑动块移动到一个特
定的索引，索引从 0 开始计数。

​ 3、data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放

响应式导航条

<body>
    
    <!-- 默认导航条样式 -->
    <div class="navbar navbar-default">
        <!-- 响应式容器 -->
        <div class="container">
            <!-- 导航条的头部 -->
            <div class="navbar-header">
                <a href="#" class="nacbar-brand">wei科技信息有限公司</a>

                <!-- data-toggle="collapse" 数据切换的事件，特效是折叠-->
                <!-- data-target="#nav" 折叠效果的目标是下面的#nav容器-->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- 导航项 -->
            <div id="nav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right"> 
                    <li class="active"><a href="#"> <span class="glyphicon glyphicon-home"></span> 主页</a></li>
                    <li><a href="#"> <span class="glyphicon glyphicon-camera"></span> 产品</a></li>
                    <li><a href="#"> <span class="glyphicon glyphicon-tint"></span> 竞争</a></li>
                    <li><a href="#"> <span class="glyphicon glyphicon-earphone"></span> 联系我们</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

相关文章

jq配合后端解决跨域
1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象（json对象）
JS 将form表单数据快速转化为object对象（json对象） jaymou...
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
jQuery的区别：$().click()和$(document).on(&#39;click...
jQuery插件之jquery.spinner数字智能增减插件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...