一、初识 javascript

1、JS组成：ECMA   BOM  DOM

（1）是一种基于 对象模型 和 事件 的脚本语言

（2）组成：

• ECMAScript由ECMA-262定义，提供核心语言功能；
• 文档对象模型（DOM），提供访问和操作网页内容的方法和接口；
• 浏览器对象模型（BOM），提供与浏览器交互的方法和接口；

2、html 中使用 javascript

• 所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析,只有在解析完前面<script>元素中的代码之后，才会开始解析后面<script>元素中的代码;
• 一般应该把<script>元素放在页面最后，即主要内容后面，</body>标签前面;

二、基本概念

1、js 的基本特点

• 区分大小写；
• 标识符字母、数字、下划线和美元符组成，数字不能开头；
• 单行和多行注和 java 一样；
• 语句的分号不是必须的，但是最好写一下；

2、变量

（1）变量的基本特点

• 松散的数据类型；
• 可连续声明和赋值；

（2）数据类型：undefined、null、string、number、boolean、object

（3）typeof 操作符：不是函数；可以用来判断 function；function 是一个特殊的对象；

3、基本数据类型

（1）Undefined：

• undefined 的引入是为了区分空对象指针（null）和未初始化的变量的（undefined）；
• undefined 不需要显示声明；
• 为声明的变量用 typeof 判断结果也是 undefined；

（2）Null：如果一个变量要用来保存对象需要显示声明为 null；null==undefined 为 true；

（3）Boolean：

• true不一定等于1，而false也不一定等于0；
• 其他的数据类型通过Boolean（）函数可以转换为 boolean 值：空串为false，0和nan为false，null为false，undefined为false；
• if 判断中的变量会自动转换为 boolean；

（4）Number：

• 进制：070（八进制）、0xAF（16进制）；
• 浮点数：
• 1、浮点数没有小数位会自动转化为整数；
• 2、浮点数值计算会产生舍入误差的问题在很多的语言中都存在

?

• 数值范围：最小值（Number.MIN_VALUE） 、最大值（Number.MAX_VALUE）
• 关于NAN：nan不等于nan；可以用 isNaN（）函数判断，此函数会自动尝试转换其中的参数为number，其中的参数可以是对象；
• 数值转换：
• 1、Number（）：支持十六进制；
• 2、parseInt（str，rule）：rule 参数可以指定进制；默认支持八进制和十六进制的解析；
• 3、parseFloat（）：解析都是按十进制来的；
• 4、空串、null 和 undefined：Number函数的结果是（0、0、nan）；parseFloat 和 parseInt 都是 nan；

（5）String：

• 字符串实质是字符序列；
• 字符串一旦创建，它们的值就不能改变,要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量；
• 转为String：
• 1、tar + ""；
• 2、tar.toString（2）：可以实现进制的转换；null 和 undefined 不能用；
• 3、String（tar）：null 和 undefined 也可以；

（6）Object：

• 概念就像Java中的java.lang.Object对象一样；
• BOM和DOM中的对象，都属于宿主对象,由宿主实现提供和定义的,可能会也可能不会继承Object;
• object 使用字面量表示法（json），不会调用构造函数；

（7）其他说明：

• 闭包的概念：子函数可以使用父函数的局部变量；

4、变量补充

（1）基本类型

• 保存在栈中；复制值的副本；
• 可以用 typeof 区分类型；函数传参是按值传递；

（2）引用类型

• 值为对象保存在堆中；复制的时候复制的是指针；
• 用 instanceof 区分具体类型；函数传参是按值传递（传递的是引用的副本）；
• 对象可以动态添加属性；function 是一个特殊的对象；

（3）作用域（执行环境）

• 全局变量（全局执行环境）
• 局部变量（函数执行环境）
• 作用域链：搜索变量和函数就近原则，从里往外找，找到就停止；里面的能访问外面的，外面的不能访问里面的；

（4）内存问题（垃圾回收）

