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;
-------------------------------------
碰撞检测
判断是否碰到了，不靠谱，因为条件太多
判断是否没碰到
r1r2||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 模块
});
给路径起别名
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('jquery') 在div内部的最后面追加一个strong
$('strong').appendTo('div') 把strong追加到div元素内部中后面
$('').appendTo('div') 创建一个em追加到div内部中后面
$('div').prepend('jquery') 在div内部的最前面追加一个strong
$('strong').prependTo('div') 把strong追加到div元素内部中前面
$('').prependTo('div') 创建一个em追加到div内部中前面
$('div').after('') 把strong添加到div后面
$('div').bofore('') 把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=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=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