day16_雷神_前端04

时间 2020-07-07

标签 day16 day 前端繁體版

原文原文链接

前端day04

连接前端的一些库，一些资源，从bootcdn上搜，有前端全部的库。javascript

前端工做流程:php

jquery的DOM文档操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box" id="name">
    <p>lalal</p>
    <p>黄金爱家</p>

</div>
<button>按钮</button>
<!--<p>alex</p>-->
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
    var imgSrc = './timg.jpg';
    var alt = '美女';
    var aHref = 'http://www.baidu.com'
      //  父.append(子) 子元素 能够是 string js对象 jquery对象
       $('#name').append('<h2>太白结婚了</h2>');
        //   $('.box').append(` <ul>
        //     <li>
        //         <a href=${aHref}>
        //             <img src=${imgSrc} alt=${alt}>
        //         </a>
        //     </li>
        // </ul>`);
        // var oH3 = document.createElement('h3');
        // oH3.innerText = 'taibai';
        // console.log( $('.box'));
        // $('.box').append(oH3);
        //至关于一个移动操做
        // $('.box').append($('p'));
    //    追加到
    //    $(子).appendTo(父)

        // $('p').click()



     //    var oDiv = document.getElementsByClassName('box')[0];
     // // $('<h3>哈哈哈哈</h3>').appendTo($('.box'));
     // //    $('<h3>哈哈哈哈</h3>').appendTo('.box');
     //    $('<h3>哈哈哈哈</h3>').appendTo(oDiv).click(function () {
     //       alert(1);
     //    });
     //   追加到父元素中的第一个元素
     //    $('.box').prepend('哈哈哈')
     //      $('.box').prepend('<h5>哈哈哈2</h5>')


    //    兄弟之间插入

        $('p').after('<h3>alex</h3>');
        $('<h3>女神</h3>').insertAfter('p');


        $('p').replaceWith('结婚了');

        $('<h5>哈哈哈</h5>').replaceAll('h3');

        $('button').click(function () {
            alert(1);
          //  删除节点 事件也删除
          // var aBtn =  $('button').remove();  返回一个jQuery对象。

          //  删除节点 事件保留
          //   var aBtn = $('button').detach();
          // console.log(aBtn);
          //
          // $('.box').prepend(aBtn);
//            追加的这些元素，能够先删除，再追加
            $('.box').empty();



        // 1. 初始化的时候，有初始化 渲染开销  对于 文档 DOM 若是是频繁性的切换 建议使用 display：block|none  addClass
        //2. 少许的切换 建议使用 建立元素 删除元素  性能消耗  建立==》销毁

        });

    });
</script>
</body>
</html>

事件对象

凡有事件，都会有默认的事件对象，是JS的，不是jquery的。

a标签，点按钮，能默认跳转，是由于它有默认事件行为。

访问百度，form表单提交， action 后的url 加/s  表示search
form 默认有ajax，否则本身不会提交请求到百度；

同源策略： 端口号以前有一个不一样，就是不一样源，，后端用cors模块解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="http://www.baidu.com">按钮</a>
</div>


<form action="http://www.baidu.com/s">
    <input type="text" name = 'wd' id="wd">
    <input type="submit" id="submit">
</form>
<script src="jquery-3.3.1.js"></script>
<script>

    $(function () {
       $('a').click(function (event) {
           //a form  event.preventDefault();阻止默认事件
           event.preventDefault();
           //阻止冒泡
           event.stopPropagation()
         console.log('a点击了');
          // 阻止冒泡
          //  event.stopPropagation()

           // window.location.href

       });
       $('#submit,#wd').click(function () {
          event.stopPropagation();

           //同时阻止了默认事件和冒泡
           // return false;
       });
       $('form').submit(function (event) {
            event.preventDefault();
            event.stopPropagation()

            console.log(1111);

        //   ajax请求

           $.ajax({
               url:'http://www.baidu.com/s',
               type:'get',
               success:function (data) {
                   console.log(data);
               }
           });
        });



       $('.box').click(function () {
           console.log('盒子被点击了')
       })
         $('body').click(function () {
           console.log('body被点击了')
       })
         $('html').click(function () {
           console.log('html被点击了')
       })



    });


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

换肤

position：fix 以浏览器左上角
absolute  是以页面的左上角


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            width: 100%;
            height: 40px;

            background-color: rgba(0,0,0,.3);
        }
        .header_box{
            position: fixed;
            width: 100%;
            height: 200px;
            background-color: #555;
            left: 0;
            top: 0;
            z-index: 888;

        }
    </style>
