JavaScript：
-是嵌入HTML中在浏览器中的脚本语言（没有编译器的语言）——用来向HTML页面添加交互行为
-JavaScript和Java没有任何关系
-JavaScript特点：
基于对象：有对象，但不支持严格的封装、继承、多态。
-继承：JS中没有继承的概念，但是有原型的概念，每一个对象都有一个prototype属性，
用来指定该对象的原型对象，类似于继承
-封装：JS中有不严格的封装，对象中封装的属性和方法可以随意访问和修改。
-多态：JS中所欲对象都是object，即它们的根原型是object。
但是JS不像Java的多态那样严谨。
JS对象可以赋值给任意类型的其他对象
JavaScript的使用
1、事件定义式
2、嵌入式（使用<script>标签
3、文件调用式 （调用外边单独的.js文件）
如：<head>
<script type="text/javascript" src="../d1.js"></script>
</head>
鼠标点击事件
function f1（）{alert（'helloWord');}
<input type="button" value="点我" onclick="f1();"/>
<!-- form表单用于输入登录信息，提交给服务器 -->
<!--onsubmit是表单提交事件，在点击提交按钮时触发。触发时调用onsubmit内的方法，
若该方法返回true则提交表单，返回false则不提交。即该声明起到拦截提交的作用-->
<form action="http:www.baidu.com"
onsubmit="return (check_name()+check_pwd())==2;">
光标切换事件：onblur
jS中保留字：class(更改某个元素的class名字，用x.className)、int、float等，不能使用
变量声明：用var，如var x;
变量初始化：用=赋值，没有初始化自动取值为undefined
可以在a链接中添加javascript如：<a href="javascript;"></a>
两种操作属性的方法：
function setWidth(name,value){
var div=documen.getElementById('header');
div.name='value'; //第一种
div[name]='value'; //第二种
}
style与className
-元素.style.属性：xxx 是修改行间样式
-之后再修改className不会有效果 （原因：行间样式优先级最高，建议：在一个区域中，两种别混着用，单独使用一种）
window.onload():表示页面加载完再执行此方法
this:执行当前事件的元素。
innerhtml
ECMAScript:翻译， 核心，解释器
数据类型：
特殊类型：null:空（表示为：空）; undefined：未定义（表示：未初始化）;
内置对象：基本类型：Number、String、Boolean、Function、Array、Math、Date、RegExp(正则表达式)
外部对象：windows、document
自定义对象：Object
//JS中数字不区分整数和小数/
//数字+字符串：数字转换为字符串//数字+布尔值：true转换为1，false转换为0//字符串+布尔值：布尔值转换为字符串true或false//布尔值+布尔值：布尔值转换为数值1或0
数据类型转换：
toString：转换成字符串
parseInt:强制转换成整数
parseFloat:强制转换成小数
typeof:返回当前数据类型
isNaN：判断数据是否是一个数，不是返回true，否则返回false
运算符：
除法：Java中5/2=2; JS中5/2=2.5;
关系运算：全等：===，表示数据的值和类型都相同；不全等：！==。
JS中的条件表达式：
Java中条件表达式必须返回布尔值
JS中的条件表达式可以是任意表达式，返回数据类型可以是任意类型数据：
一切表示空的值(0/null/""/undefind/NaN)都是false
String对象：
javaScript中判断两个字符串是否相等用==
s.charAt(n);:获取字符串s索引n出的字符
s.indexOf(findstr,[index]):查找部分字符串第一次出现的位置
s.lastIndexOf(findstr,[index])：倒序查找部分字符串第一次出现的位置
s.substring(start,[end]);截取部分字符串
s.replace();
s.split(bystr,[howmany]);根据bystr,分割成字符数组。bystr:分割用的字符串，howmany:指定返回数组对打长度
parseInt(str); 把str转换成数字类型。
eval:直接计算字符串； 如eval("2+3");
（注意：若exp为需要计算的字符串，为防止非法字符造成错误运算，应该这样写：
try{
eval("("+exp+")");
}catch(e){
输出错误信息
}
Number对象：
number.toFixed(n);将数字转换为字符串，并能保留指定的n位小数位
通过文件id获取内容：document.getElementById();
元素x在HTML页面中的内容为content：x.innerHTML=content;
Array对象：
创建数组 var arr = Array();/var arr = Array{1,3,3};
创建二维数组：var arr = [[1,2],[2,3]];
数组倒转与排序: arr.reverse();
数组排序的比较方法不变，但是可以改变排序规则
排序：//选择排序，亮亮排序小的忘前放
function sort(){
var arr = [8,5,9,6,2,40];
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
var r = compare(arr[j],arr[i]);
if(r<0){
var temp = arr[j];
arr[j] = arr[i];
arr[i] = temp;
}
}
}
alert(arr);
}
//比较规则，若要倒序，只需要将return改为i-j;
function compare(j,i){
return j-i;
}
Math对象：绝对值：Math.abs();取整：Math.round();
向上取整：Math.ceil(3.4); 4
向下取整：Math.floor(3.5);3
Date对象：now 为当前时间：var now = new Date(); 定义一个固定时间：var a = new Date("2015-10-03 ..);
当月天数：a.getDate();当周的第几天：a.getDay();
a.toLocaleDateString():返回本地年月日。
a.toLocaleTimesString():返回当地时间。
RegExp对象：正则表达式。
var rg = /pattern/flags;
/pattern:正则表达式/flags模式g:设定当前匹配为全局模式、模式i:忽略匹配中的大小写检测。
rg.exec(str);: 从一段字符串中找到满足正则表达式的内容。
rg.test(str);: 检测一段字符串是否满足正则表达式的要求，返回值为布尔值。
x.replace(rg,tostr);
x.match(rg);找到符合要求的字符串
x.search(rg);找到符合要求的字符串的个数
//2.创建正则表达式，验证是否匹配
var reg = /^\w{3,20}$/; 3-20位字母、数字或下划线 var reg = /^[A-Za-z0-9]{6,20}$/; 6-20位字母或数字
//结果为[65,23,12,6,5]
if(!reg.test(code)){}
Function对象：
JS张函数就是Function对象，函数名就是指向Function的引用
函数返回值，默认返回undefined，可以使用return返回默认的值
JS中没有方法重载，参数可声明也可不声明，默认依次传入arguments[]数组中
使用匿名内部类：举例：倒序排列
var a = [23,5,65,12,6];
a.sort(function (a,b){retrun b-a};);
常用的全局函数：parseInt/parseFloat； isNaN; eval;
eval:直接计算字符串； 如eval("2+3");
外部对象：
BOM模型：浏览器模型-根：window对象(浏览器)
Window对象；
alert();提示对话框，显示字符串内容
confirm(); 确认对话框，确认返回true，反之，false。
setTimeout();clearTimeout(); 一次性定时器
setInterval(exp,time);clearInterval(定时器ID); 周期性定时器(exp:执行语句,time:毫秒)
history: 历史记录
back();往后 /forward();向前/go(num);到第几页/
location: 地址栏
href属性：location.href="http.//www.baidu.com";
reload();重新载入当前网址=F5.
screen: 窗口
width/height 分辨率 。 availWidth/availHeight:可用宽高
navigator: 基本信息
vavigator.userAgent ：浏览器信息。
document: 文档对象：页面内容
自定义对象：
方式一：通过Object创建 （临时使用）
方式二：通过构造器来构造对象和调用方法 （长期公共使用）
方式三：通过JSON创建（封装服务端对象使用）
事件：
鼠标事件：
onclick:单击
ondblclick:双击
onmousedown:鼠标按下
onmouseup:鼠标弹起
onmouseover:鼠标移至上方 onmouseout: 鼠标离开
键盘事件：
onkeydown:键盘按键按下
onkeyup:键盘按键松开
状态改变事件：
onload: 进入页面触发 onunload: 离开页面触发
onchange: 改变输入字段的内容时触发
onfocus:光标移入
onblur: 元素失去光标焦点
onsubmit:表单提交
取消事件：onxxx = "return false;"
时间对象：event
event.clientX 鼠标点击处横坐标 event.clientY 鼠标点击处纵坐标
event.srcElement || event.target 获取事件源
event.stopPropagation() / event.cancelBubble = true（IE浏览器）取消事件的冒泡
代码：先判断是否有event.stopPropagation()
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
javascript：
ECMA :几乎没有兼容问题
DOM: 有一些操作不兼容
BOM： 没有兼容问题
常见数据类型：number string boolean undefined object
数据转换：
显式类型转换（强制转换）
parseInt(12px23)=12 parseInt从左开始提取数字
NaN不等于NaN
isNaN(a) 判断数据a是否是一个数
parseFloat
隐式类型转换
var a = 4; var b='4'; alert(a==b); true 先转换类型，然后再比
var a = 4; var b='4'; alert(a===b); flase 不转换类型，直接比
var a = '7'; var b='4'; alert(a+b); 74 字符串链接
var a = '7'; var b='4'; alert(a-b); 3 数据类型转换，再运算
变量作用域
局部变量：只能在定义它的函数里边用
全局变量：任何地方可以使用
闭包：子函数可以使用父函数的局部变量
命名规范：
匈牙利命名法：类型前缀（变量命名）; 首字母大写；
运算符：
%：求模或取余（应用如：隔行变色，秒转时间）
复制：= += *= -= *= /= %=
关系：< > <= >= == === != !==
逻辑： &&(并且） ||(或者) !（否）
运算优先级：括号
流程控制：
判断：if switch ?(三元/三木运算符)
循环：for while
跳出：break（到此判断条件生效中断后边所有循环） continue(到此判断条件生效中断本次循环）;
真：true，非零数字，非空字符串，非空对象
假：false, 数字零， 空字符串， null， undefined
json
存储数据，类似数组
var json={a:1,b:2,c:3}
var arr=[1,2,3]
alert(x.b)/alert(json(a));
alert(arr[0]);
json(a):a为字符串 arr[0] 0为数字
json无length arr有length
json一般用for in 循环
函数返回值
函数的执行结果
当参数数量不确定时使用arguments
arguments：不定参
如：求不定参数之和
function sum(){
var result=0;
var i=0;
for(i=0;i<arguments.length,i++){
result+=arguments[i];
}
return result;
}
sum(2,3.4,...);
css函数
css(div,'width') 获取样式
css(div,'width','300px') 设置元素样式
取非行间样式
currentStyle 仅IE兼容
getComputedStyle 非IE使用
解决此兼容问题方法：
if(div.currentStyle){
//IE代码
div.currentStyle
}else{
//非IE代码
getComputedStyle
}
封装此方法：
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,flase)[name];
}
}
调用：(无法取复合样式)
getStyle(div1,width);
getStyle(div1,backgroundColor;
数组：
数组的length可以获取，也可以设置，根据数组长度截取
数组添加/删除元素
var arr=[1,2,3]
arr.push(4) 尾部添加
arr.pop(3) 尾部删除
arr.shift(1) 头部删除
arr.unshift(0) 头部添加
splice(起点，长度，元素）
arr.splice(0,2) 从起点删除到长度为2的数组
arr.splice(0,2,3,4,5) 从起点删除元素后，添加3，4，5，
数组转换
concat连接两个数组
var a=[1,2,3]
var b=[4,5,6]
a.concat(b)=[1,2,3,4,5,6]
join(拼接数组)
var a=[1,2,3,4,5]
a.join('-');
排序
sort
var arr=[12,3,453,5,56];
arr.sort(
function(){n1,n2}
return n1-n2; //等同以下代码
/*
if(n1<n2){
return -1;
}else if(n1>n2){
return 1;
}else{
return 0;
}
*/
)
定时器：
周期性定时器
setInterval(语句,毫秒值)
clearInterval();
一次性定时器：延时性
setTimeOut()
clearTimeOut();
延迟提示框：
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
oDiv1.onmouseover-=oDiv2.mouseover=function(){
clearTimeout(timer);
oDiv2.style.display='block'
}
oDiv2.onmouseout-=oDiv1.mouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none'
},1000);
}
}
日期
getFullYear()
getMonth() 月份从0开始，使用时需加1
getDate()
getDay() 星期几 0-6分别：周日-周六
getHour()
getMinate()
getSecond()
设置图片路径：charAt
无缝滚动
offsetLeft/offsetTop
改变滚动方向：修改speed +2px:向右 -2px:向左
复制li:innerHtml和+= 修改ul的width
鼠标移入暂停：nouseover 移入关闭定时器，移出重新开启定时器
DOM
DOM模型：（document object model）文档模型-根：document对象
节点：元素节点、属性节点、文本节点、文档节点
读取操作：
节点.nodeName 获取节点名称（文本节点：#text/文档节点：#document）
节点.nodeType 获取节点类型（返回数值 1：元素节点 2：属性节点 3：文本节点 8：注释节点 9：文档节点）
节点.innerText 获取该元素区内的所有文本。包括标签节点
节点.innerHTML 获取该元素区内的所有HTML页面内容
节点.getAttribute(属性) 获取元素某个属性的值
节点.setAttribute(属性) 设置元素某个属性的值
节点.removeAttribute(属性) 移除元素的某个属性
节点.style.color 更改style里的颜色
节点.style.fontSize 更改style里的字体大小
节点.className 更改元素属性
document.getElementById(id) 通过id获取该元素节点
document.getElementsByName(name) 根据name名称获取元素节点，多用于表单提交
节点.parentNode 查找单个父节点
节点.childNodes 查找多个子节点
firstChild:高版本不兼容
firstElementChild兼容高版本
元素.getElementsByTagName(标签名) 通过标签名获取元素节点的子节点，不包括空格,
注意：此处只能为标签名；如td、input、h、。如果获取某一个，可以使用数组索引确定：
var inputs = td.getElementsByTagName("input");
var text = inputs[2];
封装获取某个className的元素的方法
//oParent:父元素 sClass:要选择的class名字
function() getByClass(oParent,sClass){
var aResult=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
if (aEle[i].className='sClass'){
aResult.push(aEle[i]);
}
}
return aResult;
}
js中更改style的背景：
document.body.style.backgroundColor="#FFFFFF";//改变背景色
document.body.style.backgroundImage="url(images/bgimg.gif)";//改变背景图片
增删操作：
创建：
document.creatElement(元素名) 创建新节点
添加：
节点.appendChild(a) 节点a插入到element下，(并且从原来的父节点中删除!)排到最后。即：为父节点追加子节点
element.insertBefore(a，b) 节点a插入到element下的b前边，排到最前
案例：每次操作都将元素a,插入到父元素的最前面
此处低版本iE会出现兼容问题，如果a为第一个元素，会报错
if(父节点.length>0){
父节点.insertBefore(a,父节点[0]);
}else{
父节点.appendChild(a);
}
删除：
父节点.removeChild(子节点） 删除子节点
文档碎片：Fragment
创建文档碎片：document.createDocumentFragment();
表格应用
获取：tBodies,tHead,tFoot,rows,cells(单元格)
隔行变色加移入行变色：
var oTab=document.getElementBy('tab1');
var oldColor='';
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
oTab.tBodies[0].rows[i].mouseover=function(){
oldColor=this.style.background;
this.style.background='green';
}
oTab.tBodies[0].rows[i].mouseoutr=function(){
this.style.background=oldColor;
};
if(i#2){
oTab.tBodies[0].rows[i].background='';
}else{
oTab.tBodies[0].rows[i].background='#ccc';
}
}
添加/删除行
忽略大小写：a.toLowerCase()=b.toLowerCase();
模糊搜索：a.sarch(b)!=-1
split分割字符串，
表格排序：
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBn.onclick=function(){
var arr=[];
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=0Tab.tBodies[0].rows[i];
}
arr.sort(function(tr1,tr2){
var n1=parseINt(t1.cells[0].innerHtml);
var n2=parseINt(t2.cells[0].innerHtml);
return n1-n2;
});
for(var i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i]);
}
}
表单应用：
js运动：
多物体同时运动：
例子：多个div,鼠标移入变宽
单定时器，存在问题，
每个div一个定时器
多物体运动框架：
定时器作为物体的属性
参数的传递：物体，目标值
例子：多个div淡入淡出
所有东西布恩那个公用
属性与鱼洞对象绑定：速度，其他属性值（如透明度等）
任意值运动框架
offset属性的bug
有边框的div变宽
用currentStyle代替offset
原有运动框架的问题
只能让某个值运动起来
如果想让其他值运动起来，要修改程序
扩展的运动框架
运动属性作为参数
封装opacity
小数的问题
不加绝对定位，无法运动
运动框架：
开始运动时关闭已有定时器
吧运动和停止隔开(if/else)
透明度：IE:filter:alphao(opacity:30)/谷歌，火狐：opacity:0.3
缓冲运动: 距离与速度成正比
速度要取整
速度=（目标值-当前值）/缩放系数
匀速运动
offsetWidth控制div(加border,padding)时的bug
链式运动框架
回滚s
BOM browser object model 浏览器对象模型
事件
事件对象：用来获取事件的详细信息：鼠标位置，键盘按键
获取鼠标位置：clientX
document的本质：documentchildNodes[0].tagName
获取event对象(兼容性写法)
var oEvent=ev || event;
取消事件冒泡：x.cancelBubble=true;(如：仿select框)
鼠标事件:onmousemove
clientX,clienY
scrollTop:消除滚动条的影响
键盘事件：
keyCode:获得键位
onkeydown onkeyupfe
其他属性：ctrlKey,shiftKey,altKey
默认行为/默认事件
组织默认事件方法：return false;
浏览器自带行为
右键菜单事件：document.oncontextmenu
阻止右键菜单：
document.contextmenu=function(){return false;}
只能输入数字
拖拽div
拖拽原理：距离不变，三个事件
拖拽问题:1.直接给document加事件 2.firefox下，空div拖拽bug阻止默认事件return false;
3.防止拖出页面，修正位置，上下左右
高级拖拽：
不能拖出制定对象div
磁性吸附：if判断间距大小
图片拖拽：
IE下捕获事件：x.setCapture
IE下释放事件：x.releaseCapture
带框拖拽
事件绑定
IE下attachEvent('函数名','函数')
firefox和google下 addEventListener('函数名(没有on)',函数，false）
例子：
var oBtn=document.getElementById("btn");
if(oBtn.attachEvent){
oBtn.attachEvent('onclick',function(){alert("a");})
oBtn.attachEvent('onclick',function(){alert("b");})
}else{
oBtn.addEventListener('click',function(){alert("a")}，false）;
oBtn.addEventListener('click',function(){alert("b")}，false）;
}
封装此方法：
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){'on'+ev,fn};
}else{
obj.addEventListener(ev.fn,false);
}
myAddEvent(oBtn,'click',function(){alert("b");});
解除绑定：
IE: detachEvent(事件名，函数)
FF/google: removeEventListener(事件名，函数，捕获)
自定义滚动条
js中
--用没有定义的变量：报错
--用没有定义的属性：undefined
javascript面向对象
面向对象（00P)
抽象：抓住核心问题 抓住问题的主要特征
封装：不考虑内部实现，只考虑功能的使用
继承：从父类中继承一些方法，属性，子类又有一些自己的特性
多重继承
多态
对象的组成
方法--函数：过程，动态的
属性--变量：状态，静态的
this：当前的方法属于谁this就是谁
object对象：没有功能
工厂模式：
创建-加工-返回
缺点：1.没有new
2.方法重复-浪费资源
解决方式：构造函数加属性，用原型加方法
1.调方法时new,方法中全部用this
2.方法对象加prototype
原型（prototype）相当于css中的class,给一组元素加
原型是给类加方法
类和对象
把面向过程的程序改写成面向对象的形式
原则：不能有函数套函数，但可以有全局变量
过程
onload → 构造函数
全局变量 → 属性
函数 → 方法
改错：this，事件，闭包，传参
对象与闭包
通过闭包传递this
命名空间json
javascript对象:
1.本地对象（非静态对象）
需要new一个，即实例化才能使用
object，function，array，string，boolean，number，date,regExp,error
2.内置对象（静态对象）
直接使用
global（概念对象），math
3.宿主对象
DOM BOM
BOM
document.write();运行
window.navigator.userAgent:浏览器版本信息
window.location:当前网址
可视区尺寸：
document.document.Element.clientWidth
document.document.Element.clientHeight
滚动距离：
document.body.scrollTop //chrome
document.documentElement.scrollTop //IE/FF
window对象常用事件：
onload()
onscroll()滑动滚动条触发
onresize()改变浏览器窗口尺寸触发
window.open("http://www.w3school.com.cn","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
系统对话框：
alert();提示框
confirm();确认框
prompt();输入提示框
cookie
特点：
同一个网站所有页面共享一套cookie
有大小，数量限制（4-10k)
过期时间
js中使用cookie
document.cookie
= 等同于添加，不会覆盖
H5视频播放器：videoJS
<head>
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
-是嵌入HTML中在浏览器中的脚本语言（没有编译器的语言）——用来向HTML页面添加交互行为
-JavaScript和Java没有任何关系
-JavaScript特点：
基于对象：有对象，但不支持严格的封装、继承、多态。
-继承：JS中没有继承的概念，但是有原型的概念，每一个对象都有一个prototype属性，
用来指定该对象的原型对象，类似于继承
-封装：JS中有不严格的封装，对象中封装的属性和方法可以随意访问和修改。
-多态：JS中所欲对象都是object，即它们的根原型是object。
但是JS不像Java的多态那样严谨。
JS对象可以赋值给任意类型的其他对象
JavaScript的使用
1、事件定义式
2、嵌入式（使用<script>标签
3、文件调用式 （调用外边单独的.js文件）
如：<head>
<script type="text/javascript" src="../d1.js"></script>
</head>
鼠标点击事件
function f1（）{alert（'helloWord');}
<input type="button" value="点我" onclick="f1();"/>
<!-- form表单用于输入登录信息，提交给服务器 -->
<!--onsubmit是表单提交事件，在点击提交按钮时触发。触发时调用onsubmit内的方法，
若该方法返回true则提交表单，返回false则不提交。即该声明起到拦截提交的作用-->
<form action="http:www.baidu.com"
onsubmit="return (check_name()+check_pwd())==2;">
光标切换事件：onblur
jS中保留字：class(更改某个元素的class名字，用x.className)、int、float等，不能使用
变量声明：用var，如var x;
变量初始化：用=赋值，没有初始化自动取值为undefined
可以在a链接中添加javascript如：<a href="javascript;"></a>
两种操作属性的方法：
function setWidth(name,value){
var div=documen.getElementById('header');
div.name='value'; //第一种
div[name]='value'; //第二种
}
style与className
-元素.style.属性：xxx 是修改行间样式
-之后再修改className不会有效果 （原因：行间样式优先级最高，建议：在一个区域中，两种别混着用，单独使用一种）
window.onload():表示页面加载完再执行此方法
this:执行当前事件的元素。
innerhtml
ECMAScript:翻译， 核心，解释器
数据类型：
特殊类型：null:空（表示为：空）; undefined：未定义（表示：未初始化）;
内置对象：基本类型：Number、String、Boolean、Function、Array、Math、Date、RegExp(正则表达式)
外部对象：windows、document
自定义对象：Object
//JS中数字不区分整数和小数/
//数字+字符串：数字转换为字符串//数字+布尔值：true转换为1，false转换为0//字符串+布尔值：布尔值转换为字符串true或false//布尔值+布尔值：布尔值转换为数值1或0
数据类型转换：
toString：转换成字符串
parseInt:强制转换成整数
parseFloat:强制转换成小数
typeof:返回当前数据类型
isNaN：判断数据是否是一个数，不是返回true，否则返回false
运算符：
除法：Java中5/2=2; JS中5/2=2.5;
关系运算：全等：===，表示数据的值和类型都相同；不全等：！==。
JS中的条件表达式：
Java中条件表达式必须返回布尔值
JS中的条件表达式可以是任意表达式，返回数据类型可以是任意类型数据：
一切表示空的值(0/null/""/undefind/NaN)都是false
String对象：
javaScript中判断两个字符串是否相等用==
s.charAt(n);:获取字符串s索引n出的字符
s.indexOf(findstr,[index]):查找部分字符串第一次出现的位置
s.lastIndexOf(findstr,[index])：倒序查找部分字符串第一次出现的位置
s.substring(start,[end]);截取部分字符串
s.replace();
s.split(bystr,[howmany]);根据bystr,分割成字符数组。bystr:分割用的字符串，howmany:指定返回数组对打长度
parseInt(str); 把str转换成数字类型。
eval:直接计算字符串； 如eval("2+3");
（注意：若exp为需要计算的字符串，为防止非法字符造成错误运算，应该这样写：
try{
eval("("+exp+")");
}catch(e){
输出错误信息
}
Number对象：
number.toFixed(n);将数字转换为字符串，并能保留指定的n位小数位
通过文件id获取内容：document.getElementById();
元素x在HTML页面中的内容为content：x.innerHTML=content;
Array对象：
创建数组 var arr = Array();/var arr = Array{1,3,3};
创建二维数组：var arr = [[1,2],[2,3]];
数组倒转与排序: arr.reverse();
数组排序的比较方法不变，但是可以改变排序规则
排序：//选择排序，亮亮排序小的忘前放
function sort(){
var arr = [8,5,9,6,2,40];
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
var r = compare(arr[j],arr[i]);
if(r<0){
var temp = arr[j];
arr[j] = arr[i];
arr[i] = temp;
}
}
}
alert(arr);
}
//比较规则，若要倒序，只需要将return改为i-j;
function compare(j,i){
return j-i;
}
Math对象：绝对值：Math.abs();取整：Math.round();
向上取整：Math.ceil(3.4); 4
向下取整：Math.floor(3.5);3
Date对象：now 为当前时间：var now = new Date(); 定义一个固定时间：var a = new Date("2015-10-03 ..);
当月天数：a.getDate();当周的第几天：a.getDay();
a.toLocaleDateString():返回本地年月日。
a.toLocaleTimesString():返回当地时间。
RegExp对象：正则表达式。
var rg = /pattern/flags;
/pattern:正则表达式/flags模式g:设定当前匹配为全局模式、模式i:忽略匹配中的大小写检测。
rg.exec(str);: 从一段字符串中找到满足正则表达式的内容。
rg.test(str);: 检测一段字符串是否满足正则表达式的要求，返回值为布尔值。
x.replace(rg,tostr);
x.match(rg);找到符合要求的字符串
x.search(rg);找到符合要求的字符串的个数
//2.创建正则表达式，验证是否匹配
var reg = /^\w{3,20}$/; 3-20位字母、数字或下划线 var reg = /^[A-Za-z0-9]{6,20}$/; 6-20位字母或数字
//结果为[65,23,12,6,5]
if(!reg.test(code)){}
Function对象：
JS张函数就是Function对象，函数名就是指向Function的引用
函数返回值，默认返回undefined，可以使用return返回默认的值
JS中没有方法重载，参数可声明也可不声明，默认依次传入arguments[]数组中
使用匿名内部类：举例：倒序排列
var a = [23,5,65,12,6];
a.sort(function (a,b){retrun b-a};);
常用的全局函数：parseInt/parseFloat； isNaN; eval;
eval:直接计算字符串； 如eval("2+3");
外部对象：
BOM模型：浏览器模型-根：window对象(浏览器)
Window对象；
alert();提示对话框，显示字符串内容
confirm(); 确认对话框，确认返回true，反之，false。
setTimeout();clearTimeout(); 一次性定时器
setInterval(exp,time);clearInterval(定时器ID); 周期性定时器(exp:执行语句,time:毫秒)
history: 历史记录
back();往后 /forward();向前/go(num);到第几页/
location: 地址栏
href属性：location.href="http.//www.baidu.com";
reload();重新载入当前网址=F5.
screen: 窗口
width/height 分辨率 。 availWidth/availHeight:可用宽高
navigator: 基本信息
vavigator.userAgent ：浏览器信息。
document: 文档对象：页面内容
自定义对象：
方式一：通过Object创建 （临时使用）
方式二：通过构造器来构造对象和调用方法 （长期公共使用）
方式三：通过JSON创建（封装服务端对象使用）
事件：
鼠标事件：
onclick:单击
ondblclick:双击
onmousedown:鼠标按下
onmouseup:鼠标弹起
onmouseover:鼠标移至上方 onmouseout: 鼠标离开
键盘事件：
onkeydown:键盘按键按下
onkeyup:键盘按键松开
状态改变事件：
onload: 进入页面触发 onunload: 离开页面触发
onchange: 改变输入字段的内容时触发
onfocus:光标移入
onblur: 元素失去光标焦点
onsubmit:表单提交
取消事件：onxxx = "return false;"
时间对象：event
event.clientX 鼠标点击处横坐标 event.clientY 鼠标点击处纵坐标
event.srcElement || event.target 获取事件源
event.stopPropagation() / event.cancelBubble = true（IE浏览器）取消事件的冒泡
代码：先判断是否有event.stopPropagation()
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
javascript：
ECMA :几乎没有兼容问题
DOM: 有一些操作不兼容
BOM： 没有兼容问题
常见数据类型：number string boolean undefined object
数据转换：
显式类型转换（强制转换）
parseInt(12px23)=12 parseInt从左开始提取数字
NaN不等于NaN
isNaN(a) 判断数据a是否是一个数
parseFloat
隐式类型转换
var a = 4; var b='4'; alert(a==b); true 先转换类型，然后再比
var a = 4; var b='4'; alert(a===b); flase 不转换类型，直接比
var a = '7'; var b='4'; alert(a+b); 74 字符串链接
var a = '7'; var b='4'; alert(a-b); 3 数据类型转换，再运算
变量作用域
局部变量：只能在定义它的函数里边用
全局变量：任何地方可以使用
闭包：子函数可以使用父函数的局部变量
命名规范：
匈牙利命名法：类型前缀（变量命名）; 首字母大写；
运算符：
%：求模或取余（应用如：隔行变色，秒转时间）
复制：= += *= -= *= /= %=
关系：< > <= >= == === != !==
逻辑： &&(并且） ||(或者) !（否）
运算优先级：括号
流程控制：
判断：if switch ?(三元/三木运算符)
循环：for while
跳出：break（到此判断条件生效中断后边所有循环） continue(到此判断条件生效中断本次循环）;
真：true，非零数字，非空字符串，非空对象
假：false, 数字零， 空字符串， null， undefined
json
存储数据，类似数组
var json={a:1,b:2,c:3}
var arr=[1,2,3]
alert(x.b)/alert(json(a));
alert(arr[0]);
json(a):a为字符串 arr[0] 0为数字
json无length arr有length
json一般用for in 循环
函数返回值
函数的执行结果
当参数数量不确定时使用arguments
arguments：不定参
如：求不定参数之和
function sum(){
var result=0;
var i=0;
for(i=0;i<arguments.length,i++){
result+=arguments[i];
}
return result;
}
sum(2,3.4,...);
css函数
css(div,'width') 获取样式
css(div,'width','300px') 设置元素样式
取非行间样式
currentStyle 仅IE兼容
getComputedStyle 非IE使用
解决此兼容问题方法：
if(div.currentStyle){
//IE代码
div.currentStyle
}else{
//非IE代码
getComputedStyle
}
封装此方法：
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,flase)[name];
}
}
调用：(无法取复合样式)
getStyle(div1,width);
getStyle(div1,backgroundColor;
数组：
数组的length可以获取，也可以设置，根据数组长度截取
数组添加/删除元素
var arr=[1,2,3]
arr.push(4) 尾部添加
arr.pop(3) 尾部删除
arr.shift(1) 头部删除
arr.unshift(0) 头部添加
splice(起点，长度，元素）
arr.splice(0,2) 从起点删除到长度为2的数组
arr.splice(0,2,3,4,5) 从起点删除元素后，添加3，4，5，
数组转换
concat连接两个数组
var a=[1,2,3]
var b=[4,5,6]
a.concat(b)=[1,2,3,4,5,6]
join(拼接数组)
var a=[1,2,3,4,5]
a.join('-');
排序
sort
var arr=[12,3,453,5,56];
arr.sort(
function(){n1,n2}
return n1-n2; //等同以下代码
/*
if(n1<n2){
return -1;
}else if(n1>n2){
return 1;
}else{
return 0;
}
*/
)
定时器：
周期性定时器
setInterval(语句,毫秒值)
clearInterval();
一次性定时器：延时性
setTimeOut()
clearTimeOut();
延迟提示框：
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
oDiv1.onmouseover-=oDiv2.mouseover=function(){
clearTimeout(timer);
oDiv2.style.display='block'
}
oDiv2.onmouseout-=oDiv1.mouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none'
},1000);
}
}
日期
getFullYear()
getMonth() 月份从0开始，使用时需加1
getDate()
getDay() 星期几 0-6分别：周日-周六
getHour()
getMinate()
getSecond()
设置图片路径：charAt
无缝滚动
offsetLeft/offsetTop
改变滚动方向：修改speed +2px:向右 -2px:向左
复制li:innerHtml和+= 修改ul的width
鼠标移入暂停：nouseover 移入关闭定时器，移出重新开启定时器
DOM
DOM模型：（document object model）文档模型-根：document对象
节点：元素节点、属性节点、文本节点、文档节点
读取操作：
节点.nodeName 获取节点名称（文本节点：#text/文档节点：#document）
节点.nodeType 获取节点类型（返回数值 1：元素节点 2：属性节点 3：文本节点 8：注释节点 9：文档节点）
节点.innerText 获取该元素区内的所有文本。包括标签节点
节点.innerHTML 获取该元素区内的所有HTML页面内容
节点.getAttribute(属性) 获取元素某个属性的值
节点.setAttribute(属性) 设置元素某个属性的值
节点.removeAttribute(属性) 移除元素的某个属性
节点.style.color 更改style里的颜色
节点.style.fontSize 更改style里的字体大小
节点.className 更改元素属性
document.getElementById(id) 通过id获取该元素节点
document.getElementsByName(name) 根据name名称获取元素节点，多用于表单提交
节点.parentNode 查找单个父节点
节点.childNodes 查找多个子节点
firstChild:高版本不兼容
firstElementChild兼容高版本
元素.getElementsByTagName(标签名) 通过标签名获取元素节点的子节点，不包括空格,
注意：此处只能为标签名；如td、input、h、。如果获取某一个，可以使用数组索引确定：
var inputs = td.getElementsByTagName("input");
var text = inputs[2];
封装获取某个className的元素的方法
//oParent:父元素 sClass:要选择的class名字
function() getByClass(oParent,sClass){
var aResult=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
if (aEle[i].className='sClass'){
aResult.push(aEle[i]);
}
}
return aResult;
}
js中更改style的背景：
document.body.style.backgroundColor="#FFFFFF";//改变背景色
document.body.style.backgroundImage="url(images/bgimg.gif)";//改变背景图片
增删操作：
创建：
document.creatElement(元素名) 创建新节点
添加：
节点.appendChild(a) 节点a插入到element下，(并且从原来的父节点中删除!)排到最后。即：为父节点追加子节点
element.insertBefore(a，b) 节点a插入到element下的b前边，排到最前
案例：每次操作都将元素a,插入到父元素的最前面
此处低版本iE会出现兼容问题，如果a为第一个元素，会报错
if(父节点.length>0){
父节点.insertBefore(a,父节点[0]);
}else{
父节点.appendChild(a);
}
删除：
父节点.removeChild(子节点） 删除子节点
文档碎片：Fragment
创建文档碎片：document.createDocumentFragment();
表格应用
获取：tBodies,tHead,tFoot,rows,cells(单元格)
隔行变色加移入行变色：
var oTab=document.getElementBy('tab1');
var oldColor='';
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
oTab.tBodies[0].rows[i].mouseover=function(){
oldColor=this.style.background;
this.style.background='green';
}
oTab.tBodies[0].rows[i].mouseoutr=function(){
this.style.background=oldColor;
};
if(i#2){
oTab.tBodies[0].rows[i].background='';
}else{
oTab.tBodies[0].rows[i].background='#ccc';
}
}
添加/删除行
忽略大小写：a.toLowerCase()=b.toLowerCase();
模糊搜索：a.sarch(b)!=-1
split分割字符串，
表格排序：
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBn.onclick=function(){
var arr=[];
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=0Tab.tBodies[0].rows[i];
}
arr.sort(function(tr1,tr2){
var n1=parseINt(t1.cells[0].innerHtml);
var n2=parseINt(t2.cells[0].innerHtml);
return n1-n2;
});
for(var i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i]);
}
}
表单应用：
js运动：
多物体同时运动：
例子：多个div,鼠标移入变宽
单定时器，存在问题，
每个div一个定时器
多物体运动框架：
定时器作为物体的属性
参数的传递：物体，目标值
例子：多个div淡入淡出
所有东西布恩那个公用
属性与鱼洞对象绑定：速度，其他属性值（如透明度等）
任意值运动框架
offset属性的bug
有边框的div变宽
用currentStyle代替offset
原有运动框架的问题
只能让某个值运动起来
如果想让其他值运动起来，要修改程序
扩展的运动框架
运动属性作为参数
封装opacity
小数的问题
不加绝对定位，无法运动
运动框架：
开始运动时关闭已有定时器
吧运动和停止隔开(if/else)
透明度：IE:filter:alphao(opacity:30)/谷歌，火狐：opacity:0.3
缓冲运动: 距离与速度成正比
速度要取整
速度=（目标值-当前值）/缩放系数
匀速运动
offsetWidth控制div(加border,padding)时的bug
链式运动框架
回滚s
BOM browser object model 浏览器对象模型
事件
事件对象：用来获取事件的详细信息：鼠标位置，键盘按键
获取鼠标位置：clientX
document的本质：documentchildNodes[0].tagName
获取event对象(兼容性写法)
var oEvent=ev || event;
取消事件冒泡：x.cancelBubble=true;(如：仿select框)
鼠标事件:onmousemove
clientX,clienY
scrollTop:消除滚动条的影响
键盘事件：
keyCode:获得键位
onkeydown onkeyupfe
其他属性：ctrlKey,shiftKey,altKey
默认行为/默认事件
组织默认事件方法：return false;
浏览器自带行为
右键菜单事件：document.oncontextmenu
阻止右键菜单：
document.contextmenu=function(){return false;}
只能输入数字
拖拽div
拖拽原理：距离不变，三个事件
拖拽问题:1.直接给document加事件 2.firefox下，空div拖拽bug阻止默认事件return false;
3.防止拖出页面，修正位置，上下左右
高级拖拽：
不能拖出制定对象div
磁性吸附：if判断间距大小
图片拖拽：
IE下捕获事件：x.setCapture
IE下释放事件：x.releaseCapture
带框拖拽
事件绑定
IE下attachEvent('函数名','函数')
firefox和google下 addEventListener('函数名(没有on)',函数，false）
例子：
var oBtn=document.getElementById("btn");
if(oBtn.attachEvent){
oBtn.attachEvent('onclick',function(){alert("a");})
oBtn.attachEvent('onclick',function(){alert("b");})
}else{
oBtn.addEventListener('click',function(){alert("a")}，false）;
oBtn.addEventListener('click',function(){alert("b")}，false）;
}
封装此方法：
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){'on'+ev,fn};
}else{
obj.addEventListener(ev.fn,false);
}
myAddEvent(oBtn,'click',function(){alert("b");});
解除绑定：
IE: detachEvent(事件名，函数)
FF/google: removeEventListener(事件名，函数，捕获)
自定义滚动条
js中
--用没有定义的变量：报错
--用没有定义的属性：undefined
javascript面向对象
面向对象（00P)
抽象：抓住核心问题 抓住问题的主要特征
封装：不考虑内部实现，只考虑功能的使用
继承：从父类中继承一些方法，属性，子类又有一些自己的特性
多重继承
多态
对象的组成
方法--函数：过程，动态的
属性--变量：状态，静态的
this：当前的方法属于谁this就是谁
object对象：没有功能
工厂模式：
创建-加工-返回
缺点：1.没有new
2.方法重复-浪费资源
解决方式：构造函数加属性，用原型加方法
1.调方法时new,方法中全部用this
2.方法对象加prototype
原型（prototype）相当于css中的class,给一组元素加
原型是给类加方法
类和对象
把面向过程的程序改写成面向对象的形式
原则：不能有函数套函数，但可以有全局变量
过程
onload → 构造函数
全局变量 → 属性
函数 → 方法
改错：this，事件，闭包，传参
对象与闭包
通过闭包传递this
命名空间json
javascript对象:
1.本地对象（非静态对象）
需要new一个，即实例化才能使用
object，function，array，string，boolean，number，date,regExp,error
2.内置对象（静态对象）
直接使用
global（概念对象），math
3.宿主对象
DOM BOM
BOM
document.write();运行
window.navigator.userAgent:浏览器版本信息
window.location:当前网址
可视区尺寸：
document.document.Element.clientWidth
document.document.Element.clientHeight
滚动距离：
document.body.scrollTop //chrome
document.documentElement.scrollTop //IE/FF
window对象常用事件：
onload()
onscroll()滑动滚动条触发
onresize()改变浏览器窗口尺寸触发
window.open("http://www.w3school.com.cn","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
系统对话框：
alert();提示框
confirm();确认框
prompt();输入提示框
cookie
特点：
同一个网站所有页面共享一套cookie
有大小，数量限制（4-10k)
过期时间
js中使用cookie
document.cookie
= 等同于添加，不会覆盖
H5视频播放器：videoJS
<head>
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">