事件：用户的操作，行为(js) 结构(html) 样式(css) 三者分离！
一、获取元素：
1. document.getElementById 没获取到返回一个null
不兼容：ie67 a. 忽略大小写 b. 表单name充当id
2 .document.getElementsByTagName 没获取到返回一个空数组
3. document.getElementsByClassName
4. document.getElementsByName
二、函数：
function 函数名(参数列表){ 函数定义
arguments
js代码
return ;
}
函数名(参数列表); 函数的调用
变量：var 变量名 = 值;
----------------------------------
a.只有函数的定义 没有函数的调用 什么都不会发生
b.只有函数的调用 没有函数的定义 报错！
c.函数每执行一次 都会复制一份，包括里面的参数！
d.变量：变量的值以调用为准！
三、循环：while for 没有区别！
while 次数不定, for 次数固定
循环4个条件：a. 条件初始化 b. 条件判断 c. 执行语句 d. 自增 自减
四、数据类型：
1、"string" "number" "boolean" "undefined" "object" "function"
基本数据类型： string number boolean undefined
复合数据类型 ：object function （function——有争议！前端属于复合数据类型 分的标准：能分出新的数据类型）
2.类型转换： 隐式 强制
强制：parseInt/float/Number 隐式： + : a 字符串连接 b 数字加 c - ：数字减
字符串连接：字符跟任意一个东西进行连接都是字符串！
五、符号
1. = 赋值
2. == 比较 勤快 1 类型转换 2 比较
3. === 比较 1 直接比较值
4. > < >=
5. true 1 false 0
6. null 0 undefined -- 》 NaN
7. 假：0 "" null undefined NaN false
六、return 返回值
变量 参数 返回值 没有数据类型 由值决定！
特性：
1 函数的返回值没有类型
2 函数后的代码不执行
3 return; 返回一个undefined
4 没有return 返回一个undefined 系统给
-----------------------------------------------
七、null 跟 undefined区别？ （没有！）
1.null a. 元素获取失败 b. 直接赋值 null c. 事件默认值 null
2.undefined
a. 定义了没赋值
b. 真的没定义
c. 函数没有明确返回值
d. 访问一个不存在的属性
e. 直接赋值 undefined
八、break continue
break continue; 终止循环语句
1.break 暴力 直接终止整个循环
2.continue 终止当前循环，进入下一轮循环
break 流程控制语句 switch
流程控制语句
if
switch
switch(变量){
case 值：
执行语句
break;
default: —— else
}
三目 条件？语句1：语句2;
if(条件){
语句;
}
&& : 条件 && 语句;
if(条件1 && 条件2 &&。。。。){
}
------------------------------------------------
九、运算符：
算术、比较、逻辑、赋值
十、定时器：
set/clearInterval(fn,time) （多次）
set/clearTimetout(fn,time) （一次）
十一、字符串与数组：
1. 字符串操作：
a. str.length（字符串长度）
b. str.indexOf(找东西) 从前往后 index -1
c. str.lastIndexOf 从后往前
d. str.charAt(index) 字符
e. str.substring(beginIndex[,endIndex]) （字符串截取）
eg: "abcdef".substring(2,4); -->cd 截取的个数：endIndex - beginIndex,不包含最后一位
f. str.split(切的规则) 返回数组
g. str.toLowerCase 小写 str.toUpperCase 大写
h. str.replace(str1|re,str2|fn);
i. str.match(re); 数组 没匹配到null
j. str.charCodeAt(index)--- > 返回code
k. String.fromCharCode(code) ---> 返回字符
2. 数组：
a. shift() 方法：把数组的第一个元素删除，并返回第一个元素的值
b. concat() 方法：用于连接两个或多个数组,并返回一个新数组，新数组是将参数添加到原数组中构成的
c. join() 方法：用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串而生成的
d. pop() 方法：用于删除并返回数组的最后一个(删除元素)元素,如果数组为空则返回undefined ,把数组长度减 1
e. push() 方法：可向数组的末尾添加一个或多个元素，并返回新的长度，（用来改变数组长度）
f. reverse() ：方法用于颠倒数组中元素的顺序
g. slice() 方法：可从已有的数组中返回选定的元素。slice(开始截取位置，结束截取位置)
h. splice() ：方法向/从数组中添加/删除项目，然后返回被删除的项目,splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素
i. unshift：将参数添加到原数组开头，并返回数组的长度
j. sort(orderfunction)：按指定的参数对数组进行排序
arr.sort(function(n1,n2){//比较函数
return n1 - n2;// 从小大大
}) 排序
十二、json
1. json: 存数据 arr:
比较值 json arr 区别
a. length 没有 有
b. 循环for in for for in 性能低
c. 下标 字符串 数字
d. 顺序 无序 有序
json：{key:value} 键值对 键唯一！ 去重！
2. 字符串 转 json
a. eval("("+strJson+")")
b. JSON.parse(strJson); 格式严格 需要一个标准的json, 标准的json 字符串, 必须都是双引号！
c. json 转 字符串 JSON.stringify(json);
d. 兼容：eval全兼容 JSON 不兼容 ie8+
十三、样式的操作：
1. style 操作的是行间 obj.style.样式名 = value; cssText: 行间怎么写 cssText 就怎么写！
obj.style.cssText = "样式名:value"; cssText: 读 写 写： 会覆盖行间样式！
2. 获取非行间样式： obj.currentStyle.样式名 getComputedStyle(obj,false/null).样式名 w3c规范
3. false:伪类
4. 不能获取复合样式！
十四、作用域：
1. 全局 定义在函数外 全局可用
2. 局部 定义在函数内 仅函数内可用
3. 闭包 子函数可以访问父函数的东西（变量 + 函数）
十五、封闭空间：闭包！
(function(){
})(参数列表);
解决什么问题:1. 事件里面的i 2. 定时器里面的i 好处：省了一个函数名 防止重名
十六、预解析： 把变量的定义(仅仅是定义)提升到最顶上（作用域）！
1. 范围： a. script b. 作用域
2. 变的定义：var a = 12; a. 定义 var a; b. 赋值 a = 12;
3. 变量不带var 不会预解析！
4. return 后的代码不执行 但是会预解析 return 返回的代码不会预解析
5. 变量不会重复定义
十七、字符编码：
1. 中文范围：4e00-9fa5
2. 0x —— 十六进制
3. \u —— unicode编码
4. utf-8 3字节
5. gbk 2字节
十八、try:异常 if
try{
可能出错的代码
}catch(e){
补救的代码 或者提示
}
不要使用try 性能低！
十九、js组成：
1. ECMAScript 核心解释器 语法 BOM browser object model 操作浏览器的能力 DOM docuemnt object model 操作文档的能力
2. BOM：
a. alert √; window.navigator.userAgent √ ; window.loaction √
b. href 地址; hash 锚点 #name; host 主机名; pathname 资源路径; search 数据 ？
protocol 协议http:// file://; window.open(); √
c. 打开新窗口: open(url,打开方式);
打开方式：_self / _blank（默认值）用户体验、安全： 用户自己点击的操作！
d. document.write(); window.close(); window.confirm(); window.prompt();
3. DOM
节点 == 标签 == 元素;
a. 父节点 parentNode 一个对象;
b. 子节点 children; 数组
c. 兄弟节点：
上一个 previousElementSibling ||previousSibling
下一个 nextElementSibling ||nextSibling
d. 节点： 元素节点 文本节点
previousElementSibling 高级浏览器 元素节点
previousSibling 所有浏览器 包含文本节点
首尾：firstElementChild || firstChild children[0]
lastElementChild || lastChild children[len-1]
e. 创建节点
obj.tagName 标签名 都是大写; var oDiv = documemnt.createElement("标题名");
(a) 只能从document 创建元素
(b) 是添加到某一个具体的元素内 不能是document
(c) 创建忽略大小写
(d) 创建只能是英文 不能是中文 不兼容ie
f. 添加节点
父级.appendChild(obj); 父级.insertBefore(obj，谁前面);
g. 删除节点
父级.removeChild(obj); obj.parentNode.removeChlild(obj);
二十、盒子模型
offset:
offsetWidth/Height
offsetTop/Left
offsetParent
offsetWidth/Height:盒模型大小
盒模型：一个元素实际所占位置的大小
1 组成：width + padding + border 不包含margin
2 display：none; 没有盒模型
3 元素不设置宽高也有盒模型 内容决定
offsetTop/Left 一个元素距离定位父级的左边距 上边距
offsetParent 定位父级
function getPos(obj){
var l = 0;
var t = 0;
while(obj){
l += obj.offsetLeft;
t += obj.offsetTop;
obj = obj.offsetParent;
}
return {left:l,top:t};
}
根：
节点根：document 虚拟节点 parentNode -> null
定位的跟：body offsetParent-> null
-----------------------------------------
scrollLeft/Top/Height
document.documentElement.scrollLeft/Top ie ff
document.body.scrollLeft/Top chrome
documentElement html
二十一、瀑布流
瀑布流： 等宽不等高！
往最短的div 插入元素！
二十二、事件
1.事件 运动 seajs/requirejs ajax jsonp 正则
addMouseWheel lagou 翻转 chrome webqq
事件:用户的操作
事件对象：描述事件的详细信息
event ie chrome
ev 高级浏览器 ie9+
var oEvent = ev || event;
oEvent 什么属性？
clinetX/Y:可视区的坐标 最好把scrollTop/Left
2. 键盘事件 keyCode:
回车：13
方向：37 - 40
a-z: 65 - 97
0-9: 48 - 57
3. pageX/Y 鼠标距离页面的左上角的距离
pageX = clientX + scrollLeft
pageY = clentY + scrollTop
4. 功能键：
shift/alt/ctrilKey
5. 冒泡：cancelBubble = true;
什么叫冒泡？ 子元素的事件可以传播到父级身上！
特性：
a. 元素的不添加事件也会冒泡
b. 跟位置无关 只跟父子级关系
c. 冒泡可以取消
默认事件：浏览器自带的行为、功能
都可以取消：return false;
事件绑定 return false失效?
6. 哪个绑定会失效？
addEventListener —— ev.preventDefault();
2个绑定：
ie: obj.attachEvent(on+事件名，事件函数);
高级浏览器：
obj.addEventListener(事件名，事件函数,false);
事件流：事件捕获 + 冒泡
false 可以省略 但是不能省！
冒泡
7. true:事件捕获
99.9999% 都不会用！ —— 面试！
8. 解绑定：
detachEvent
removeEventListener
注意：匿名函数不能解除绑定！
9. 鼠标事件
onmouseover/out -- bug
onmouseover:判断一个来源
fromElement ie chrome
relatedTraget 高级浏览器
onmouseout：判断一个去向
toElement ie chrome
relatedTraget 高级浏览器
父级.contains(子元素); 是 true 不是 false
10. 事件委托：srcElement ie chrome
target 高级浏览器
好处:性能 推荐用事件委托！
11. 滚轮 :
wheelDelta —— onmousewheel ie chrome
detail —— DOMMouseScroll ff
addMouseWheel ——方向 上 下
下 true 火狐
wheelDelta 上120 下 -120
detail 上-3 下 3
onclik onmouseover onmouseover onmouseenter
onmouseleave onkeydown onkeyup onmousemove
onmoseup onmousedown onscroll onresize onload
onreadystatechange oncontextmenu onmosewheel
onfocus onblur onchange DOMMouseScroll
DOMContentLoaded onsubmit onpropertychange oninput
DOMContentLoaded —— onload
onreadystatechange
dom树：documet
onreadystatechange
readyState: interactive 正在渲染 complete 渲染完成
二十三、运动
运动的三要素： 起点 终点 时间
1. 定时器：30ms
距离:终点 - 起点 dis
次数：时间/30 count
n
位置： 起点 + 距离*n/count
2. 360角度 = 2PI弧度
n*1弧度 = n*180/Pi角度
二十四、seajs：
1 “自动”帮你引入代码
2 “自动”解决依赖
模块化开发：
模块：一个js文件就是一个模块！
3. 如何定义一个模块
define(function(require,exprots,module){
注意事项：
1 变量名不能修改
2 exprots module 不能共存 module优先！
module.exprots == exprots true
});
4. 如何使用一个模块
seajs.use(str/[js1,js2],function(mod1,mod2....){
});
请求模块：
use html ---> js
require js ---> js
二十四、requirejs
使用模块
require([js1,js2],function(mod1,mod2....){
});
二十五、ajax 状态码只有三位
ajax: 请求数据
1. 创建
a.XMLHttpRequest(); ie7+ 给高级浏览器用
b.ActiveXObject("Microsoft.XMLHTTP"); IE678
c.兼容：
(a) window
(b) try catch 不推荐
(c) 判断浏览器
(d) addEventListener
(e) in
2. 连接
open(方式，地址，是否异步 true);
方式: get post
get 数据在地址栏上 不安全 小32k 有缓存
post 不在 相对安全https 1G 没有缓存
https 数据加密 银行 钱 "慢"
http 数据不安全 明文传输 快
缓存:浏览器对同一个地址只会访问一次！
解决：地址不一样
添加一个随机因子（随机数）
a. Math.random() √
b. 时间戳
c. Math.random() + 时间戳
3. 发送
xhr.send();
4. 接收
xhr.onreadystatechange = 回调函数;
readyState:
(0) 对象创建完成
(1) 连接完成
(2) 数据发送完成
(3) 接收数据 报文头 响应头
(4) 接收数据 报文体 响应正文
if(xhr.readyState == 4){//完成 并不代表成功
//http的状态 xhr.status[200,300) 304
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
//成功
内容： xhr.responseText
} else {
//失败
}
}
5. http的状态: 一共三位 第一位代表类型
1xx 服务器正在响应请求、处理
2xx 成功
3xx 重定向
304 Not Modified 缓存
4xx 失败 —— 前端失败
404 not found
414 Request-URI Too Large
自己查百度 4xx
5xx 失败 —— 后端失败
503 宕机
http状态组成：状态码status + 文字描述 statusText
6. post:
a. open
b. 设置一个请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
c. send(数据)
7. ajax 请求数据 不能跨域
jsonp 跨域请求数据
跨域：只要 协议 域名 后缀 端口 任意一个不同 就算跨域！
为什么不能跨域？
安全：—— 同源策略！浏览器限制的！
http组成：
http:// www. zhinengshe .com :80 /index.html
协议 二级域名 主域名 后缀类型 端口 资源
http://www.baidu.com
http://mp3.baidu.com
http://tieba.baidu.com
http://map.baidu.com
http://d.c.b.a.baidu.com
可以
http://www.baidu.com/a.html
http://www.baidu.com/b.html
不可以
http://www.baidu.com/a.html
https://www.baidu.com/b.html
不可以
http://mp3.baidu.com/a.html
http://www.baidu.com/b.html
不可以
http://www.baidu.com:80/a.html
http://www.baidu.com:8080/b.html
8.jsonp原理：
a. 文件后缀对计算机没有任何意义 —— 给人看的
b. script标签可以访问任何网站的文件
baidu:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaa&&cb=xxxx
wd:word
cb:callback
360:
http://sug.so.360.cn/suggest?callback=xxxx&word=aaaa
二十六、script
script标签是一次性！
总结：
1. 创建script
2. 准备一个全局函数
toUTCString : 世界标准时间 √
toGMTString : 格林威治时间
二十七、正则表达式
正则：用计算机的语言描述一个规则！
正则 大陆——正则表达式 台湾——规则表达式
正则对象：RegExp
var re = new RegExp("规则","选项");
var re = /规则/选项;
选项：三种img 没有顺序
i: ignore 忽略大小写
m: mutil-line 多行匹配
g: global 全局匹配
str.match(re); 数组 没匹配到 null
str.search(re); index -1
str.replace(str1|re,str2|fn);
function(匹配到的东西){
必须有返回值！
}
re.test(str) true匹配到了 false没找到
正则的脾气：
1 懒 g
2 蠢 加量词 + 若干
3 贪婪 尽可能多的匹配东西
正则规则：
中括号：[];
一 范围
[a-z]
[4-6]
-----------------------------------------
二 任选一个
/[abcdef]/ a b c d e f
/a[bcd]/
abi ac ad
/a[bcd]+/
abbbbbb
acccc
adddd
** 量词 只管一个
/a(bc)+/
abcbcbc.....
() 分组 要么都出现 要么都不出现！
-----------------------------------------
三 排除 ^ 必须出现在第一位！
[^a-z]
[0-9^a-z] ×
-----------------------------------------
转义：转换一种含义 \
只有特定字母才有！
计算机： \n \r \t tab \f \b \u
\d 数字
\w wrod 单词 字母 数字下划线 [a-zA-Z0-9_]
\s 空字符
\b 单词边界
\D 非数字 [^0-9]
\W 非单词 [^a-zA-Z0-9_]
\S 非空字符
\B 非单词边界
. 任意字符
--------------------------------
量词：个数
{n} 正好n个 /\d{5}/
{n,m} 最少n个 最多m个
{n,} 最少n个 多了不限
{,m} ×
+ 若干 {1,} 至少有一个
* 任意 {0,} 可以没有 慎用！
? 可有可无 {0,1}
--------------------------------
^ 行首
$ 行尾
-----------------------------
二十八、表单三要素：
1 action 数据提交到哪
2 name 叫什么
3 value 值是什么
表单：
用户名：32位 第一位必须是英文 必须六位以上
/^[a-z]\w{5,31}$/i
chen00jian @ sina .com .cn
\w+ @ [a-z0-9\-]+ (\.[a-z]{2,6}){1,2}
电话号码： 区号[3,4] + 号码[7,8]
(0\d{2,3} -)? [1-9]\d{6,7}
年龄：16-100
16-19 20-99 100
1[6-9]|[2-9]\d|100
-----------------------------------------
性能优化 mvc