一、昨日内容回顾

技术行业

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

   });

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

Python全栈开发之路【第十九篇】：Bootstrap
一.下载和基本使用官方地址:www.bootcss.com 二.响应式介绍 1.@meida 媒体查询 (1)响应式页面为了页面能够适应不同工具的屏幕大小的限制,而开发的一种自适应页面,即一次开 ...
巨蟒python全栈开发django6: FBV&CBV&&单表查询的其他方法
练习CBV用法截图中的action="/cbv/",应该是这样上边红图,说明mysql有问题,需要重启一下返回,输入的内容 @wrapper==>cbv=wrapper ...
巨蟒python全栈开发django7:多表增加和查询
1.回顾内容&&补充补充1: 补充2: 这个选择的是第二个解释器. 选择第一个的话,只是针对当前的项目,如果再开新项目的话,需要重新下载安装相关的包. 点击保存,因为我们注释掉了,创 ...
Win10构建Python全栈开发环境With WSL
目录 Win10构建Python全栈开发环境With WSL 启动WSL 总结对<Dev on Windows with WSL>的补充 Win10构建Python全栈开发环境With ...
python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...
python全栈开发目录
python全栈开发目录 Linux系列 python基础前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...
Python全栈开发【面向对象进阶】
Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...
Python全栈开发【面向对象】
Python全栈开发[面向对象] 本节内容: 三大编程范式面向对象设计与面向对象编程类和对象静态属性.类方法.静态方法类组合继承多态封装三大编程范式三大编程范式: 1.面向过程编程 ...
Python全栈开发【模块】
Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...
Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理迭代器三元表达式列表解析与生成器表达式生成器匿名函数 lamb ...

随机推荐

webstorm设置VCS：版本控制顶部按钮
说明: 每次都在这坑一下,浪费时间,百度只指出在哪,并没有说怎么调出来我用的版本是10,点击下面的选项按操作设置就可以了红色箭头:从服务器获取最新代码: 绿色箭头:提交: 白色箭头:撤销
Android Day2
紧接前一篇日记: 2.增加文本域在<LinearLayout>中增加<EditText>元素,无格式设置的时候如下. <EditText android:id=&quo ...
html常用标签表单和表格等及css的简单入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
servlet生成图片验证码
package cn.itcast.servlet.session.demo3; import java.awt.Color; import java.awt.Font; import java.aw ...
mongodb导入导出数据
导出 mongoexport -d DB_NAME -c COLLECT_NAME -o FILE_NAME 例:mongoexport -d db_test -c data_result -o da ...
jmeter设置全局变量
2017年4月20日 10:07:37 星期四情景, 从第一个请求的结果中匹配出code, 当作参数去做下次请求以抢红包为例: 1. 创建红包, 并从返回结果中获取红包code 2. 将code设 ...
__dict__(字典的另一种用法）
class Foo(): def __init__(self): self.name=None self.age=19 self.addr='上海' @property def dict(self): ...
AGC 014 E Blue and Red Tree [树链剖分]
传送门思路官方题解是倒推,这里提供一种正推的做法. 不知道你们是怎么想到倒推的--感觉正推更好想啊QwQ就是不好码把每一条红边,将其转化为蓝树上的一条路径.为了连这条红边,需要保证这条路径仍然完 ...
Confluence 6 针对大数据量备份
XML 站点备份的方式只针对 Confluence 包含有几千页面的情况,XML 备份所需要的时间随着数据量的变化而增加.另外的一个问题是 XML 站点的备份将会包含上 G 的附件数据,随着数据量的增 ...
bat如何创建多级文件夹(在android设备中)
在android设备中要创建多个或者多级文件夹时,手动去创建费时费力(有点傻),一个bat文件就能很好的实现这个功能. 1.首先创建同级多个文件夹且在该文件夹下生成一个文件 @echo off ech ...

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

一、昨日内容回顾

二、今日内容总结

三、预习和扩展

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

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

随机推荐

热门专题

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