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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。