zoukankan html css js c++ java

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);
   });

查看全文

相关阅读:
各种平衡树板子
 字符串板子
 数学公式/定理/板子整理
 线性筛板子整理
 set乱搞时需注意的坑点
 可持久化数据结构板子整理（可持久化线段树/字典树/可并堆）
洛谷p2483 模板k短路可持久化可并堆
 p4929 DLX舞蹈链
 百度ai 图像增强与特效
 百度ai php请求获取access_token返回false

原文地址：https://www.cnblogs.com/wuchenggong/p/9295157.html