一、昨日内容回顾

技术行业

（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. planning深度剖析

    planning深度剖析 结合find命令过滤目录及文件名后缀: find /home/hadoop/nisj/automationDemand/ -type f -name '*.py'|xargs ...

  2. mysql数据库监控利器lepus天兔工具安装和部署

    需要的核心包如下:以下软件包只需要部署在监控机即可.被监控机无需部署.1.MySQL 5.0及以上(必须,用来存储监控系统采集的数据)2.Apache 2.2及以上 (必须,WEB服务器运行服务器)3 ...

  3. PHP随机红包算法

    2017年1月14日 14:19:14 星期六 一, 整体设计 算法有很多种, 可以自行选择, 主要的"架构" 是这样的, 用redis decr()命令去限流, 用mysql去记 ...

  4. [C]二级指针

    二级指针即“指向指针的指针”: 下面的实例代码创建了一个二级指针c int a = 5; int* b = &a; int** c = &b; 你不能这样 int a = 5; int ...

  5. GZip、deflate和sdch压缩（网摘整理）

    GZip和deflate: gzip是一种数据格式,默认且目前仅使用deflate算法压缩data部分:deflate是一种压缩算法,是huffman编码的一种加强. deflate与gzip解压的代 ...

  6. 分布式系统的一致性协议之 2PC 和 3PC

    在分布式系统领域,有一个理论,对于分布式系统的设计影响非常大,那就是 CAP 理论,即对于一个分布式系统而言,它是无法同时满足 Consistency(强一致性).Availability(可用性) ...

  7. 初步了解three.js

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. swift 学习- 15 -- 构造过程 01

    // 构造过程 是使用类,结构体 或 枚举类型的实例之前的准备过程, // 在新实例可用前必须执行这个过程, 具体操作包括 设置实例中每个存储型属性的初始值 和 执行其他必须的设置 或 初始化工作 / ...

  9. React-Native到0.44版本后Navigator 不能用的问题

    新升级  到0.46版本以后 Navigator 不能使用报错. 'Navigator is deprecated and has been removed from this package. It ...

  10. linux用户

    hen we are travelling, we find ourselves in new places and new spaces, physically and internally; it ...