• js 自动垃圾回收机制基于标记清除法（基于变量的作用域）；
• 另外一种回收机制是引用计数法，用的少，因为相互引用会导致无法垃圾回收引发内存泄漏；
• 解除变量的引用有利于垃圾回收：全局变量、全局变量属性和循环引用在不用的时候最好及时解除引用（null）；

（5）关于 try---catch 和 with 语句

• catch块中会匹配错误对象的属性；
• with：里面的href 会首先去匹配 location 的属性

?

（6）关于 if 和 for：js没有块级作用域

?

?

4、运算符 | 流程控制 | JSON

（1）运算符

• 由于相等（==）和不相等（！=）操作符存在类型转换问题，而为了保持代码中数据类型的完整性，我们推荐使用全等(===)和不全等(!==)操作符；
• 三目运算符：（condition？value1：value2）

（3）流程控制：

• if、switch、
• for、for-in、
• while、do-while（break和continue）
• 说明：
• 1、基本和java一样的用法；
• 2、循环也支持 label：statement 方式的命名，以便在break等中使用；
• 3、switch语句在比较值时使用的是全等操作符，因此不会发生类型转换；
• 4、for（var  i  in  json）来进行遍历对象的属性（json 可以理解为 js 对象的简化表示）；

三、引用类型

1、Object

2、数组（Array）

（1）特点：

• 1、Array 的length 属性既可以获取也可以设置；
• 2、可以保存不同类型的值，大小也可以动态调整；
• 3、包含 index 和 length，index的最大值是length-1；伪数组也有；

var arr = [1,2];
arr[arr.length] = 3;
arr[arr.length] = 4;
arr[10] = 10;
console.log(arr.length);
console.log(arr[8]);

（2）数组检测：

• value instanceof Array：包含多个框架（多个全局环境的时候会有问题）
• Array.isArray(value)：忽略执行环境，但是一些浏览器不支持？

（3）常用方法：

• 转换方法：
• 1、数组继承的toLocaleString()、toString()和valueOf()方法，在默认情况下都会以逗号分隔的字符串的形式返回数组项；
• 2、join（）：元素连接成字符串，指定分隔符；
• 栈方法：
• 1、push（）和 pop（）方法；
• 2、注意 push 方法会返回操作后的数组的长度；
• 队列方法：
• 1、push 和 shift 方法一对，pop 和 unshift 一对可以实现队列；
• 2、其中 unshift 也是返回数组的长度；
• 重排序方法：
• 1、reverse 和 sort 方法；
• 2、sort 方法默认是比较字符串，想要比较数值和其他数据类型的大小，要用到比较函数（传参）；
• 3、比较函数如下：上为通用的比较函数，下为数值类型的比较函数

?

?

• 操作方法：
• 1、concat：数组的连接；
• 2、slice（begin，end）：切片；
• 3、splice：可以插入、删除和替换：splice（起点，删除长度，添加的数据）；此方法返回被删除的数组；
• 位置方法：
• 1、indexOf() 和 lastIndexOf()；
• 2、没找到返回 -1；使用全等（===）；
• 3、两个参数的情况：第二个参数是指定查找的起始 index

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4, 6));
console.log(numbers.lastIndexOf(4, 6));

• 迭代方法：
• 1、every 和 some：返回值是 true 和 false；every 全部元素满足条件则返回true，some一个满足就返回 true；
• 2、filter：返会一个数组由满足条件的元素组成；
• 3、map 和 forEach：map 返回一个数组；forEach没有返回值；
• 4、每个方法都接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象（可选的）；其中函数参数都包含item、index、array 这三个参数；
• 归并方法：每一次迭代可以从参数里取到上一次返回的值
• 1、reduce() 和 reduceRight()
• 2、可以执行数组求和：

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
	return prev + cur;
},10);
console.log(sum); //15 + 10 = 25

3、时间（Date）

（1）构造函数和三个方法

var now = new Date(); //里面不传参数获取当前时间，也可以参一个毫秒值
var someDate1 = new Date(Date.parse("May 25, 2004"));
var someDate2 = new Date("May 25, 2004");
var allFives1 = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));
var allFives2 = new Date(2005, 4, 5, 17, 55, 55);
var start = Date.now();  //获取当前时间的毫秒值

