立即执行函数: immediately invoked function expression 自执行函数
优点: 避免全局变量污染 减少不必要的内存浪费
(function (){ console.log(1); })(); (function (){ console.log(2); }()); // 2. 有参数: 形参: 函数声明后的括号中 实参: 函数调用的括号中 (function (a, b){ console.log(a, b); }(10,20)); // 3. 有返回值: return 值 var s = (function (a, b){ console.log(a, b); return a + b; }(10,20)); console.log(s);能够读取其他函数内部变量的函数(函数里面套函数, 内部函数访问外部函数的变量), 本质上, 将函数内外连接起来的桥梁
闭包中使用的变量是一只存储在内存中, 类似全局变量, 避免全局污染
// 1. 闭包: function fn(){ var s = 10; return function(){ console.log(s++); } } // var f = fn(); // console.log(f); // function(){ console.log(s++); } // f(); // 10 // f(); // 11 // f(); // 12 // console.log(s); // 全局s 没有 fn()(); // 10 fn()(); // 10 fn()(); // 10asynchronous javascript and xml(异步js和xml), 是一种创建交互式网页应用的网页开发技术, 可以快速创建动态性网页的技术, 是通过和后台进行少量的数据交互, ajax可以实现网页的异步更新。
同步：客户端和服务端进行数据交互的时候, 不可以做其他的事情
异步: 客户端和服务端进行数据交互的时候, 可以做其他的事情
各网络状态码描述 http状态码
类别原因短语1xx信息性状态码服务器正在处理请求2xx请求成功请求正常处理完毕3xx请求重定向需要进行额外的操作完成请求4xx客户端错误客户端请求出错，服务器无法处理请求5xx服务器错误服务器处理请求出错 常见的状态码即描述 状态码描述200 OK客户端 发送 给服务器的请求被正常处理并返回201 Created请求已经被实现202 Accepted服务器已接受请求，但尚未处理204 No Content服务器成功处理了请求，但不需要返回任何实体内容（没有资源可以返回）301 Moved Permanently永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL302 Found临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL303 See Other表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源400 Bad Request请求报文中存在语法错误401 Unauthorized未经许可，需要通过HTTP认证403 Forbidden服务器拒绝该次访问（访问权限出现问题）404 Not Found表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用405 Method Not Allowed打开方式不对 （资源被禁止）500 Internal Server Error服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误503 Server Unavailable服务器暂时处于超负载或正在进行停机维护，无法处理请求get请求
创建ajax请求对象
建立连接 ajax.open(请求方式, 请求地址+data, 是否异步);
发送请求 ajax.send();
监听处理情况
// 1. 创建ajax请求对象 var ajax = new XMLHttpRequest(); // http: 超文本传输协议 request:请求 // var ajax = new ActiveXObject('Microsoft.XMLHTTP'); // ie6创建 // 2. 建立连接 ajax.open(请求方式, 请求地址+data, 是否异步); // 请求方式： get、post // 请求地址+data: 访问的地址及传输的数据, 请求地址?key=value&key=value // 是否异步： 布尔值, true---异步 false---同步 ajax.open('get', 'a.txt?a=1&b=2', true); // 3. 发送请求 ajax.send(); ajax.send(); // 4. 监听处理情况 ajax.onreadystatechange = function(){ if(ajax.readyState == 4){// 请求处理完成 if(ajax.status == 200){ // 请求成功 console.log(ajax.response); } } }post请求
创建ajax请求对象
建立连接 ajax.open(请求方式, 请求地址, 是否异步);
设置请求头\编码格式:告诉服务器当前提交数据的类型
发送请求 ajax.send(key=value&key=value);
监听处理情况
// 1. 创建ajax请求对象 var ajax = new XMLHttpRequest(); // http: 超文本传输协议 request:请求 // 2. 建立连接 ajax.open(请求方式, 请求地址, 是否异步); // 请求方式： get、post // 请求地址: 访问的地址及传输的数据, 请求地址 // 是否异步： 布尔值, true---异步 false---同步 ajax.open('post', 'a.txt', true); // 2.1 设置请求头\编码格式:告诉服务器当前提交数据的类型 ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8'); // 3. 发送请求 ajax.send(key=value&key=value); ajax.send('a=1&b=2'); // 4. 监听处理情况 ajax.onreadystatechange = function(){ if(ajax.readyState == 4){// 请求处理完成 if(ajax.status == 200){ // 请求成功 console.log(ajax.response); } } } Content-type参数application/x-www-form-urlencoded: 默认, 表单
text/plain: 文本
multiple/form-data: 上传文件
1.json文件后缀: .json
2.文件中2种数据格式: []{}
3.key:value,key必须加双引号
4.value只能是简单数据类型: string\number\boolean\null{}[] 函数、undefined、变量不能用
5.string必须要加双引号
js: {}默认就是完整的js代码块
方法一：eval(要转的数据)
方法二：JSON.parse(要转的数据)
myjsKu.ajax({ 'url': 'student.json', //相对html页面的地址 'success': function(res) { console.log(res); //string类型 //js中 {}默认就是完整的js代码块 //方法一：eval(要转的数据),将字符串转成js代码并执行其中的js代码 // var r = eval(res);//res是字符串--转成表达式加（） var r = eval('(' + res + ')'); //运行字符串中js的代码 console.log(r); console.log(eval('3+2')); //5 //方法二、JSON.parse(要转的数据)：json数据转成js数据 console.log(JSON.parse(res)); var r = JSON.parse(res); //字符串转成数组后对其进行遍历--获取到每一个学生的信息 //ajax请求后操作数组的方式 for (var i = 0; i < r.length; i++) { console.log(r[i]); ul.innerHTML += '<li><span>' + r[i].name + '</span> <span>' + r[i].sex + '</span> <span>' + r[i].age + '</span></li>' } } })touchstart: 当手指在屏幕上按下的时候
touchmove: 当手指在屏幕上移动的时候
touchend: 当手指离开屏幕的时候触发
div.ontouchstart = function(){ console.log('这是点击touch'); } div.addEventListener('touchmove', function(){ console.log('touchmove'); }); div.addEventListener('touchend', function(){ console.log('touchend'); }); // 注意： 在移动端一般使用事件绑定的方式添加事件pc端事件在移动端中的问题: 有一个300ms的延迟
移动端事件问题:
点透: 当两个元素叠加在一起，并且下方元素有点击事件或连接跳转时， 当上方元素点击隐藏后，并且点击事件时间不超过300ms, 事件会漂移到下方元素上, 造成了点透事件解决 阻止默认事件，在 touch 时间的某个阶段执行 event.preventDefault() ，去取消系统生成的 click 事件，一半在 touchend 中执行要消失的元素延时300ms，然后在消失 var div = document.getElementsByTagName('div')[0]; div.addEventListener('touchstart', function(){ div.style.display = 'none'; }); 事件对象 事件处理函数的第一个参数 div.addEventListener('touchstart', function(ev){ console.log(ev); // TouchEvent console.log(ev.touches); // 当前位于整个屏幕上的手指列表 console.log(ev.targetTouches); // 当前位于目标元素上的一个手指列表 console.log(ev.changedTouches); // 当前事件的手指列表 var touch = ev.changedTouches[0]; // 在事件的手指列表中拿出来第一个手指 console.log(touch); console.log(touch.identifier); // 标识符 console.log(touch.target); // 目标源 console.log(touch.screenX, touch.screenY); // 显示器 console.log(touch.clientX, touch.clientY); // 到可视区域的左上角 console.log(touch.pageX, touch.pageY); // 到页面左上角的距离 console.log(touch.radiusX, touch.radiusY); // 手指触发的圆的半径 console.log(touch.force); // 压力的大小 console.log(touch.rotationAngle); // 旋转角度 });介绍: 移动端的手势识别和事件库, 百度clouda团队维护, 在百度内部也是广泛应用的
搜索: touch.js: touch cdn —> bootcdn 0.2.14
touch.js: 标准格式版本, 学习
touch.min.js: 压缩版本, 工作
作用： 专门为移动设备设计, 请在webkit内核中使用
touch.on()
touch.on(elem, type, callback);
elem: 要绑定事件的对象
type: 事件类型
callback: 回调函数
给一个元素绑定一个事件
给一个元素的同一事件添加不同的处理函数
给一个元素不同事件添加同一处理函数
给同一元素不同事件添加不同处理函数
var div = document.getElementsByTagName('div')[0]; // 1. 给一个元素绑定一个事件 // tap: 单击 touch.on(div, 'tap', function (ev) { console.log(ev.type); }); function callB(ev){ console.log('当前事件类型是: ' + ev.type); } // 2. 给一个元素的同一事件添加不同的处理函数 touch.on(div, 'tap', callB); // 3. 给一个元素不同事件添加同一处理函数 // hold: 长按 doubletap:双击事件 touch.on(div, 'tap hold doubletap', callB); // 4. 给同一元素不同事件添加不同处理函数 // touch.on(elem, {'事件类型': 事件处理函数}); touch.on(div, { 'hold': function(){ console.log('1'); }, 'tap': function(){ console.log(2); } });事件委托：touch.on(父元素, type, selector, callback)
父元素：父元素\选择器
type: 事件类型
selector: 子元素的选择器
callback: 回调函数
var div = document.getElementsByTagName('div')[0]; touch.on(div, 'tap', 'span.box,em', function(ev){ console.log(ev.target); console.log(this); }); 事件对象 console.log(ev); console.log(ev.originEvent); // 原生的事件对象 console.log(ev.type); // 事件类型 console.log(ev.rotation); // 旋转角度 console.log(ev.scale); // 缩放比例 console.log(ev.direction); // 操作方向 console.log(ev.position); // 位置信息 console.log(ev.distanceX, ev.distanceY); // 手势事件中滑动事件在横线和纵向上的偏移量, 以当前点击开始的位置作为坐标原点，分成四象限, 向上、左是负值, 向下、右是正值 console.log(ev.angle); // rotate事件触发的时候, 旋转的角度 console.log(ev.duration, '1----'); // 时长(touchstart到touchend) 类事件描述缩放类pinchstart缩放手势起点pinchend缩放手势终点pinch缩放手势pinchin收缩pinchout放大旋转类rotateleft向左旋转rotateright向右旋转rotate旋转滑动类swipestart滑动手势起点swiping滑动中swipeend滑动手势终点swipeleft向左滑动swiperight向右滑动swipeup向上滑动swipedown向下滑动swipe滑动拖动类dragstart拖动开始drag拖动dragend拖动结束长按hold单击、双击Tap、doubletap