1.语言基础
2.严格模式
3.js组成（ECMAScript DOM BOM）
4.各种(DOM BOM)例子
5.组件
6.事件
7.事件各种例子
8.运动
9.各种运动例子
10.jquery
11.cookie
12.seajs
语言特性：
预解析：程序执行之前，会把所有变量的声明，提到顶部。（仅仅是声明）
预解析，不会突破你的作用域。
不会突破script标签。
读取一个script->预解析->执行里面的代码->读取下一个script->预解析->执行里面的代码->...
作用：为了性能。不管你喜不喜欢，用不用。它都存在。
函数也有预解析。
注意：变量形式的函数，预解析是按照变量走。
预解析--------火狐下没问题。。。待解释。
引用：在对象身上会出现。
函数的真正写法：
new Function('js语句')
获取字符串编码：
str.charCodeAt(下标)； 获取某一位置的编码
通过编码得到字符：
string.fromCharCode(编码)；
计算机中所有的汉字：
19968
40869
2万多个汉字。
16进制
4e00-9fa5
16进制js中写法：
0x4e00-0x9fa5
加密解密
关于变量：
变量在第一次声明赋值时，如果不加var会变成全局变量；
全局变量并不好，能不用就不用。
window的就是全局的。
赋值表达式
赋值本身是有值的
逗号表达式：听后面的东西
判断：听后面的
alert：因为alert是函数调用，用逗号相隔，被当成了传参。如果想让逗号表达式好使，加括号提高优先级
赋值：因为都会表达式，优先级特别低，所以先算赋值，后算逗号。加括号就好了
逗号表达式，在声明变量时不能加var.
js中的bug。js中的bug多的跟山一样。
JS的作者是谁？ 布兰登.艾克 （Brendan Eich）
bug是作者弄出来的。
*************************
严格模式
'use strict';
严格模式，用所有的js文件都加上严格模式。
-------------------------
严格模式是不是好东西？必须是好东西。
解决问题：
1.解决了this问题；
2.避免了不加var声明全局变量；
3.不允许在if,switch,for,while,for in里面声明函数；
4.不允许使用with
注意：
1.严格模式有作用范围；函数、script标签、js文件
2.严格模式的'use strict'必须放在第一位置；
高级浏览器兼容，IE9除外；
------------------------------------
异常 bug
程序员不可控制的东西。
try...catch...
try(){
可能会出错的代码；
}catch(){
e代表了，错误信息
补救措施
}
不要用。救急的时候用。线上bug用
性能差
-------------------------------------
js由什么组成？
ECMAScript 核心解释器
定义了一些基本的语法和功能。
兼容性：完全兼容。因为，提供的都是最基本，最简单的功能。
---------------------------
DOM 文档对象模型 Document Object Model
document 所有文档的操作。
获取元素，改变颜色。删除元素，改个宽度，创建个元素，修改个内容。
兼容性：基本兼容，有不兼容的，可以解决。
---------------------------
BOM 浏览器对象模型 Borswer Object Model
windou 所有关于浏览器的操作。
关闭个页面，打开个新窗口，访问一下历史记录。检测浏览器信息
兼容性：基本不兼容，不兼容没办法解决。
--------------------------
前端实现不了的功能:
1.复制剪贴的内容
2.全选
3.判断app安装
4.自动播放背景音乐
5.判断是不是4G
6.获取mac
-------------------------------------
js组成部分：
ECMAScript 核心解析器
-------------------------------------
DOM 文本对象模型
标签=元素=节点
DOM树
获取标签名
obj.tagName 每个字母都是大写的
获取父级的子节点
obj.children 获取子节点（只包括第一层）
obj.childNodes 获取子节点（会把文本节点一起获取到）
检测节点类型
obj.nodeType
标签节点 1
文本节点 3
document 9
获取父节点
obj.parentNode 获取父节点
最大的祖宗就是document,在往上没了所以是null
获取兄弟节点：
获取下一个兄弟节点
obj.nextElementSibling 只兼容高级浏览器
obj.nextSibling 只兼容低版浏览器
兼容写法：
var oNext=obj.nextElementSibling||obj.nextSibling;
关于并且
&&两边都是真的，才算真的。如果第一个是真的，那就有必要去看看第二个。
如果第一个是假的，那就没有必要去看第二个，也就不执行。
关于或
||有一个是真的，整个例子就是真的。如果第一个是假的，那就有必要去看看
第二个。如果第一个是真的，那就没有必要去看第二个，也就是不执行。如果
多个都是假的，那就听最后一个。
获取上一个兄弟节点
obj.previousElementSibling 只兼容高级浏览器
obj.previousSibling 只兼容低版浏览器
兼容写法：
var oPre=obj.previousElementSibling||obj.previousSibling;
---------------------------------------------------------
获取首尾子节点：
获取首子节点
父级.firstElementChild 只兼容高级浏览器
父级.firstChild 只兼容低版浏览器
兼容写法：
var oFirst=父级.firstElementChild||父级.firstChild
获取尾子节点
父级.lastElementChild 只兼容高级浏览器
父级.lastChild 只兼容低版浏览器
兼容写法：
var oFirst=父级.lastElementChild||父级.lastChild
--------------------------------------------------------
物体信息：
obj.offsetWidth; 获取盒子模型的宽度
obj.offsetHeight; 获取盒子模型的高度
obj.offsetLeft; 距离定位父级的左边距
obj.offsetTop; 距离定位父级的上边距
getStyle offsetWidth
类型 string number
width 纯width 盒子模型的宽度
none 能获取 不能获取
obj.offsetParent 获取到定位父级
关于父级
obj.parentNode 结构上的父级 最大document
obj.offsetParent 定位上的父级 最大body
-----------------------------------------------------
字节
英文字母 1字节
数字 1字节
汉字 GB2312 2字节
UTF-8 3字节
-----------------------------------------------------
创建元素
document.createElement('标签名') 创建出来的元素跟html中写的一模一样
插入
父级.appendChild(新元素) 在元素的最后面插入一个东西
父级.insertBefore(要插入，插入谁) 插入到谁谁之前
删除元素
父级.removeChild(要删除的元素) 从父级中删除某个元素
克隆元素
obj.cloneNode();
obj.cloneNode(true); 深度克隆
会把内容一起克隆
会把ID一起克隆，所有要注意：
克隆之后要把ID删掉
但是有问题，会留一个空的ID，不好看。后面待解决。。。
-------------------------------------
BOM 浏览器对象模型
BOM 操作浏览器
window.open(要打开的地址) 打开一个页面
chrome 拦截
Firefox 阻止
IE 直接打开
注意：用户的操作才能直接打开新的页面。
window.close() 关闭当前页面
chrome 直接关闭
IE 问问你是否确定要关闭
Firefox 脚本不得关闭非脚本打开的窗口
注意：脚本打开的窗口，它才可以完美的关闭。
window.navigator.userAgent 获取浏览器版本信息
about:blank; 空白页
在线运行代码：
window.open(); 打开一个新的空白页，打开之后它会返回新页面的window
可以用新的window去document.write();
在线运行代码，只能看不能用。
window.location 当前地址
window.location.protocol 获取协议
window.location.pathname 路径
window.location.host 网址
window.location.hash 锚
window.location.search 提交的数据
window.location.href 页面跳转
http 超文本传输协议
https 超安全超文本传输协议
用户体验：
document document
body document.body
title document.title
html document.doucmentElement
----------------------------------------
右下角富媒体（右下角悬浮框）
方法：
1.position:absolute right:0 bottom:0
2.position:fixed right:0 bottom:0
3.js计算
滚动条滚动事件
onscroll
滚动距离
document.documentElement.scrollTop 上下滚动距离
兼容Firefox和IE
document.body.scrollTop
兼容chrome
兼容写法：
var scrollT=document.documentElement.scollTop||document.body.scrollTop
document.documentElement.scrollLeft 横向滚动距离
兼容Firefox和IE
document.body.scrollLeft
兼容chrome
兼容写法：
var scrollT=document.documentElement.scollLeft||document.body.scrollLeft
可视区大小(可视区宽高)：
document.documengElement.clientWidth 可视区宽度
document.documengElement.clientHeight 可视区高度
改变窗口大小事件
onresize
---------------------------------------
获取绝对位置
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};
}
getBoundingClientRect().left 元素左边距离页面左边的距离
getBoundingClientRect().top 元素上边距离页面上边的距离
getBoundingClientRect().right 元素右边距离页面左边的距离
getBoundingClientRect().bottom 元素下边距离页面上边的距离
图片延迟加载（懒加载）
好处：省流量，省资源
关于属性
obj.getAttribute('属性名'); 获取自定义属性
get 获取得到
Attribute 属性
obj.setAttribute('属性名字','属性值') 设置自定义属性
要成对出现
obj.removeAttribute('属性名') 删除属性
解决cloneNode()问题：
切记，使用cloneNode:cloneNode之后一定要removeArrtibute
-----------------------------------
瀑布流：
系统提供的，获取一组元素的方法，获取出来的不是一个真正的数组。
所以用不了常用的数组方法。
================================
getElementById
===============================
obj.offsetHight 获取盒子模型的高度
obj.scrollHight 内容高度
-------------------------------------
吸顶条
-------------------------------------
文本提示框
obj.onfocus 获取焦点事件
obj.onblur 失去焦点事件
obj.focus() 让一个元素获取焦点
obj.blur() 让一个元素失去焦点
------------------------------------
innerHTML的问题：
永远都是先把原来的删除，然后再添加
注意：会把之前的元素的事件给杀掉。
-------------------------------------
图片预加载
========================================
oImg.onload 当图片加载成功之后触发
oImg.onerror 当图片加载失败之后触发
图片对象
new Image(); 创建一个图片对象
这种写法跟html中写img标签没有任何区别。
网络进度条
http://www.zhinengshe.com/works/3525/img/0.jpg
求比例：拿已有的/总共
不适合处理小数
0.04000000000000001
保留小数 .toFixed(保留的位数);
=================================
appendChild
insertBefore
剪切功能
==========================================
table
oTable.tBodies[0] 能获取到表格中的tbody
oTBody.rows tbody中的所有tr
oRow.cells 列
DOM结束了。
==============================================
关于form表单:
form是干什么的？ 向服务器提交数据的。
必不可少的部分
action 提交地址
submit 提交按钮
name
提交地址的区别
有http:// 是在网上找
没有http:// 是在本地找
地址写?相当于提交到当前页面
method 提交方式
get 系统默认的提交方式
明文提交，不安全,容量小（32KB左右），有缓存
post
密文提交，相对安全,容量大（1GB），没有缓存
http:// 超文本传输协议
https:// 超安全超文本传输协议
一般人用不了，因为收费，还很贵。
资源，分享
get便于分享。
name可以重复。
获取元素
document.getElementById 通过id获取一个
obj.getElementsByTagName 通过标签名获取一组
obj.getElementsByClassName 通过class获取一组
document.getElementsByName 通过name获取一组
===========================================
事件
onload 加载成功事件
onerror 加载失败事件
onclick 点击事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onresize 改变可视区大小事件
onscroll 滚动滚动条事件
onmouseup 鼠标抬起事件
onmousedown 鼠标按下事件
onchange 状态改变事件
onfocus 获取焦点事件
onblur 失去焦点事件
ondblclick 双击事件
onmousemove 鼠标移动事件
===================================
事件对象 包含了事件的详细信息。
参数ev 兼容：高版本浏览器
event 兼容：IE，chrome
兼容写法: var oEvent = ev||event;
获取鼠标在可视区中的坐标
横轴坐标X 事件对象.clientX
纵轴坐标Y 事件对象.clientY
鼠标在页面中的坐标： 只兼容高版本浏览器
oEvent.pageX
oEvent.pageY
以后只要是使用到了可视区中的坐标，就一定要加上滚动距离
事件冒泡
子级触发了事件，会找父级相同的事件，一直找到顶。
哪怕子级没有这个事件，也会往上冒。
找父级，是按照结构找的，跟定位没有任何关系。
取消冒泡。
oEvent.cancelBubble=true;
***如果事件冒泡没有出问题，就不要去取消冒泡。
***如果随便取消冒泡，会出现一些意想不到的结果。
放大镜
l/(oS.offsetWidth-oM.offsetWidth)=?/(oImg.offsetWidth-oB.offsetWidth)
l2=l/(oS.offsetWidth-oM.offsetWidth)*(oImg.offsetWidth-oB.offsetWidth)
-------------------------------------
放大镜：
事件对象：只能获取鼠标和键盘的事件。
键盘事件：
onkeydow 键盘按下
onkeyup 键盘抬起
每个按键都有一个编码
oEvent.keyCode 获取键盘编码
a 65
b 66
c 67
d 68
← 37
↑ 38
→ 39
↓ 40
键盘控制div移动，不卡。作业
--------------------------------------
默认事件 浏览器自带的一些行为。
阻止默认事件
return false;
右键菜单 上下文菜单
oncontextmenu
刷新页面：(页面重新加载)
window.location.reload();
表达提交事件：
oForm.onsubmit
Js当中不允许使用组合按键的编码
oEvent.ctrlKey 如果按下crtl就是ture，否侧就是flase
oEvent.shiftKey 如果按下shift就是ture，否侧就是flase
oEvent.altKey 如果按下alt就是ture，否侧就是flase
-------------------------------------
拖拽
鼠标按下 保存鼠标在DIV中的位置
鼠标移动 鼠标新的位置-鼠标在div中的位置
鼠标抬起 干掉所有不用了的事件
设置捕获和释放捕获是IE的东西
设置捕获 把所有浏览器自带的事件都干掉，只听当前这个元素的。
obj.setCapture();
释放捕获
obj.releaseCapture();
输入文字的事件
obj.onpropertychange IE系列
obj.oninput 兼容高级浏览器
事件不用处理兼容
obj.onpropertychange=obj.oninput=function(){}
IE9兼容了吗？删除不好用
-------------------------------------
**在工作当中所有的事件必须绑定上去
**因为这个事件不一定只有你一个人使用
同一个元素加同一个事件，不能加多次，后加的会把先加的覆盖。
事件绑定(事件监听) 给同一个元素加同一个事件加多次。
obj.addEventListener(sEv,fn,flase); 兼容高级浏览器，事件名不能加'on'
obj.addEventListener(事件名,函数,flase);
obj.attachEvent('on'+sEv,fn); 兼容IE系列,IE10-
兼容写法：
function addEvent(obj,sEv,fn){
if (obj.addEventListener) {
obj.addEventListener(sEv,fn,false);
} else{
obj.attachEvent('on'+sEv,fn);
}
}
false 事件冒泡
true 事件捕获
事件流：
DOM事件流 冒泡和捕获
IE事件流 冒泡
事件冒泡（冒泡阶段）;false 子级往父级找 所有浏览器（冒泡）
事件捕获（捕获阶段）;true 父级往子级找 高级浏览器(冒泡和捕获)
只有高级浏览器有，因为只有使用addEventListener(,,ture)的时候才会触发
兼容写法：
function removeEvent(obj,sEv,fn){
if (obj.removeEventListener) {
obj.removeEventListener(sEv,fn,false);
} else{
obj.detachEvent('on'+sEv,fn);
}
}
匿名函数不能解除绑定。
this不好的用法：
1.定时器
2.事件中套了一层函数
3.行间事件中套了一层函数
4.attachEvent中使用this
九宫格拖拽
var oldX = oEvent.clientX;
var oldY = oEvent.clientY;
var oldW = oBox.offsetWidth;
var oldH= oBox.offsetHeight;
var oldL = oBox.offsetLeft;
var oldT = oBox.offsetTop;
-------------------------------------
碰撞检测
判断是否碰到了，不靠谱，因为条件太多
判断是否没碰到
r1<l2||b1<t2||l1>r2||t1>b2
--------------------------------------
问题：
1.循环加事件，性能不好
2.给未来元素加事件（之间加的事件，未来的元素没有）
事件委托(事件委派):
oEvent.srcElement 触发这个事件的源头是谁
兼容Chrome,IE系列
oEvent.target 触发这个事件的源头是谁
兼容火狐
兼容写法：
var oSrc=oEvent.srcElement||oEvent.target;
obj.tagName 获取标签名（标签名大写）
作用:
1.提高性能；
2.给未来元素加事件；
---------------------------------------
自定义的滚动条
---------------------------------------
鼠标滚轮事件
onmousewheel 兼容chrome,ie
oEvent.wheelDelta 获取鼠标滚轮滚动的方向
下 -120
上 120
DOMMouseScroll 兼容firefox
oEvent.detail 获取鼠标滚轮滚动的方向
下 3
上 -3
DOM事件
1.以DOM开头的事件
2.DOM事件不能直接加，必须要使用事件绑定去加。
return false阻止默认事件遇到了事件绑定addEventListener就不好使了
oEvent.preventDefault(); 阻止默认事件 兼容高级浏览器
回调函数
-------------------------------------
移入移出bug:
onmouseover
oEvent.fromElement（不兼容火狐）
oEvent.relatedTarget(兼容高级浏览器)
兼容写法：
oEvent.fromElemen||oEvent.relatedTarget
移入div里面
正常
外部直接移入到div body
外部直接移入到h2 html
异常
从div移动到h2 div
从h2移动到div h2
检测obj是否包含obj2
obj.contains(obj2)
包含 ture
不包含 false
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
onmouseout
oEvent.toElement（不兼容火狐）
oEvent.relatedTarget(兼容高级浏览器)
兼容写法：
oEvent.toElemen||oEvent.relatedTarget
obj是否包含obj2
obj.contains(obj2)
包含 ture
不包含 false
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
这两个事件本身没有over和out的bug
onmouseenter 代替移入
onmouseleave 代替移出
-------------------------------
window.onload html,css,js，图片，flash...
把所有资源都加载完成之后执行
domready document,比window.onload快一些
DOMContentLoaded 兼容IE9+,chrome,firefox
onreadystatechange 兼容低版本IE
document.readyState
interactive 开始加载
complete 加载完成
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded',function(){
fn();
},false)
}else{
document.attachEvent('onreadystatechange',function(){
if (document.readyState=='complete') {
fn();
}
})
}
------------------------------
运动： 让一个东西动起来
定时器有问题：
1，定时器不稳定
2.切换标签会变慢
start 起点 0
target 目标点 500
dis=target-start 总距离
time 总时间 3000
count总次数 time/30 100
一次走多少 总距离/总次数
运动核心：
dis 总距离
count 总次数
start+n*dis/count;
start+dis*n/count;
运动框架：
starMove(obj,iTarget,time);
starMove(obj,sName,iTarget,time);
starMove(obj,sName,iTarget,time);
多个物体运动：
starMove(obj,sName,iTarget,time); 能改变opacity
写运动例子的秘诀：
1.先把基本的功能做出来
2.把基本的功能转化成运动
-------------------------------------
运动核心：
dis 总距离
count 总次数
start+dis*n/count;
-----------------------------
匀速运动（线性运动）
start+dis*n/count;
加速运动
var a=n/count;
start+dis*Math.pow(a,3);
减速运动
var a=1-n/count;
start+dis*(1-Math.pow(a,3));
匀速运动 linear
加速运动 ease-in
减速运动 ease-out
链式运动
startMove(obj,json,type,time,fnEnd);
合并参数
startMove(obj,json,options);
给默认值
startMove(obj,json,options)
----------------------------
运动框架:
dis
count
start+dis*n/count
function getStyle(obj,sName){
return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
function startMove(obj,json,options){
options = options||{};
options.duration = options.duration||700;
options.easing = options.easing||'ease-out';
var start = {};
var dis = {};
for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
if(isNaN(start[name])){
switch(name){
case 'left':
start[name]=obj.offsetLeft;
break;
case 'top':
start[name]=obj.offsetTop;
break;
case 'height':
start[name]=obj.offsetHeight;
break;
case 'width':
start[name]=obj.offsetWidth;
break;
case 'opacity':
start[name]=1;
break;
case 'borderWidth':
start[name]=0;
break;
}
}
dis[name]=json[name]-start[name];
}
var count = Math.floor(options.duration/30);
var n = 0;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
n++;
for(var name in json){
switch(options.easing){
case 'linear':
var cur = start[name]+ dis[name]*n/count;
break;
case 'ease-in':
var a = n/count;
var cur = start[name]+ dis[name]*Math.pow(a,3);
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name]+dis[name]*(1-Math.pow(a,3));
break;
}
if(name=='opacity'){
obj.style.opacity=cur;
obj.style.filter='alpha(opacity:'+cur*100+')';
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete&&options.comlete();
}
},30);
}
-------------------------------------
回到顶部
人改的和JS该的都嫩该出发onscroll事件
区分是人滚动的还是JS滚动的。
无缝滚动;
1.marquee 标签
2.判断offsetLeft
3.数学去算。
left<0 left%w;
left>0 (left%w-w)%w;
**减少dom操作
定时器是一个特殊的循环。
分步运动;
无限运动;
-------------------------------------
圆：
a 假设是角度；
需求：角度转弧度;
360=2π；
180=π
π=3.14
角度--》弧度
n*PI/180
funciton d2a(d){
return d*Math.PI/180;
}
弧度--》角度
n*180/PI
function a2d(a){
return a*180/Math.PI;
}
Math.sin(); sinα
Math.cos(); cosα
Math.PI(); π
sinα=对边比斜边 sinα=a/R;
a=sinα*R
x轴 X=R+sinα*R；
cosα=b/R
b=cosα*R
y轴 Y=R-cosα*R
---------------------------
穿墙：
1.判断 32个判断
2.算
判断鼠标从哪个方向移入的DIV
判断鼠标从哪个方向移出的DIV
方向-》角度
Math.atan2(y,x);
---------------------------
苹果菜单：
Math.sqrt(a*a+b*b)
---------------------------
官网分页
------------
布局 浮动
JS效果 定位
布局转换 布局依然用浮动，用JS把布局变成定位
写布局转换，必须写2个循环，不能写一个。
-------------------------------------
服务器：是计算机。基本功能：存储。
WEB服务器：响应客户端的请求
把自己的计算机变成服务器。
集成环境
wamp 在window环境下 手动启动
appserv 自动启动
mamp mac环境下
localhost
127.0.0.1
---------------------------------
目前的问题：
1.引入js文件太多。
2.引入js文件有先后顺序，因为有依赖关系。
3.变量名各种冲突，覆盖
变量名冲突：
封闭空间
命名空间
模块化：
seajs 国产 CMD
公共模型模块
comon module define
requirejs 进口 AMD
异步模型模块
Asynchronous module define
作用：
1.不用手动引入JS文件
2.解决依赖关系的问题
3.解决变量名冲突、覆盖的问题
()
seajs
http://seajs.org
requrejs
http://www.seajs.org
**最好放在服务器环境下。
一个JS文件就是一个模块,一个模块就是一个功能
define(function(require,exports,module){
require 导入一个模块
exports 导出一个模块
module 批量导出模块
});
seajs.use(模块名，function(){
});
可以不写后缀名
定义模块
define(function(require,exports,module){
require 导入一个模块
exports 导出一个模块
eg: exports.a=12;
module.exports={} 批量导出模块
});
使用模块
seajs.use(模块名，function(mod){
mod 模块
});
使用多个模块
seajs.use([模块名,模块名2]，function(mod,mod2){
mod 模块
});
<script src='' data-main=''></script>
给路径起别名
seajs.config({
alias:{
别名：路径
}
})
--------------------------------------
事件
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove
onkeydown
onkeyup
onload
onerror
onchange
onclick
ondblclick
onscroll
onresize
onsubmit
oncontextmenu
onmouseenter
onmouseleave
onfocus
onblur
oninput
onpropertychange
onreadystatechange
DOMContentLoaded
onmousewheel
DOMMouseScroll
事件对象
var oEvent = ev||event;
oEvent.clientX
oEvent.clientY
oEvent.cancelBubble=true;
oEvent.detail
oEvent.wheelDelta
oEvent.keyCode
oEvent.ctrlKey/shiftKey/altKey
oEvent.srcElement
oEvent.target
oEvent.fromElement
oEvent.toElement
oEvent.relatedTarget
oEvent.preventDefault()
oEvent.pageX
oEvent.pageY
-------------------------------------
图片预加载用数组包起来
var images = new Array();
function preloadImages(){
for (i=0; i < preloadImages.arguments.length; i++){
images[i] = new Image();
images[i].src = preloadImages.arguments[i];
}
}
preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg", "jser.jpg");
=================================================
滚轮事件：
function addEvent(obj,sEv,fn){
if (obj.addEventListener) {
obj.addEventListener(sEv,fn,false);
} else{
obj.attachEvent('on'+sEv,fn);
}
}
function addwheel(obj,fn){
function fnwheel(ev){
var bOk=true;
var oEvent=ev||event;
if (oEvent.wheelDelta) {
if (oEvent.wheelDelta<0) {
bOk=true;
} else{
bOk=false;
}
} else{
if (oEvent.detail>0) {
bOk=true;
} else{
bOk=false;
}
}
fn&&fn(bOk);
oEvent.preventDefault&&oEvent.preventDefault();
return false;
}
if (window.navigator.userAgent.indexOf('Firefox')!=-1) {
addEvent(obj,'DOMMouseScroll',fnwheel)
} else{
addEvent(obj,'mousewheel',fnwheel)
}
}
-------------------------------------
JQuery 库 完全由一推JS代码组成
辅助我们开发，帮助我们快速开发。
jquery能做的事，js一定能做。
JS能做的事，jquery不一定能做。
JS不能做的事，jquery必须能做到。
www.jquery.com
JQuery版本：
1.X 适用于亚非拉地区
2.X 适用于欧美
不兼容低版本IE的
不是版本号越高就越好。
1.7.2
JQuery免费
---------------------------------
JQuery主要是给不会用原生JS人用的；
JS JQuery
window.onload $(function(){});
获取元素 $('#btn');
加事件 .click();
JQeury:
页面加载 $(function(){});
添加事件 .click(function(){});
--------------------------------
show(); 显示
hide(); 隐藏
hover(fn1,fn2); 移入移出切换
toggle(fn1,fn2); 点击切换
里面可以放好多函数。切换着执行。
效果： 有问题，不用
fadeIn(); 淡入
fadeOut(); 淡出
slideDown(); 滑入
slideUp(); 滑出
效果停止：
.stop();
动画：
animate({}); 动画
*以后只要使用animate前面一定要加.stop();
--------------------------------
JQuery选择器：
$('#id') 通过ID获取
$('.class') 通过class获取
$('标签名') 通过标签名获取
$().find() 在XXX中获取XXX元素
层级选择器
$('#box ul li input')
属性选择器
$('元素名[属性名=属性值]');
伪类选择器
:first; 获取第一个
:last; 获取最后一个
:eq(2); 获取到下标是几的元素
:lt(2); 获取到下标小于几的元素
:gt(2); 获取到下标大于几的元素
:odd 获取到奇数行的元素
:even 获取到偶数行的元素
:contains(text); 获取到包含某一段文本的元素
:has(); 获取到包含某一个标签的元素
修改样式
.css(样式名，样式值);
---------------------------------
jquery操作：
jquery中的所有的获取都是获取的第一个
操作样式
.css('样式名'); 获取样式
.css('样式名'，'样式值'); 设置一个样式
.css({样式名：样式值，样式名：样式值}); 批量设置样式
操作属性
.attr('属性名'); 获取样式
.attr('属性名'，'属性值'); 设置一个样式
.attr({属性名：属性值，属性名：属性值}); 批量设置样式
操作内容
表单元素
.val(''); 设置
.val(); 获取
非表单元素
.html('') 设置
.html(); 获取
操作class
添加class
addClass('class') 添加
删除class
removeClass('class') 删除
----------------------------------
.eq 下标的意思
jquery中的this
$(this)
得到当前元素的索引
$(this).index();
----------------------------------
jquery的DOM
$('div').append('<strong>jquery</strong>') 在div内部的最后面追加一个strong
$('strong').appendTo('div') 把strong追加到div元素内部中后面
$('<em></em>').appendTo('div') 创建一个em追加到div内部中后面
$('div').prepend('<strong>jquery</strong>') 在div内部的最前面追加一个strong
$('strong').prependTo('div') 把strong追加到div元素内部中前面
$('<em></em>').prependTo('div') 创建一个em追加到div内部中前面
$('div').after('<strong></strong>') 把strong添加到div后面
$('div').bofore('<strong></strong>') 把strong添加到div面前
$('p').inserAfter('div') 把p放到div外部后面
$('div').inserBofore('p') 把div放到p内部前面
----------------------------------
创建一个元素
$('标签');
删除元素
$('div').remove();
---------------------------------
jquery事件
jquery中所有的事件都是绑定上去的
jquery事件中的绑定
$(选择器).bind('事件',fn);
$(选择器).on('事件',fn);
jquery事件中的解除绑定
$(选择器).unbind('事件',fn);
$(选择器).off('事件',fn);
使用时一定要注意：
$(选择器).unbind(); 把所有元素都解除绑定
事件委托
$().live('事件',fn);
解除事件委托
$().die('事件',fn);
ev事件对象直接是兼容的。
return false; 阻止默认事件，取消冒泡
阻止默认事件
ev.preventDefault();
取消冒泡
ev.stopPropagation();
$().position().left
$().position().top
-------------------------------------
jquery 物体信息
获取相对于父级的位置 不包括margin
$('选择器').position().left offsetLeft
$('选择器').position().top offsetTop
获取元素的绝对位置
$('选择器').offset().left getPos().left
$('选择器').offset().top getPos().top
$('选择器').width() 纯宽度
$('选择器').height() 纯高度
$('选择器').innerWidth() 宽度+padding
$('选择器').innerHeight() 高度+padding
$('选择器').outerWidth() 高度+padding+border 盒子模型offsetWidth
$('选择器').outerHeight() 高度+padding+border 盒子模型offsetHeight
==================================
原生JS对象:document.getElementById
原生JS对象不能使用jquery中的方法和属性
jquery对象:$()
jquery对象不能使用原生JS中的方法和属性
原生JS对象和jquery对象转换
原生JS对象-》jquery对象
用$()包起来
jquery对象-》原生JS对象
1.$('选择器')[下标]
2.$('选择器').get(下标)
index() 当前这个元素在同级元素中的第几个
工具：
$.trim(obj) 去掉字符串两端的空格
$.isarray(obj) 判断是否是数组，是就返回ture,否侧返回false
$.type(obj) 检测是什么数据类型
==================================
jquery的链式操作
siblings(); 同级
==================================
jquery插件 非常火
关于插件有两种人：
用插件的人 舒服 简单，快速，提高工作效率
写插件的人 更舒服 $$$
==================================
****jquery中所有的this都是JS原生对象，但有一个例外，在插件
里面this就是jquery对象。
写插件
$.fn.xxx=function(){
}
$.fn.插件名=function(){
}
$.fn.extend({
插件名:function(){
},
插件名:function(){
}
})
=================================
jquery中的循环
$('选择器').each(function(index,element){
//index 索引
//elemnt 每一个原生对象
//this 每一个原生对象
})
-------------------------------------
cookie 存东西
===============================
1.要知道如何使用
2.要知道什么时候使用
===============================
cookie的特性：
1.必须配合服务器环境使用
2.cookie是成对出现的。一个名字对应着一个值
3.cookie不安全，所以不会去保存一些重要的数据
4.cookie的容量是有限的，比较小，差不多有4KB左右
5.cookie有生命周期。生命周期：活多久。
expires 生命周期
默认是 Session
session 当会话结束时，就死掉。
当浏览器关闭时，会话算是结束了。
6.cookie不能跨域名
7.cookie不能跨浏览器
8.cookie作用域：
/2015-10-21/a/b 一个cookie只有在这个路径下使用
name value path expires
名字 存的东西 存到哪 生存周期
==============================
1.如何来创建一个cookie?
document.cookie=''; 错误的
document.cookie='名字=值'; 正确的
document.cookie='age=18';
创建cookie的时候设置一下生命周期
EXPIRES
var oDate=new Date();
oDate.setFullYear(2016);
oDate.setHoure(0,0,0,0);
document.cookie='name=value; EXPIES='+oDate;
真正创建一个cookie
document.cookie='name=value; PATH=/; EXPIRES='+oDate;
function addCookie(name,value,iDay){
if (iDay) {
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+'; PATH=/; EXPIRES='+oDate.toGMTString();
} else{
document.cookie=name+'='+value+'; PATH=/;
}
}
2.获取cookie
如何获取cookie?
function getCookie(name){
var arr=document.cookie.split('; ');
for (var i=0;i<arr.length;i++) {
var arr2=arr[i].split('=');
if (arr2[0]==name) {
return arr2[1];
}
}
}
3.如何删除一个cookie
function removeCookie(name){
addCookie(name,1,-1);
}
在不同浏览器下日期格式是不同的：2种
1.GMT
2.UTC
把日期转成GMT格式：
oDate.toGMTString();
===============================
1.要知道如何使用 √
2.要知道什么时候使用
===============================
前端
切图+JS 偏南 8K-15K
交互 非常简单 8K以上
--------------------------------------
交互：玩的就是数据
1.form表单 交互 提交数据
form想要提交数据必须有的东西
action 地址
name value
submit 提交
method 提交方式
GET
明文提交，不安全，容量小（32KB），缓存
POST
密文提交，相对安全，容量大（1GB），没缓存
GET优势：便于分享
缓存：cache,同一个网页，同一个地址，只会访问一次。
form表单交互，已经渐渐的退出了舞台
原因：
1.刷新页面（覆盖页面），用户体验差，浪费带宽（浪费钱）
2.从服务器取数据
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ajax:
无刷新从服务器取数据
服务器：电脑，存东西
web服务器：响应浏览器（客户端请求）请求
wamp window 手动启动
appserv 自动启动
mamp mac
==================================
**********ajax配合服务器环境
**********确保服务器安装路径没有中文，以后创建项目(文件夹和文件)都不要用中文
==================================
-------------------------------------
ajax比较难
用着难
==================================
ajax到底怎么用？
ajax(地址，成功的回调函数，失败的回调函数);
ajax(url,fnSuss,fnFail);
回调函数:你只需要去定义函数，具体什么时候执行，到底执不执行，
你都关心不着，你也关心不了。
例：
ajax('a.txt',function(a){
alert(a);
},function(){
alert('!ok');
})
---------------------------------
****ajax注意：
1.缓存 cache
同一个网址，同一个资源，只会访问一次。
处理缓存问题：
=Math.random(); 推荐使用
=new Date().getTime();
例：
ajax('a.txt?t='+Math.random(),function(a){
alert(a);
},function(){
alert('!ok');
})
2.ajax返回的结果，都是string
需要eval
eval('('+str+')');
eval不安全，不让用。
eval的替代品：
new Function('return'+str)();
用eval,因为上边这个更不安全。
注：用eval解析的时候两边要加上();
3.乱码
编码不统一
UTF-8 国际编码
GB2312 国产
都会用UTF-8编码
4.不关心后缀名
后缀名是给人看的。
================================
微博。换一换(局部刷新)
===========================
**造假数据
先ajax，然后再创建元素
**先交互，后做你的功能。
-------------------------------------
写ajax:
1.创建一个ajax
var oAjax=new XMLHttpRequset();
requset 请求非 IE6浏览器
IE6本身并没有ajax，如果想实现要用插件
var oAjax=new ActiveXObject('Microsoft.XMLHTTP'); IE6浏览器
假的东西可以去判断，但是报错的东西没法判断;
访问一个不存在的变量或者函数的时候，会报错。但是如果，访问一个不存在的
属性就会是undefined;
2.打开一个连接
oAjax.open(提交方式,url,true(是否异步));
oAjax.open('GET',url,true(是否异步));
异步 一次只能做一件事 ajax就是做多件
同步 一次能做多件事 ajax就是一件
3.发送
oAjax.send();
4.接收
oAjax.onreadystatechange=function(){
//判断一下状态
if(oAjax.readyState==4){
//判断http状态码
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
//成功
alert(oAjax.responseText);
成功之后获取到的结果
}else{
//失败
alert(oAjax.status);
}
}
}
ajax请求的状态
0.准备成功，未发送
1.发送成功
2.接收原始数据完成
3.解析原始数据
4.真正完成
HTTP状态码
-----------------------------------
IE不适合处理中文
编码
encodeURIComponent(); 把中文转成编码
decondeURIComponent(); 把编码转成中文 前端99%用不到
GET
打开连接
oAjax.open('GET',url+'?'+data,true);
发送
oAjax.send();
------------------------------------
function json2url(){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
function ajax(url,data,fnSucc,fnFaild){
if (window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest();
} else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
oAjax.open('GET',url,+'?'+,json2url(data),true);
oAjax.send();
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4) {
if (oAjax.status>=200&&oAjax.status<300||oAjax.status==304) {
fnSucc&&fnSucc(oAjax.responseText);
} else{
fnFaild&&fnFaild(oAjax.status);
}
}
}
------------------------------------
POST
打开连接
oAjax.open('POST',url,true);
设置请求头
oAjax.setRequesHeader('Content-type','application/x-www-form-urlencoded');
发送
oAjax.send(data);
-------------------------------------
"use strict"
function json2url(){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
function ajax(url,data,type,fnSucc,fnFaild){
if (window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest();
} else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
switch (type.toLowerCase()){
case 'GET':
oAjax.open('GET',url,+'?'+,json2url(data),true);
oAjax.send();
break;
case 'POST':
oAjax.open('POST',url,true);
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
oAjax.send(json2url(data));
break;
}
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4) {
if (oAjax.status>=200&&oAjax.status<300||oAjax.status==304) {
fnSucc&&fnSucc(oAjax.responseText);
} else{
fnFaild&&fnFaild(oAjax.status);
}
}
}
-------------------------------------
"use strict"
function json2url(){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
function ajax(json){
json=json||{};
if(!json.url)return;
json.type=json.type||'get';
json.data=json.data||{};
if (window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest();
} else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
switch (json.type.toLowerCase()){
case 'GET':
oAjax.open('GET',json.url,+'?'+,json2url(json.data),true);
oAjax.send();
break;
case 'POST':
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
oAjax.send(json2url(json.data));
break;
}
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4) {
if (oAjax.status>=200&&oAjax.status<300||oAjax.status==304) {
json.success&&json.success(oAjax.responseText);
} else{
json.error&&json.error(oAjax.status);
}
}
}
-------------------------------------
"use strict"
function json2url(){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
function ajax(json){
json=json||{};
if(!json.url)return;
json.type=json.type||'get';
json.data=json.data||{};
json.timeout=json.timeout||3000;
var timer=null;
if (window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest();
} else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
switch (json.type.toLowerCase()){
case 'GET':
oAjax.open('GET',json.url,+'?'+,json2url(json.data),true);
oAjax.send();
break;
case 'POST':
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
oAjax.send(json2url(json.data));
break;
}
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4) {
if (oAjax.status>=200&&oAjax.status<300||oAjax.status==304) {
clearTimeout(timer);
json.success&&json.success(oAjax.responseText);
} else{
json.error&&json.error(oAjax.status);
}
}
}
timer=setTimeout(function(){
oAjax.onreadystatechange=null;
json.error&&json.error('网络超时');
},json.timeout);
-------------------------------------
确认框：
confirm('提示内容')
字符串替换
str.replace('被替换的内容','替换成谁')
-------------------------------------
ajax不能跨域，跨域的话，用jsonp
跨域很重要！
跨域的作用：
1.第三方验证
2.
需要进行跨域：
jsonp json with padding
1.拿到接口
浏览器F12->Network->找到su?->右键倒数第二个选项->wd=&cb= （留着有用，其他的删除）
例:(百度下拉)
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=18439_18634_1466_18240_18534_12824_18545_17000_17073_15616_11755_10633&csor=1&cb=jQuery110209267756657209247_1451359362469&_=1451359362475
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
wd word 想要搜索的关键词
cd callback 回调函数
script标签是一次性的。
解除方法：
每次的时候，新建立一个script标签
当新建的script用完了在删除掉
-------------------------------------
例子：
大搜索（搜索引擎）
获取接口：
百度：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
搜狗：
https://www.sogou.com/suggnew/ajajjson?key=y&type=web
好搜：
http://sug.so.360.cn/suggest?callback=show&word=a
好360：
http://sug.so.360.cn/suggest?word=b&callback=show
jsonp的步骤：
1.找到接口
2.放到地址栏里看一下能不能用
3.写功能
-------------------------------------
jsonp的回调函数，必须是全局的
'use strict'
function jsonp(json){
//验证参数
json = json ||{};
if(!json.url)return;
json.cbName = json.cbName||'cb';
json.data = json.data||{};
json.timeout = json.timeout||5000;
var timer = null;
//回调函数的名字随机。为了防止缓存
json.data[json.cbName] = 'show'+Math.random();
//因为变量名和函数名不能有.所以把.替换成空
json.data[json.cbName] = json.data[json.cbName].replace('.','');
var arr = [];
for(var name in json.data){
arr.push(name+'='+encodeURIComponent(json.data[name]));
}
var str = arr.join('&');
//回调函数
window[json.data[json.cbName]] = function(result){
//取消网络超时提示
clearTimeout(timer);
//执行回调
json.success&&json.success(result);
//当回调执行时，js已经不需要了，删掉
oH.removeChild(oS);
};
//网络超时定时器
timer = setTimeout(function(){
window[json.data[json.cbName]]=null;
json.error&&json.error('网络超时');
},json.timeout);
//jsonp核心
var oH = document.getElementsByTagName('head')[0];
var oS = document.createElement('script');
oS.src=json.url+'?'+str;
oH.appendChild(oS);
}
-------------------------------------
电话查询归属地
接口：
http://virtual.paipai.com/extinfo/GetMobileProductInfo?mobile=15888888888&amount=10000&callname=show
-------------------------------------
语言特性：
1.垃圾回收
js是一门高级语言，本身有垃圾回收机制
一些传统语言并没有垃圾回收机制
比如：C
内存溢出：
内存泄露：
c语言:硬件厂商使用
垃圾回收机制如何工作？
生存周期
1.局部 很短 只有函数调用完成，局部变量就消失
2.全部 很长 只有浏览器关闭之后才会消失。
3.闭包 不确定 a).只要里面的函数还有用，父级的局部变量就不会消失
b).只有里面的函数还有用，父级所有的局部变量就不会消失
c).只要里面的函数还有用，整条作用域链上的变量都不会消失
1.局部
function show(){
var a=12;
}
//调用前 没有a
show(); //调用中 a出现
//调用后 a干掉了
2.全局
function show(){
var a=12;
}
//调用前 有a
show(); //调用中 有a
//调用后 有a
3.闭包
function show(){
var a=12;
document.onclick=function(){
alert(a);
}
}
document.onclick=null;
function show(){
var a=12;
var b=5;
document.onclick=function(){
alert(a);
}
}
b应该消失，但是没有消失
1.为了性能
2.为了万无一失
var a=12;
function aaa(){
var b=5;
function bbb(){
var c=3;
document.onclick=function(){
alert(a);
}
}
bbb();
}
aaa();
作用域链：先在本层找，如果没有，找父级，如果父级没有，找父级的父级...直到找到全局
2.递归
递归：大事化小，分而治之。
养兔子：
1.兔子不会死。
2.兔子可以近亲结婚
3.兔子3个月长大，长大后每个月就生一对小兔子
1 2 3 4 5 6 7 8 9 10
1 1 2 3 5 8 13 21 34 55
var arr=[];
function fn(n){
if(n==1){
return 1;
}else if(n==2){
return 1;
}else {
if(arr[n]){
return arr[n];
}else{
arr[n]=fn(n-1)+fn(n-2);
return arr[n];
}
}
}
fn(n)=fn(n-1)+fn(n-2);
递归性能特别好
兔子数列，兔子算法
斐波那契数列，斐波那契算法
（属于算法）
-------------------------------------
性能优化
对于一个好的程序来说：
1.稳定性
2.扩展性
3.优化
优化：
1.网络性能（对于前端来说，网络性能重要）
2.执行性能
***********************************
网络性能
如何查看：
1.浏览器 F12 Network 分析用了多长时间
2.YSlow(yahoo) 能看出问题在哪，并且告诉你如何解决，学习工具。
yslow.org/mobile 用火狐打开
怎么用？
两种用法：
1.插件版 必须安装firebug，只有老版本的火狐才能使用
2.书签版 不能检测HTTPS协议的
网络优化：
1.减少HTTP请求：
100个文件 100链接 100请求 100等待 100接收
1个文件 1链接 1请求 1等待 1接收
合并JS文件，CSS文件，图片
为了减少HTTP请求，减轻服务器压力。提高性能
2.代码压缩
3.合并
4.gizp.服务器来做的压缩。
5.图片延迟加载，懒加载
6.JS阻塞加载
加载JS的时候，其他东西都不加载
工作怎么做：
把script放到最下面
css放上面
7.CDN 使内容传输的更快、更稳定、更安全
-------------------------------------
执行性能：
有用的
1.不使用全局变量
2.不用的东西就干掉
3.尽量使用正则
4.尽量使用变量，不要使用属性
5.
for(var i=0;i<arr.length;i++){
}
var len=arr.length;
for(var i=0;i<leng;i++){
}
6.减少dom操作
不看的运动，就停下来。
7.尽量不改变css，而是用css3
没用的
var str='';
str+='abc';
str+='dcd';
set+='def';
var arr=[];
arr.push('abc');
arr.push('bcd');
arr.push('edf');
-------------------------------------
正则：
操作字符串和验证的
不是必须使用。用它只是为了更方便，性能更好
正则 1956
C语言 1972
JAVA 1995
javascript 1995
正则表达式 Reqular Expression
台湾的翻译：规则表达式
报答的就是一个规则
按照某种规则操作字符串
-------------------------------------
正则玩的就是规则：
var re=new RegExp('规则');
var re=new RegExp('规则','选项');
注：选项可以连着写
选项:
i Ignore 忽略
忽略大小写
g global 全局
全局匹配
m muti-line 多行模式
单行模式 不加m
^ 整个只有一个行首
$ 整个只有一个行尾
多行模式 加m
str.search(); 搜索
str.match(); 匹配
replace(); 替换
test(); 校验
-------------------------------------
正则也有简写：
var re=new RegExp('规则','选项');
/规则/选项 （规则不加任何引号）
在正则中‘或’用 |表示
例：
/a|b/
转义：
\
\ \\
\n 换行
\t tab 缩进
\d 代表了所有的数字
\w 所有数字，英文，下划线
\s 所有空白符号，空格、tab、换行
\D 除了数字
\W 除了数字，英文，下划线
\S 除了空白符号
. 点代表，所有的东西
^ 行首
$ 行尾
\b boundary 边界
\\b 单词边界
正则的特性：
1.懒
2.笨
量词 代表数量
例：
13个苹果
苹果{13}
若干 模糊
+表示
例：
苹果+ 最少有一个最多不限
模糊，若干
3.贪婪
-------------------------------------
替换的写法：
replace（str,str）;
replace(str||re,str);
replace(str||re,str||fn);
-------------------------------------
[]
1.任选一个
/a[abc]c/
aac √
abc √
acc √
aabcc ×
/a[d+]c/
adddddddddddddc √
adc √
ac ×
/a[(df)+]c/
adfdfdfdfc √
2.范围
[a-z] a到z的所有小写英文字母
[A-Z] A到Z的所有大写英文字母
[0-9] 0到9的所有数字
[13-69] 1 3 4 5 6 9
[a-zA-Z0-9] 所有的英文字母和数字
3.排除
[^0-9] 除了数字
[^a-z] 除了小写字母
[^A-Z] 除了大写字母
[^0-9a-zA-Z] 除了英文字母和数字
-------------------------------------
量词
{n} 有n个
{n,m} 最少有n个,最多有m个
{n,} 最少有n个,最多无限
{0,1} 有一个，或者没有
{0,} 有没有都行
{1,} 最少一个，最多不限
? {0,1} 有一个，或者没有
+ {1,} 最少一个，最多不限 推荐
* {0,} 有没有都行 不推荐
-------------------------------------
str.search(re);
set.mathch(re);
表单校验
test 校验
re.test(str);
校验成功返回true;
校验失败返回false;
校验座机号码：
010-1234567
010-12345678
0100-1234567
0100-12345678
正则分段去写:
区号 - 号码
0[1-9]\d{1,2} - [1-9]\d{6,7}
拼起来写：
/0[1-9]\d{1,2}\-[1-9]\d{6,7}/
test不严谨
解决：
/^0[1-9]\d{1,2}\-[1-9]\d{6,7}$/
校验手机号码：
13810885613
1[^012469]\d{9}
/^1[^012469]\d{9}$/
校验邮箱
xxx@xxx.xxx.xx
用户名 @ 域名 域名后缀
字母数字下划线- 英文数字- 字母{2,8}
-------------------------------------
addClass
removeClass
getByClass
可以用正则去做
-------------------------------------
MVC model view controller
（后台）
model 模型
view 表现
controller 控制
----------------------------------
后台MVC
1.后台
2.前端
3.编辑
代码混编，不好
MVC：起到分离的作用
M____model 数据层(模型) 后台
V____view 视图层 前端
C____comtroller 控制层
把后台的代码和前端的代码，分开。
1.代码分工
2.降低耦合性
耦合性：
耦合性越低越好
---------------------------------
前端MVC
M____model 数据层（交互）
V____view 视图层（dom）
C____controller 控制层--中介
注：先写M\V层，最后写C层
--------------------------------
就是一种写代码的模式、方法。
例子：百度下拉
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
1.看起来清晰，易于维护
2.降低耦合性
--------------------------------
模板
例子：简易输入栏
--------------------------------
MVC不会自己写
1.不是每个人都会
2.每个人有每个人自己的写法
使用框架
AngularJS
库 jquery
辅助你开发的
你是主导位置
框架 angular
限制你开发的
框架是主导位置
-------------------------------------
面向对象
你不知道原理，但是不影响你使用
-------------------------------
面向对象产生的原因？
最开始太难了。把东西封装起来。
对象有两种人：
用对象
写对象
------------------------------
对象由什么东西组成的？
对象只有2个东西：属性和方法
关于属性和变量
属性和变量就是一个东西，只是叫法不同。
属性是属于某个对象的。
变量是自由的。
关于函数和方法
函数和方法就是一个东西，只是叫法不同。
方法是属于某个对象的。
函数是自由的。
this：方法等于谁，this就是谁
//构造函数--创建对象的
注：首字母必须大写
-------------------------------
//面向对象好比一个加工工厂，首先要有原料（建立对象），加工原料（对象都有什么功能），出厂（使用时得到的是什么）
function Person(name,age){
//原料
var obj=new Object();
//加工
obj.name=name;
obj.value=value;
obj.showName=function(){
alert(this.name);
}
obj.showAge=function(){
alert(this.age);
}
//出厂
return obj;
}
--------------------------------
目前以Array为基础创建对象：
有问题。
1.容易冲突
2.效率低
空白的东西比较适合我们。
new Object();
几乎是空的。
问题：
1.为啥没有new?
2.每次创建一个对象都有一个新的方法
-------------------------------------
关于new的问题
new的作用：
1.只有加了new，系统会自动在构造函数顶部帮你 new Object
2.只要加了new,系统会自动在构造函数尾部帮你 return
function Preson(name,age){
//只有加了new,系统会自动帮你
// this=new Object;
this.name=name;
this.age=age;
this.showName=function(){
alert(this.name);
}
this.showAge=function(){
alert(this.age);
}
//只有加了new,系统会自动帮你
// return this;
}
var oP=new Preson('张三','16');
oP.showName();
--------------------------------------
原型
obj.prototype
以后写面向对象，属性是给对象加的
eg:this.name=name;
方法给原型加
eg:Person.prototype.show=function(){
}
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
alert(this.name);
}
Person.prototype.showAge=function(){
alert(this.age);
}
var oP=new Person('张三',16);
oP.showName();
oP.showAge();
-------------------------------------
类:
Person
Array
Date
Object
对象:
oDate=new Date();
arr=new Array();
oP=new Person();
****
所有的变量都要变成属性
所有的函数都要变成方法
-------------------------------------
this是js里面最恶心的东西。
css有优先级
this也有优先级
this具体是什么，你不知道，只能看调用
高
new object
定时器 window
事件 触发事件的元素
方法 属于的那个对象
正常调用 window||undefined
低
1.this要看优先级
2.永远要听最后的调用
3.定时器只管一层
-------------------------------------
原型
作用：
1.加方法
2.扩展系统方法
arr.indexOf
str.trim
oDate.getCnDay()
-------------------------------------
typeof 检测数据类型
问题：不能检测对象。没有某一个的具体类型
instanceof 检测属于什么东西
constructor 构造器
检测这个对象的构造函数是什么
json 就是object
-------------------------------------
js中诡异的事
function instanceof object true
object instanceof function true
function instanceof function true
object instanceof object true
原型链：
找一个东西，先在自身找，如果自身没有，找父级，如果父级的父级没有，找父级的父级的父级，直到找到object
面向对象的特性：
1.封装：抽，把程序的核心封装起来，以后重复调用
2.**继承：父级有的子级也有，父级改变子级也改变
3.多态：多重继承
继承：
父级有的子级也有，父级改变子级也改变
大项目能体现出父级的好处
比如：游戏
改变this指向
show.call(想把this变成谁，item,item2,item3...);
apply(想把this变成谁，[item.item2,item3...]);
继承分两个：
1.属性:
function 父类(name,age){
this.name=name;
this.age=age;
}
function 子类(name,age,job){
(1).父类.call(this,name,age...);
(2).父类.apply(this,arugment);
}
2.方法:
子类.prototype=new 父类();
子类.prototype.constructor=子类
子类.prototype.show=fn;
~~~~~~~~~~~~~~~~~~~~~~~~~
例：
function Preson(name,age){
this.name=name;
this.age=age;
}
Preson.prototype.showName=function(){
return this.name;
}
Preson.prototype.showAge=function(){
return this.age;
}
function Worder(name,age,job){
Preson.apply(this,arguments);
}
Worder.prototype=new Preson();
Worker.prototype.constructor=Worder;
Worder.prototype.showjob=function(){
return this.job;
}
-------------------------------------
面向对象：
混合模式：构造+原型
单利模式(命名空间)：json
-------------------------------------
变量名冲突：
1.封闭空间
2.面向对象
3.命名空间
YUI yahoo
4.模块化
-------------------------------------
右下角悬浮窗判读是不是ie6
window.onload = window.onresize = window.onscroll = function(){
//判断是不是IE6
if(window.navigator.userAgent.indexOf('MSIE 6.0')!=-1){
var oDiv = document.getElementById('div1');
//滚动距离
var sH =document.documentElement.scrollTop||document.body.scrollTop;
//可视区的距离
var cH = document.documentElement.clientHeight;
//物体盒模型的高
var oH = oDiv.offsetHeight;
oDiv.style.top = sH+cH - oH +'px';
}
};
----------------------------------------------------------
吸顶条的效果
function getPos(obj){
var left = 0;
var top = 0;
while(obj){
left+=obj.offsetLeft;
top+=obj.offsetTop;
obj = obj.offsetParent;
}
return {
"left":left,
"top":top
};
}
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oT = getPos(oDiv1).top;//div所在的位置到top的高度
window.onscroll = function(){
var sT = document.documentElement.scrollTop||document.body.scrollTop;//获取滚动的距离的兼容性写法
if(sT>=oT){
oDiv1.style.position = 'fixed';
oDiv2.style.display = 'block';
}else{
oDiv1.style.position ='';
oDiv2.style.display = 'none';
}
};
};
-----------------------------------------------------------
瀑布流下拉无限加载
function createLi(){
var oLi = document.createElement('li');
//oli的高度是50px-300px之间
oLi.style.height = parseInt(50+Math.random()*300)+'px';
//oli的背景颜色随机变化
oLi.style.background = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
return oLi;
}
window.onload = function(){
var oBox = document.getElementById('box');
//获取obox下面的子集
var aUl = oBox.children;
//createLis创造的一群li
function createLis(){
var arr = [];
for(var i = 0;i<20;i++){
var oLi = createLi();//创建 oLi的函数
for(var j = 0;j<aUl.length;j++){
arr.push(aUl[j]);
//push增加
}
//循环判断 3个ul中最矮的 那个 offsetHeigth
arr.sort(function(ul1,ul2){
//sort是排序
return ul1.offsetHeight - ul2.offsetHeight;
});
arr[0].appendChild(oLi);
//往最后一个节点添加
}
}
//加载了20个Li
createLis();
window.onscroll = function(){
var sH = document.body.scrollHeight;//文档的内容高
var cH = document.documentElement.clientHeight; // 可视区的高
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;// 滚动距离
if(scrollTop == sH -cH){//文档的内容高 - 可视区的高 == 滚动距离
createLis();
}
};
};
-----------------------------------------------------------
js所有的例子
1.鼠标滚轮
2.瀑布流
3.图片懒加载
4.吸顶条
5.星星评分
6.选项卡
7.自动播放选项卡
8.无缝滚动完整版
9.图片时钟
10.简易日历
11.双色球
12.联动全选
13.球
14.许愿墙
15.wabqq
16.高级留言板
17.简易秒表
18.右下角悬浮框
19.拖拽
20.带框拖拽
21.磁性拖拽
22.限制范围拖拽
23.无缝滚动（无缝连接）
24.设置时间
25.ajxa
26.json
27.jsonp
28.move
29.cooker
30.图片放大
31.放大镜
32.鼠标加滚轮
33.图片加载进度条
34.正则
35.鼠标离谁进谁放大
36.碰撞检测
37.圆
38.极丑视差滚动
39.360度旋转
40.回到顶部
41.九宫格拖拽
42.拖拽回放
43.MVC
44.jquery
45.面向对象
46.倒计时
47.手风琴
48.无规则切换图片
49.手机图片切换拖拽
50.3D图片切换
51.下拉菜单
52.各种运动
53.焦点图
54.分页
55.鼠标控制DIV移动
56.上移下移
57.右键菜单
58.qq头像
59.延迟广告
60.全选不选反选
61.百度贴吧时钟
62.分布运动
63.穿墙
64.苹果菜单
65.doMove
66.qq视频
67.滚动控制百分比
68.轮播图
69.百度下拉