（2）继承方法

• toLocaleString()、toString()、valueOf()
• 两个 String 方法因浏览器不同输出不同；valueOf 返回日期的毫秒表示（getTime方法也是）；

（3）格式化方法

?

（4）组件方法

• 获取时分秒：getHours（）、getMinutes（）、getSeconds（）
• 获取年月日：getFullYear（）、getMonth（）+1、getDate（）、getDay（）---星期

4、正则（RegExp）

（1）字面量和构造函数

var pattern1 = /at/g;
var pattern2 = new RegExp("[bc]at", "i");

• 后面的匹配模式：g（全局匹配）、i（忽略大小写）、m（多行模式）；
• 二者的差异：
• 1、字面量的元字符转义只要一个 \   而构造函数要 \\
• 2、下面的例子中字面量只有一个对象，构造函数生成多个对象（实际测试大部分浏览器字面量也是每次创建新实例）

var re = null, i;
for (i=0; i < 10; i++){
	re = /cat/g;
	console.log(re.test("catastrophe")+Math.random());
}
for (i=0; i < 10; i++){
	re = new RegExp("cat", "g");
	console.log(re.test("catastrophe"));;
}

（2）实例属性

var pattern1 = /\[bc\]at/i;
alert(pattern1.global);         //false
alert(pattern1.ignoreCase);     //true
alert(pattern1.multiline);      //false
alert(pattern1.lastIndex);      //0
alert(pattern1.source);         //"\[bc\]at"

• source属性保存的是字面量形式所用的字符串；

（3）实例方法

var text = "mom and dad and baby"; 
var pattern = /mom( and dad( and baby)?)?/gi; 
var matches = pattern.exec(text); 
alert(matches.index);     // 0 
alert(matches.input);     // "mom and dad and baby" 
alert(matches[0]);        // "mom and dad and baby" 
alert(matches[1]);        // " and dad and baby" 
alert(matches[2]);        // " and baby" 

• exec 方法返回的是数组，其中含两个额外属性，index 表示匹配项在字符串中的位置，input表示测试的字符串；
• 模式中设置了全局标志（g），每次也只会返回一个匹配项；
• 没有（g），在同一个字符串上多次调用exec()将始终返回第一个匹配项的信息；
• 有（g），每次调用exec()则都会在字符串中继续查找新匹配项；
• 在全局匹配模式下，lastIndex的值在每次调用exec()后都会增加，而在非全局模式下则始终保持不变；
• 另外一个 test（）方法返回 true 或 false；

（4）构造函数属性

var text = "this has been a short summer";
var pattern = /(.)hort/g;
if (pattern.test(text)){
	alert(RegExp.input);            // this has been a short summer
	alert(RegExp.leftContext);      // this has been a
	alert(RegExp.rightContext);     // summer
	alert(RegExp.lastMatch);        // short
	alert(RegExp.lastParen);        // s
	alert(RegExp.multiline);        // false IE不支持
}

• RegExp.$1、RegExp.$2...RegExp.$9，分别用于存储第一、第二......第九个匹配的捕获组；

（5）模式局限性

5、函数（funtion）

（1）函数参数（声明、调用和返回略）

• arguments（可变参）：伪数组（有 index 和 length），存的传入的参数，可以用for 遍历；
• 函数的参数在声明的时候写不写都可以，写多少个也没有规定，底层是用数组实现的，函数声明的括号里写上形参只是为了函数内部使用的方便；函数在调用的时候要传几个实参都是可以的，反正是传几个接受几个；
• 由于 js 函数参数的以上特点，所以 js 的函数没有真正意义上的重载；
• 函数的参数最好的做法是对那些必需值使用命名参数，而使用对象字面量（json）来封装多个可选参数；

（2）function 类型

function sum (num1, num2) {
	return num1 + num2;
}  //函数声明
var sum = function(num1, num2){
	return num1 + num2;
};   //函数表达式

