一、昨日内容回顾
技术行业
(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- 1100px) { body{ background-color: red; } } @media screen and (min- 800px) and (max- 1100px){ body{ background-color: green; } } @media screen and (min- 600px) and (max- 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>
(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)
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; @twidth; .p1{ color:black; a{ } } } .box2{ @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>
// 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); });