一、昨日内容回顾

技术行业

（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. $Django Rest Framework-频率组件，解析器

    1 频率组件 #自定义组件写频率认证(重点继承BaseThrottle) from rest_framework.throttling import BaseThrottle import time ...

  2. Keil和SourceInsight中文乱码解决方法

    一.KEIL乱码 到菜单栏Edit--->Configuration-->Encoding ---ChineseSimplied 二.SourceInsight乱码 错误现象:注释乱码,查 ...

  3. UniversalImageLoader(异步加载大量图片)

    UniversalImageLoader是用于加载图片的一个开源项目,UniversalImageLoader是实现异步加载大量图片的源码和例子,包括缓存.硬盘缓存.容错机制等技术.在其项目介绍中是这 ...

  4. mysql设计表时注意事项

    说明:本文是对项目过程中的一些要求的简单汇总整理,主要是供个人本身参考... 一.表设计 1. 在创建表结构时,表名.字段需要见名知意,不采用拼音 create table  `tb_abc` (   ...

  5. [记录]一个有趣的url请求(nodejs)

    1 前言 IDE是webstrom,跟项目编程语言,应该没有多大关系. 2 现象 两个看起来是一样的url,但是一个能访问一个不能访问. 然后,复制url到console中发现了差异,分别是:file ...

  6. 树·二叉查找树ADT（二叉搜索树/排序树）

    1.定义 对于每个节点X,它的左子树中所有的项的值小于X的值,右子树所有项的值大于X的值. 如图:任意一个节点,都满足定义,其左子树的所有值小于它,右子树的所有值大于它. 2.平均深度 在大O模型中, ...

  7. input file 多张图片上传 获取地址 ——fileReader

    //上传图片 $('#files').change(function(e){ var fil = this.files; var m =0; if(fil.length>3){ alert('重 ...

  8. struts2 过滤器和拦截器的区别和使用

    java web 过滤器和拦截器的区别和使用  1.1 什么是拦截器:      拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然 ...

  9. Confluence 6 理解你许可证的用户数

    基于你的许可证类型,在你 Confluence 可以被注册的用户也许有限制. 在许可证明细页面中,将会告诉当前使用了多少的许可证(你注册的用户数量). 包括仅仅在 Confluence 中可以使用gl ...

  10. vuex action 与mutations 的区别

    面试没说清楚.这个太丢人回来整理下: 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步 ...