• 函数是对象，函数名是指针；
• 由于 js 函数参数的特殊性，js 是没有方法重载的，同名函数是覆盖的效果；
• 函数声明随意写在什么位置都不影响函数的调用，但是函数表达式必须写在调用之前才不会出错；

三、DOM应用

1、dom基础

（1）dom 节点：

• 父节点的获取：parentNode、offsetParent（获取有定位的父节点）；
• 子节点的获取：childNodes和nodeType（也可以用children）；
• 首尾子节点：firstChild（firstElementChild 不会获取到文本节点，IE9以下不可用）、lastChild（lastElementChild）；
• 兄弟子节点：nextSibling（nextElementSibling）、previousSibling（previousElementSibling）；

（2） 元素的属性操作：

• obj.value（不可以传参） 和 obj["value"]（可以传参）
• setAttribute | getAttribute | removeAttribute
• 属性相关：
• 1、属性基本 html 怎么写 js 就怎么写，除了 class 外：div.className=" "；
• 2、style 属性无论是增加还是获取都是取行间，行间没有的话，取值的时候取不到；
• 3、style 的优先级高于 className；
• 4、获取非行间样式的兼容性写法：

function getStyle(obj, attr) {
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,null)[attr];
	}
}

（3）dom元素灵活查找：

• 用 className 来获取元素，封装函数 getByClass（oParent，sClass）

（4）创建、插入和删除元素

• createElement | appendChild（加在末尾，也是先删后加）| insertBefore（节点，指定节点）--加在前面；
• removeChild（）

（5）文档碎片（*）：createDocumentFragment----几乎不用

2、dom高级

（1）表格应用

• 表格的便捷操作：tHead、tFoot、tBodies、rows、cells；
• 表格的隔行变色；
• 添加和删除一行；
• 搜索和排序；

（2）表单应用

• 事件：onsubmit、onreset；
• 表单的验证；

四、JS运动技术

1、运动基础

（1）offsetWidth 和 offsetHeight：只和自身相关，与周围的元素无关

• offsetWidth = border-left + border-right + padding-left+padding-right+元素本身的宽度;
• offsetHeight = border-top + border-bottom + padding-top+padding-bottom+元素本身的高度；

（2）offsetLeft和offsetTop

• offsetTop = 上级定位元素的padding + 元素本身的margin；
• 如果二者中间还有其他元素，还要加上该元素的 margin padding 和 border；
• offsetLeft同理；

（3）scrollTop和scrollLeft：与滚动条相关的属性

• scrollTop：滚动条当前位置显示的最上面和真正的最上面的距离，scrollLeft同理；

（4）clientHeight和clientWidth

• clientHeight包括padding但不包括border、水平滚动条、margin的元素的高度，clientWidth同理；

（5）定时器

• 开启：setInterval（函数，时间）---循环执行；setTimeout（）---只执行一次；
• 关闭：clearInterval；clearTimeOut；
• 应用：数码时钟，延时提示框、无缝滚动；

2、运动框架

（1）开始运动前先关闭已有的定时器；

（2）将运动和停止的状态用 if else 隔开；

（3）练习：侧边栏、图片的淡入淡出；

3、缓冲运动

（1）速度越来越慢，最后停止；

（2）速度=（目标值-当前值）/缩放系数；

（3）缓冲菜单：速度取整（向上和向下取整）；目标值取整；

4、匀速运动的停止条件

（1）距离小于速度就停止；

（2）再手动将元素移到目标点；

（3）匀速和缓冲运动代码的差异：速度表达式不同，最后的停止条件和处理方法也不同

5、多物体运动框架

（1）多物体运动框架很多东西都不能公用，定时器和透明度的变量等，解决方法就是给每个元素设置自定义属性；

6、任意值的运动框架

（1）offset 属性 bug 和 opacity 的小数问题；

（2）练习：图片轮换的播放器；

7、运动中级

（1）链式运动

• 在原有框架的基础上加一个回调函数，在运动结束关闭定时器之后加

