一、昨日内容回顾
技术行业
（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