一、昨日内容回顾

技术行业

（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-width: 1100px) {

            body{

                background-color: red;

            }

        }

        @media screen and (min-width: 800px) and (max-width: 1100px){

            body{

                background-color: green;

            }

        }

        @media screen and (min-width: 600px) and (max-width: 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;

width:@twidth;

.p1{

color:black;

a{

}

}

}

.box2{

width:@twidth;

}

style.scss

type='scss'

<div class='box'>

<p class='p1'></p>

</div>

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

python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架的更多相关文章

  1. Python全栈开发之路 【第十九篇】：Bootstrap

    一.下载和基本使用 官方地址:www.bootcss.com 二.响应式介绍 1.@meida 媒体查询 (1)响应式页面 为了页面能够适应不同工具的屏幕大小的限制,而开发的一种自适应页面,即 一次开 ...

  2. 巨蟒python全栈开发django6: FBV&CBV&&单表查询的其他方法

    练习CBV用法 截图中的action="/cbv/",应该是这样 上边红图,说明mysql有问题,需要重启一下 返回,输入的内容 @wrapper==>cbv=wrapper ...

  3. 巨蟒python全栈开发django7:多表增加和查询

    1.回顾内容&&补充 补充1: 补充2: 这个选择的是第二个解释器. 选择第一个的话,只是针对当前的项目,如果再开新项目的话,需要重新下载安装相关的包. 点击保存,因为我们注释掉了,创 ...

  4. Win10构建Python全栈开发环境With WSL

    目录 Win10构建Python全栈开发环境With WSL 启动WSL 总结 对<Dev on Windows with WSL>的补充 Win10构建Python全栈开发环境With ...

  5. python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  6. python全栈开发目录

    python全栈开发目录 Linux系列 python基础 前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...

  7. Python全栈开发【面向对象进阶】

    Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...

  8. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

  9. Python全栈开发【模块】

    Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...

  10. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

随机推荐

  1. 023_nginx跨域问题

    什么是跨域? 使用js获取数据时,涉及到的两个url只要协议.域名.端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题.例如客户端的域名是www.redis.com.cn,而请求的域名是w ...

  2. 我理解的vue生命周期

    说些题外话,引出vue的生命周期. 比如人出生到寿终正寝,这是人的一个生命周期.他会经历出生,婴儿时期,童年时期,少年时期,青年,中年,老年,到 end.然后,每个时期都会有一定的历史任务在等着去完成 ...

  3. WAV文件有多大？MP3文件有多大？使用Lame 压缩比是多少？

    一.说明: 录音文件大小多少?用什么存比较合?我有500G的硬盘存录音能存多久?...... 这些东西常用常忘,索性一次性就分析清楚记下来,方便以后查阅,如果能帮到大家那就更好了. 二.计算方法:   ...

  4. Hystrix浅谈

    Hystrix如何使用很多说明,看了很多博客,却发现能说明一些简单概念的文章就没有. 所以本文不太回去说如何使用 Hystrix ,但是会简明的说一下 一些概念 super(Setter.withGr ...

  5. Python-Django-Ajax进阶

    ajax上传文件: <h2>基于ajax上传文件</h2><p>名字 <input type="text" id="filena ...

  6. JAVA覆写Request过滤XSS跨站脚本攻击

    注:本文非本人原著. demo的地址:链接:http://pan.baidu.com/s/1miEmHMo 密码:k5ca 如何过滤Xss跨站脚本攻击,我想,Xss跨站脚本攻击令人为之头疼.为什么呢. ...

  7. sublime c++

    install: sudo add-apt-repository ppa:webupd8team/sublime-text-3   sudo apt-get update sudo apt-get i ...

  8. 【python】confluent_kafka将offset置为最大

    该博文方法有问题,正确方案在http://www.cnblogs.com/dplearning/p/7992994.html 将指定group对应的offset重置到最大值,跳过未消费数据 代码如下: ...

  9. java和python对比----1:

    对计算来说: java 除法: 3/4 ==0; pyhton 除法: 3/4 ==0 3//4==0.75

  10. cf1110E 思维

    /* Ci'=Ci+1 + Ci-1 -Ci Ci+1 - Ci' = Ci - Ci-1 Ci' - Ci-1 = Ci+1 - Ci; 即求一次Ci’等价于交换Ci和Ci-1 与 Ci+1和Ci的 ...