（2）完美运动框架

• 多个属性同时变化；
• 等所有的条件都满足再停止；

五、JS事件应用

1、基础

（1）event对象

• 用来获取事件的详细信息：鼠标位置，键盘键位
• 鼠标的位置：clientX 和 clientY
• document的本质：可以看作一个最高级的节点，包含html 的所有内容，全局事件加在 document 上
• 事件对象的兼容性写法：var oEvent = ev || event

（2）事件冒泡

• 父级和子级的元素假如都有 onclick 事件，子级元素的被点击，则会触发父级元素的点击事件
• 阻止事件的冒泡：event.cancelBubble = true;

（3）鼠标事件

• onmousemove事件
• clientX 和 clientY 实际是可视区域的坐标，如果要获取相对与 document 的绝对坐标，需要和 scrolltop 等配合使用，封装相应的方法；
• 应用：div 跟随鼠标的移动

（4）键盘事件

• keycode ：可以用来判断键盘的按键；应用：键盘控制 div 的移动；
• ctrlkey、altkey、shiftkey：应用提交留言；

2、中级

（1）默认行为

• 默认行为就是浏览器自发产生的行为，不用人为写代码触发；
• document.onContextMenu（右键菜单弹出）；
• 阻止默认行为，直接在事件的方法里 return false；
• 练习：阻止右键默认菜单，弹出自定义菜单；只能输入数字的文本框（keycode 和 onKeydown）；

（2）拖拽

   1、基本原理：

• 元素位置的确定依靠鼠标位置和鼠标距离元素左上边界的长度来确定；
• onmousedown计算鼠标和元素边界的距离，onmousemove重新定位元素，onmouseup停止事件；

   2、拖拽的改进：

• 快速拖动鼠标会移出 div ：直接给 document 加事件；
• 火狐浏览器下空 div 的拖拽 bug：阻止默认行为；
• 防止 div 脱出页面：进行位置的修正；

3、应用

（1）事件绑定

• 老方法给同一个元素相同事件绑定不同的函数，会出现后面的把前面的覆盖了的问题；
• 解决以上问题需要用到新的事件的绑定方法

function myAddEvent(obj, ev, fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent(‘on‘+ev, fn);
	}
	else
	{
		obj.addEventListener(ev, fn, false);
	}
}

• 事件的解绑：IE（detachEvent）；CHROME（removeEventListener）； 

（2）高级拖拽

• 练习：不能脱出指定的元素；
• 练习：磁性吸附功能（靠近边界的时候把距离设置为0即可）；
• 练习：带框的拖拽；
• 事件捕获：将所有元素的事件集中到某一个元素上，解决IE下拖拽引起的其他元素的选中问题（setCapture()、releaseCapture()）；

（3）自定义滚动条

• 原理：横向拖拽；限制范围；计算比例；
• 应用：控制元素大小；控制透明度；控制文字的滚动；

六、AJAX技术

1、概念

• Ajax 即 Asynchronous Javascript And XML（异步 JavaScript 和 XML）；
• 无刷新数据读取技术；

2、应用

• 读取静态数据，如txt文件等；
• 读取动态数据，如json；
• 用于网页的局部刷新；

   其他：

• eval（str）可以将 str 解析为 js 执行；
• 浏览器缓存是根据 url 进行缓存的，变更 url 可以阻止浏览器的缓存；

3、原理

（1）AJAX 原理

/**
 * ajax 的封装
 */

