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

查看全文

相关阅读:
670. Maximum Swap
653. Two Sum IV
639. Decode Ways II
636. Exclusive Time of Functions
621. Task Scheduler
572. Subtree of Another Tree
554. Brick Wall
543. Diameter of Binary Tree
535. Encode and Decode TinyURL
博客园自定义背景图片

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