</head>
<body style="height: 2000px">
<div class="header">
    <a href="javascript:void(0)" id="changeFu">换肤</a>
    <div class="header_box" style="display: none;">
        <a href="javascript:void(0)" class="hotmen">热门</a>

        <a href="javascript:void(0)" class="slideUp">收起</a>
    </div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('#changeFu').click(function (e) {
            e.stopPropagation();
            $('.header_box').stop().slideDown(1000);
        });
        $('.hotmen').click(function (e) {
            e.stopPropagation()
            console.log('点了hotmen');
        });
        $('.slideUp').click(function (e) {
            e.stopPropagation();
            $('.header_box').stop().slideUp(1000);
        })
        $('.header_box,.header').click(function () {
            return false;
        })
        $('body').click(function () {
            alert(1);
            $('.header_box').stop().slideUp(1000);
        })
    })
</script>
</body>
</html>
>  表单事件

select： 输入框里一选中就走了

jQuery的位置信息

offset.top 是相对于页面顶部的距离

scrollTop  是页面被卷起的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            background-color: red;
            padding: 10px;
            border: 1px solid yellow;
            /*margin-top: 100px;*/
            /*margin-left: 100px;*/

            position: relative;
            top: 50px;
        }
    </style>
</head>
<body style="height: 2000px">
<div class="box">alex</div>
<script src="jquery-3.3.1.js"></script>
<script>

    $(function () {
        $('.box').width(200).height(300);
    //    innerWidth innerHeight  内部宽和高 不包含border
    //     console.log($('.box').innerWidth());
    //     $('.box').innerWidth(400)
    //         outerHeight outerWidth 外部宽和高 包含border

      // console.log(  $('.box').outerWidth());

     // console.log( $('.box').offset().top);

//        $(document).scroll(function () {
//            // console.log(22222);
//
//           console.log( $(document).scrollTop())
//        })
    })
</script>


</body>
</html>

滚动固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            width: 100%;
            height: 40px;

            background-color: rgba(0,0,0,.3);
        }
        .header_box{
            position: fixed;
            width: 100%;
            height: 200px;
            background-color: #555;
            left: 0;
            top: 0;
            z-index: 888;

        }
        .fix_header{
            position: fixed;
            width: 100%;
            height: 80px;
            background-color: red;
            top: 0;
            left: 0;
            display: none;
        }
        .content{

            width: 500px;
            height: 300px;

            background-color: yellow;
            position: absolute;
            left: 50%;
            margin-left: -250px;
            top: 300px;
        }
    </style>
</head>
<body style="height: 2000px">
<div class="header">
    <a href="javascript:void(0)" id="changeFu">换肤</a>
    <div class="header_box" style="display: none;">
        <a href="javascript:void(0)" class="hotmen">热门</a>

        <a href="javascript:void(0)" class="slideUp">收起</a>
    </div>
</div>

<div class="content">

</div>
<div class="fix_header">
    固定导航栏
</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('#changeFu').click(function (e) {
            e.stopPropagation();
            $('.header_box').stop().slideDown(1000);
        });
        $('.hotmen').click(function (e) {
            e.stopPropagation()
            console.log('点了hotmen');
        });
        $('.slideUp').click(function (e) {
            e.stopPropagation();
            $('.header_box').stop().slideUp(1000);
        })
        $('.header_box,.header').click(function () {
            return false;
        })
        $('body').click(function () {
            alert(1);
            $('.header_box').stop().slideUp(1000);
        });

        $(document).scroll(function () {
            //获取黄色的盒子到顶部的距离

           var top =  $('.content').offset().top;
           var docScrollTop = $(document).scrollTop()

            if (docScrollTop > top){
               $('.fix_header').show();
            }else {
                 $('.fix_header').hide();
            }

        });
    })
</script>
</body>
</html>

jquery的插件

www.jq22.comcss

iframe 框架标签，标签去连接别人写好的地址

扒一些插件

iconfont 阿里巴巴矢量图标库html

扒一些图标

jQuery的事件委托

on方法，绑定的意思，第一个元素是click，你要绑定的事件，第二个是你要绑定的子元素，第三个是对应的function前端

也是给li标签绑定点击事件，只不过把点击事件交给了父亲ul，将来添加的只要从ul点击就OKhtml5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>

    <li>alex1</li>
    <li>alex2</li>
    <li>alex3</li>
    <!--li-->
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
       // $('ul li').click(function () {
       //     alert($(this).text());
       // })

        //事件委托
        // $('ul').on('click','li',function () {
        //     alert($(this).text())
        // })
        //
        // //将来追加的元素   不能作点击事件
        // $('ul').append('<li>太白</li>');

        // var arr = ['alex','etaibai','nv'];
        //数组遍历使用forEach
        // arr.forEach(function (el,index) {
        //     console.log(el,index);
        // });

        //jquery伪数组遍历 使用each
        // $('li').each(function (index,el) {
        //     console.log(el);
        //     console.log(index);
        // })

    });
</script>
</body>
</html>

jquery 内部遍历：给两个div绑定事件java