function myAjax(method,url,data,async,sucFn,faiFn){
	//get ajax obj
	if(window.XMLHttpRequest)
	{
		var oAjax=new XMLHttpRequest();
	}
	else
	{
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//connection check method
	if(method.toUpperCase() == "GET"){
		oAjax.open(method, url+(data ? ‘?‘+data : ‘‘), async);
		oAjax.send(data);
	}else if(method.toUpperCase() == "POST"){
		oAjax.open(method, url, async);
		oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
		oAjax.send(data);
	}
	//state listener
	oAjax.onreadystatechange=function ()
	{
		if(oAjax.readyState==4)	
		{
			if(oAjax.status==200)
			{
				if(sucFn){
					sucFn(oAjax);
				}
			}
			else
			{
				if(faiFn){
					faiFn(oAjax);
				}
			}
		}
	};
};

（2）说明：

• ajax 数据类型：xml 和 json；
• 字符集问题：统一字符集就不会出现乱码；
• js 的变量与属性：使用未定义的变量会报错；使用未定义的属性仅仅是 undefine，不会报错；

（3）AJAX请求的几种状态

• 0：未初始化，还未调用 open 方法；
• 1：载入，已调用 send 方法，正在发送去请求；
• 2：载入完成，send 方法完成，收到所有的响应内容；
• 3：解析，解析响应内容；
• 4：完成，解析完成，可以在客户端使用了；

七、面向对象

1、概述

（1）js 中的面向对象：隐藏实现的细节，对外发布功能；

（2）面向对象的特点：

• 抽象：抓住核心问题；
• 封装：隐藏实现的细节，对外发布功能；
• 继承：已有对象派生出新的对象（多态和多重继承）；

（3）对象的组成：

• 属性（变量）
• 方法（函数）

2、为对象添加方法和属性

（1）this 的本质：函数属于谁，全局函数属于 window 对象；

（2）Object 对象：

• 不能随意给系统的对象添加属性和方法，可能会造成方法和属性的覆盖；
• Object 是一个空的对象，可以用来改造；

3、类的构建方法

（1）工厂方式

• 原理：用构造函数创建一个类
• 存在问题：不能 new；通用的方法存在很多，浪费资源；
• 构造函数也可以加上 new ，加上 new 后会自动做两件事：创建空白对象和返回对象，new 创建的对象名即为 this；

（2）原型（prototype）

• 概念：类似于 css 中的 class 的概念，修改他可以影响一类的元素；
• 给对象加方法类似于行间样式；给原型加方法类似于 class；
• 原型的缺陷：无法限制属性和方法的覆盖；

（3）混合方法（推荐）

• 构造函数加属性；
• 原型加方法；

function CreatePerson(name, qq)		//构造函数
{
	this.name=name;
	this.qq=qq;
}

CreatePerson.prototype.showName=function ()	//原型
{
	alert(‘我的名字叫：‘+this.name);
};

CreatePerson.prototype.showQQ=function ()
{
	alert(‘我的QQ号：‘+this.qq);
};

var obj=new CreatePerson(‘blue‘, ‘258248832‘);
var obj2=new CreatePerson(‘张三‘, ‘45648979879‘);

4、面向对象的选项卡（练习）

（1）面向过程改面向对象原则

• 不能有函数套函数、但可以有全局变量

（2）过程

• onload  →  构造函数
• 全局变量  →  属性
• 函数  →  方法

（3）注意 this 在面向对象的用法

window.onload=function(){
            new Tar(‘div1‘);
        };

        function Tar(id) {
            var _this = this;
            this.oDiv = document.getElementById(id);
            this.aInput = this.oDiv.getElementsByTagName(‘input‘);
            this.aDiv = this.oDiv.getElementsByTagName(‘div‘);

            for(var i = 0;i < this.aInput.length;i ++){
                this.aInput[i].index = i;
                this.aInput[i].onclick=function () {
                    _this.fnClick(this);
                };
            }
        }

        Tar.prototype.fnClick = function (aInput) {
            for(var j = 0;j < this.aInput.length;j ++){
                this.aDiv[j].style.display = "none";
                this.aInput[j].className = ‘‘;
            }
            this.aDiv[aInput.index].style.display = ‘block‘;
            aInput.className = ‘active‘;
        };

5、面向对象高级

（1）JSON方式的面向对象

• json 和 js 对象是无缝衔接的；
• 将方法和属性加入 json 即可实现面向对象；
• json 的面向对象适合单例模式；
• 命名空间的概念：区分同名方法；

var json = {
            name:‘allen‘,
            age:24,
            show:function () {
                alert(this.name+‘:‘+this.age);
            }
        };
        json.show();

（2）继承（以拖拽为例）

• 继承的概念：在原有类的基础上，略作修改，得到一个新的类；不影响原有类的功能；
• 继承使用：普通拖拽和限制范围的拖拽

//1、构造函数内用 call 继承属性；
//2、遍历原型链复制继承方法；

/*普通拖拽*/
function Drag(id) {
    var _this = this;
    this.oDiv = document.getElementById(id);
    this.oDiv.onmousedown = function (ev) {
        _this.down(ev);
    }
}

Drag.prototype.down = function (ev) {
    var _this = this;
    var oEvent = ev || event;
    this.disX = oEvent.clientX - this.oDiv.offsetLeft;
    this.disY = oEvent.clientY - this.oDiv.offsetTop;
    document.onmousemove = function (ev) {
        _this.move(ev);
    };
    document.onmouseup = function () {
        _this.up();
    };
};

Drag.prototype.move = function (ev){
    var oEvent = ev || event;
    this.oDiv.style.left = oEvent.clientX - this.disX + "px";
    this.oDiv.style.top = oEvent.clientY - this.disY + "px";
};

Drag.prototype.up = function () {
    document.onmousemove = null;
    document.onmouseup = null;
};


/*限制拖拽*/
function LimitDrag(id) {
            Drag.call(this,id);
        }

        for(var i in Drag.prototype){
            LimitDrag.prototype[i] = Drag.prototype[i];
        }

        LimitDrag.prototype.move = function (ev) {
            var oEvent = ev || event;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            if(l < 0){
                l = 0;
            }
            if(t < 0){
                t = 0;
            }
            this.oDiv.style.left = l + "px";
            this.oDiv.style.top = t + "px";
        }

（3）系统对象

• 本地对象（非静态）：Object、Function、Array、Number、String 等
• 内置对象（静态）：Math、Global
• 宿主对象（浏览器提供）：BOM、DOM

八、其他知识

1、BOM应用

（1）基础

• window.open(url,‘_self‘)：打开一个窗口；
• window.close()：关闭一个窗口，最好是脚本打开，脚本关闭，不然会有一些问题；
• window.navigator.userAgent
• window.location：就是html文件的地址，不仅可以取值，也可以赋值；

（2）尺寸坐标

   1、可视区宽高

• document.documentElement.clientWidth
• document.documentElement.clientHeight

   2、滚动距离

• document.body.scrollTop
• document.documentElement.scrollTop

（3）常用方法事件

• 对话框：alert、confirm、prompt
• 事件：onload、onscroll、onresize

2、cookie基础与应用

（1）基础

• 作用：用来保存信息，比如用户名密码；
• 特点：同一域名所有页面共享一套 cookie；cookie的数量和大小十分有限；cookie有过期时间；
• 使用：document.cookie属性；

（2）使用

• getCookie：split分割后遍历；
• setCookie：重复设置不会覆盖，只会增加；
• removeCookie：通过设置过期时间为 -1 来实现；
• 登录页面的例子：提交记录用户名，onload读取信息；

3、正则表达式

（1）基础

• 常用字符串操作：search、substring、charAt、split
• 练习：找出字符串中的数字（两种方法）
• 概念：正则是一种规则，用来匹配字符串
• RegExp对象：new RegExp（re，‘i‘）；  /re/ ；

（2）正则和字符串配合

• search：返回位置
• match：返回匹配的
• replace：返回替换后的
• re.test：

（3）正则分解

• 全局规则：i（忽略大小写）g（全部匹配）；
• 方括号:[abc]  [a-z]  [a-z0-9]   [^a] 
• 转义字符：点（.）表示匹配所有字符；\d、\w、\s、\D、\W、\S
• 量词：｛n,m｝       {n,}        {n}       +        *（尽量不用）       ? 
• 头尾匹配：^     $

（4）常用正则练习

• 邮箱电话匹配

javascript总结

原文：https://www.cnblogs.com/stanwuc/p/10600063.html