• python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架


    一、昨日内容回顾

    技术行业

    (1)ajax技术
    XMLHttpRequest()
    <1>创建XMLHttpRequest()对象
    <2>检测状态(通过readyState的改变,来做请求拦截)
    <3>open('GET',URL)
    <4>send()

    (2)jquery的ajax技术
    //get请求 请求体的数据会保存到url上。get请求不安全,2kb
    $.ajax({
    url:"....",
    type:'get',
    success:function(data){
    },
    error:function(err){
    }

    });

    //post请求 请求数据会保存到请求体中。post请求相对安全
    $.ajax({
    url:"....",
    type:'post',
    data:{
    },
    success:function(data){
    },
    error:function(err){
    }

    });

    ****
    get和post默认会返回一个字符串类型,如果你想要json数据类型,那么得需要加dataType:'json'

    另外:jquery的ajax方法 它的数据文件编码类型默认是urlencoded类型、、

    如果后面学到了新的ajax技术(vue 的axios技术),默认传输数据的编码类型不是urlencoded类型,那么得需要以下操作

    npm install qs --save

    import qs from 'qs'

    var encodedJson = qs.stringfy({name:'张三'})

    es6 promise异步调用
    axios.post('/user',encodedJson)
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });
    ******

    二、今日内容总结

        

    知识点0 :需要大家熟练使用jquery的插件,自己找个jquery的插件爬下来
    知识点1和知识点2了解一下。建议将课堂的实例自行演示一下
    知识点3:需要大家熟练使用
    0.jquery的插件

    http://www.jq22.com/

    1.@media 媒体查询
    http://www.cnblogs.com/majj/p/9142248.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <style type="text/css">
            @media screen and (min- 1100px) {
                body{
                    background-color: red;
                }
            }
            @media screen and (min- 800px) and (max- 1100px){
                body{
                    background-color: green;
                }
    
            }
            @media screen and (min- 600px) and (max- 990px){
                body{
                    background-color: blue;
            }
    
            }    
    
        </style>
    </head>
    <body>
    
    
    </body>
    </html>
    例子


    2.移动端单位(了解)
    http://www.cnblogs.com/majj/p/9142415.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .head{
                position: fixed;
                width: 100%;
                height: 60px;
                background-color: blue;
                left: 0;
                top: 0;
            }
            ul{
                margin-top: 60px;
            }
            ul li{
                list-style: none;
                float: left;
                width: 5em;
                height: 5em;
                border:1px solid red;
            }
            .clearfix:after{
                content: '';
                clear: both;
                height: 0;
                display: block;
                visibility: hidden;
            }
        </style>
    </head>
    <body class="clearfix">
        <div class="head"></div>
        <ul>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>        
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>        
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>        
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>        
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
    
    
        </ul>
        
        <script type="text/javascript" src="js/resize.js">
            
        </script>
    </body>
    </html>
    app.html
    (function(doc,win){
        var docEle = doc.documentElement;
        evt = 'onorientationchange' in window ? 'orientationchange':'resize';
        fn = function(){
            var width = docEle.clientWidth;
            docEle.style.fontSize = 20*(width/375)+'px';
        }
        win.addEventListener(evt, fn, false);
        doc.addEventListener('DOMContentLoaded', fn, false);
    })(document,window)
    设置各个屏幕的html的font-size.js


    3.Bootstrap框架



    1.前端工具
    grunt

    gulp

    webpack

    结合一些插件 less-loader


    2.样式文件:
    type='text/css'

    style.css 没有逻辑可言    less可以定义变量 if for

    .box{
    
    }
    .box p.p1{
    
    }
    
    
    style.less
    type='less'
    @tWidth = 200px;
    .box{
    bgc:red;
    font-size:20px;
    @twidth;
    .p1{
    color:black;
    a{
    
    }
    }
    
    }
    
    .box2{
    @twidth;
    }
    style.scss
    type='scss'
    <div class='box'>
    
    <p class='p1'></p>
    
    </div>
    View Code


    3.js
    一个js文件就是一个模块
    一个py文件就是一个模块


    模块化

    前端中模块化规范:异步的
    (1)commonjs
    (2)cmd amd(seajs 海纳百川 有容乃大)

    common module define
    ayn... module define


    require()

    (3)阮一峰教程 es6module


    import xxx from 'ooo'
    今日作业:
    1.小组式命名自己的公司网页和logo
    参考链接:http://www.jq22.com/yanshi19391

        

    三、预习和扩展

      1. npm install --save 和 npm install --save-dev区别

        npm install --save项目生产环境依赖

         --save-dev 项目开发依赖

        https://blog.csdn.net/juzipchy/article/details/65653683

      2. axios 在前端html和js中使用

       

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <button id='btn'>提交</button>
    <script src="./node_modules/qs/dist/qs.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    
    
    <script type="text/javascript">
    
    document.getElementById('btn').onclick=function() {
        axios.get('http://localhost:8800/')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
      //   var qs = require('qs');
      //   var encodeJson = qs.stringify({name:'kac',pwd:'123'});
      //    // var encodeJson = {name:'kac',pwd:'123'};
      //   axios.post('http://localhost:8800/login').then(function (response) {
      //       console.log(response);
      //   }).catch(function (error){
      //       console.log(error);
      //   })
    
    }
    
    
    </script>
    
    </body>
    </html>
    html
    // import axios from 'axios';
    // import qs from 'qs';
    var axios = require('axios');
    var qs = require('qs');
    
    // axios.get('http://localhost:8800/')
    //   .then(function (response) {
    //     console.log(response);
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
    // var encodedJson = qs.stringify({name:'张三',pwd:'123'});
        // es6 promise异步调用
        axios.post('http://localhost:8800/create',encodedJson)
        .then(function (response) {
         console.log(response);
       })
       .catch(function (error) {
        console.log(error);
       });
    js

     

  • 相关阅读:
    DOM
    JS方法
    边界与边框,列表与方块
    for 练习
    背景与前景温习
    AD域账号验证
    邮件发送案例
    获取每个月最后一天的小技巧
    SQL 执行顺序
    常用下载地址
  • 原文地址:https://www.cnblogs.com/wuchenggong/p/9295157.html
Copyright © 2020-2023  润新知