$('.box').click(function () {
                //对值得操做
                // alert(this.innerText);
                // alert($(this).text());
                // alert($(this).html());
                $(this).text('nvshen');

json使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <img src="./拍照-01.png" alt="">
    <img src="./购物车满.png" alt="">
    <img src="./购物车满%20(1).png" alt="">
</head>
<body>
<script>
    //后端响应回来的数据 json字符串
    var a={"name":"tom","sex":"男","age":"24"};  //json
    var b='{"name":"Mike","sex":"女","age":"29"}'; //jsonStr
    // var jsonStr = '{"name":"张三"}';
    // console.log(JSON.parse(b).name);  

    console.log(JSON.stringify(a));  
//    把一个对象解析成JSON字符串
</script>

</body>
</html>

bootstrap使用

基础模板（起步里） + 导航条（组件里）node

全局CSS样式

生产环境：编译以后的代码python

bootstrap 源码：包含了less，less是CSS的高级语言，有逻辑、有运算、函数等，让CSS活了，可是浏览器只识别CSS，用less编译器转译成CSS，jquery

前端工具：

Bower进行安装，
npm，服务器语言，node.js的包管理器

下载的包最终要用Grunt，对全部文件处理，html、CSS、js等文件压缩，编译打包上线
grunt目前已经不用了，还有gulp、webpack，目前多的是webpack

bgc的大图会编译成一段js代码，放在某一个js文件，请求资源的时候方便多了

工具的使用都是流水化的使用，配置好，执行命令就行了

通常写项目不会一个目录一个目录的建立，会有模板直接建立目录、文件等。

960.cs 栅格系统

<div class="container">
     <div class="row">
         <div class="col-lg-3 col-md-4 col-sm-6">
            Bootstrap 提供了一套响应式             </div>
          <div class="col-lg-3 col-md-4 col-sm-6">
            Bootstrap 提供了一套响应式             </div>
          <div class="col-lg-3 col-md-4 col-sm-6">
            Bootstrap 提供了一套响应式             </div>
          <div class="col-lg-3 col-md-4 col-sm-6">
            Bootstrap 提供了一套响应式             </div>
     </div>
</div>

组件的使用

插件： JS功能

组件： html、css、js，可复用的

php，多线程，没有异步队列，只容许连接一个最大链接数。

面板 ==》下拉菜单

bootstrap.min.js 必须依靠jQuery

分裂式的下拉菜单

导航条

品牌图标

导航是独立于内容主题的一块区域

路径导航

分页

相对定位，能够微调元素，由于相对原来的位置。

写路由，即url，会日后端请求数据，若是后台资源过多，前端页面会出现白屏现象。
一、单页面操做，如今是锚点值的连接，前端作路由，后端只传数据，点击a标签，切换页面，在某个时机发送请求，获取后端资源，二、解决先后端分离，MVC架构模式，controller就是路由/course,路由一切换，加载页面，之前页面是后台作的，整个放到前端，如今分离，整个View让前端作。

module 就是数据，从前没分那么细，后台渲染view，先读取数据，把数据渲染到后天写的一个模板，经过http协议render到前端页面。后端处理视图。后端经过模板语法直接渲染进去。

后来单独把view摘出来，作DOM操做，django是先后端没分的。

js单线程，nodejs、python都是单线程，

插件

模态框、滚动监听、

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap   全局的css-->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：经过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            padding-top: 70px;
        }

        .ttt {
            position: relative;
            top: 0px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">路飞学诚</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">学位</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">注册</button>
                <button type="submit" class="btn btn-success">登陆</button>
            </form>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <div class="row">
        <div class='col-md-6'>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">下拉菜单</h3>
                </div>
                <div class="panel-body">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <!--凡是在组件中带有 data-xxx  表示与js有很大关系-->
                            Dropdown
                            <span class="caret"></span>
                            <!--三角形-->
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">按钮式的下拉菜单</h3>
                </div>
                <div class="panel-body">
                    <!-- Split button -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger">Action</button>
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <!--<span class="sr-only">Toggle Dropdown</span>  -->
                        </button>
                        <!--sr-only不显示这个span标签-->
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>

                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">按钮式的下拉菜单</h3>
                </div>
                <div class="panel-body">
                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active"><a href="javascript:void(0)">Home</a></li>
                        <li role="presentation"><a href="#">Profile</a></li>
                        <li role="presentation"><a href="#">Messages</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <ul class="nav nav-pills" role="tablist">
                <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages <span class="badge ttt">3</span></a></li>
            </ul>

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" id="modal">
                Launch demo modal
            </button>

            <!-- 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>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" id="close">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- jQuery (Bootstrap 的全部 JavaScript 插件都依赖 jQuery，因此必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的全部 JavaScript 插件。你也能够根据须要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    $(function () {
        $('#modal').click(function () {
           $('#myModal').modal('show');
        });
        $('#close').click(function () {
           $('#myModal').modal('hide');
        });
    });
</script>
</body>
</html>

补充

echart 前端作图标的

bootstrap 后端ui框架：adminlte