一、昨日内容回顾

技术行业

（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. 数字证书及CA的扫盲介绍

    ★ 先说一个通俗的例子 考虑到证书体系的相关知识比较枯燥.晦涩.俺先拿一个通俗的例子来说事儿. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 ...

  2. mysql的group by查询

    下面是多种写法,针对使用group by后得到最新记录的测试及结果: 说明:我在测试的时候,因为我的表数据在增加,得到最新的数据可能不同 -- 1.得到每个分组中id最小的那条记录 select * ...

  3. freeswitch反注册记录

    应用情景: 使用阿里服务器,落地使用本地的模拟线路(O口网关). 1.FreeSWITCH 服务器开一个账号,比如 5000 internal , O口 SIP设置页面按照网关注册 5000 的账号信 ...

  4. opensips redis配置记录

    说明:本配置目的:增加opensips对 Redis 的支持. 一.步骤: 1.Redis Server 安装. 2.Hiredis Client 安装.Hiredis 是 Redis 官方指定的C语 ...

  5. Laravel 怎么使用资源控制器delete方法

    ### 在视图上,想删除某个数据,而控制器是使用了resources controller的 那么在删除数据的时候,还是有些需要注意的地方 ### 视图上: <a href="java ...

  6. 分布式服务管理框架 ZooKeeper

      核心功能   统一命名服务(Name Service)   通过有层次的目录结构产生唯一的名称,同时可以将名称关联到特定资源   配置管理(Configuration Management)   ...

  7. Android应用开发中三种常见的图片压缩方法

    Android应用开发中三种常见的图片压缩方法,分别是:质量压缩法.比例压缩法(根据路径获取图片并压缩)和比例压缩法(根据Bitmap图片压缩). 一.质量压缩法 private Bitmap com ...

  8. C#中lock死锁实例教程

    这篇文章主要介绍了C#中lock死锁的用法,对于共享资源的访问及C#程序设计的安全性而言,有着非常重要的意义!需要的朋友可以参考下 链接:http://www.jb51.net/article/543 ...

  9. Windows 批处理大全（附各种实例）

    Windows 批处理大全(附各种实例) 2009年07月19日 21:31:00 阅读数:2552 批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd.在命 ...

  10. spring springMvc spring-boot spring-cloud分别是什么

    本文来源于:克己习礼成仁   的<spring springMvc spring-boot spring-cloud分别是什么> 什么是spring 关于spring的定义无论是从官方还是 ...