javascript

初探JavaScript魅力-1

JavaScript是什么

根据用户的一些操作，然后来修改页面上的一些元素、属性等。

（1）HTML+CSS静态页面，JS给页面添加动的效果

（2）网页特效的原理

javascript就是修改样式

（3）编写JS的流程：

【1】布局：HTML+CSS

【2】属性：确定要修改哪些属性

【3】事件：确定用户做哪些操作

【4】编写JS：在事件中，用JS来修改页面元素的样式

补：事件：就是用户操作，如鼠标点击、移入、移出等

（4）id：在css中，id作为css里的一个选择符存在，而在JS里它有更加广泛的用途，

在JS中扮演标签(元素)名字的作用，如

……

，id在这个例子里扮演了div名字的作用，div1就是div的名字

（5）div1.style.display=’block’

点 . ——> 的，一般来说是所属的关系，其实是属性

等号 = ——> 在数学里，x=5，表示x的值就是5，即等号就是相等的意思

在JS里，等号并不是相等的意思，等号指赋值，把什么变成什么，把=右边的值赋给左边

第一个JS兼容性问题:document.getElementById

（1）在FF和低版本的chrome下，是不能直接拿着id就用的，存在兼容问题

真正兼容的写法是document.getElementById(‘id名字’)，在任何浏览器下均可用

如：document.getElementById(‘div1’);

通过div1这个id把元素获取出来，然后再来用

注：记住，不能直接拿着id就用，而必须的通过getElementById（把元素获取出来）获取一下，然后才可以用

（2）网页换肤

(1) 任何标签都可以加ID，包括link

(2) 任何标签的任何属性，也都可以修改

(3) HTML里怎么写，JS里就怎么写，只有一个例外就是class，因为class在JS里是关键字（保留字），所以不能直接拿来用，要写成className

引入函数：因为直接在事件内写代码会很乱

（1）函数基本格式：

[javascript] view plain copy

    function 函数名()  
    {  
            代码  
    }

JS里的函数和css里的class有点相似，像class它最大的一个功能就是你把这个样式写到class里边，然后只要需要这套样式的地方，直接把那个class拿过去用就

可以了，同样JS里的函数也一样.

（2）函数的定义和调用

[javascript] view plain copy

    function show()        //定义  
    {  
        alert('abc');  
    }  
    show();               //调用

函数定义：只是告诉系统有这个函数，不会实际执行

函数调用：真正执行函数里的代码

注：函数的定义和调用缺一不可，只有定义则没反应，只有调用则显示出错了

（3）引入变量的概念：考虑到重用

变量：就是给东西取了个别名

如var oDiv=document.getElementById(‘div1’);给后面这大串取了个别名叫oDiv。看到oDiv就跟看到document.getElementById(‘div1’)是一样的效果

注：(1) 如果你要操作一个元素，你必须先把它选择过来，比如现在要操作的是text这个元素，那么需要先给它加个id，比如id=”txt1”,然后function函数里用

getElementById把它给选择过来

(2) 要操作谁，就要获取谁

(3) 需要一个函数，这个函数是为按钮准备的，因为它点击需要一个函数

if判断：如点击按钮显示/隐藏div(弹出菜单)

（1）if判断基本格式：

[javascript] view plain copy

    if(条件)  
    {  
    语句1  
    }  
    else  
    {  
    语句2  
    }

翻译：如果条件成立就执行语句1，如果条件不成立就执行语句2

注：
(1) if ：如果
(2) 条件：在IS里是判断的意思，就是遇到不同的情况就做不同的操作，遇到不同的问题就做不同的处理

（2）单等和双等(=和==)

= 赋值（改变，变成）

== 判断（判断两边是否相等）

（3）为a链接添加JS


<!--<a href="javascript:alert('a');">链接</a> -->     

<a href="javascript:;">链接</a>

一般a里不加JS代码，而是空的js原因：(1) 在a里加js代码不好 (2) 加空的js代码而不是加##，因为它不会像##那样一点就跳到页首。

初探JavaScript魅力-2

函数传参

改变背景颜色

(1)参数传参：参数就是占位符（占住一个位置，以便于后续向里面塞东西）
什么时候用传参–函数里定不下来的东西

function setColor(color)
{
	var oDiv=document.getElementById('div1');
	
	oDiv.style.background=color;
}
<input type="button" value="变黑" onclick="setColor('black');" />
<div id="div1">

上例定义函数setColor，它有一个参数为color,从input中传递一个参数为black，才是color这个参数就为black,从而实现函数参数的传递。

改变Div的任意样式

(1)操纵属性的两种方式
将属性名作为参数传递

 1.
 
 function setStyle(name, value)
{
	var oDiv=document.getElementById('div1');
	//第一种操作属性的方法  特点:[]里面为一个字符串，可以用变量代替
	oDiv.style['name']=value;
	//第二种操作属性的方法  特点：方便
	oDiv.style.name.=value;
}
<input type="button" value="变绿" onclick="setStyle('background', 'green')" />
<div id="div1">

style与className

(1)元素.style.属性=xxx是修改行间样式

样式优先级：*<标签<class<ID<行间

如下代码已给出style的属性再修改className就不会有效果

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
##div1 {width:200px; height:200px; border:1px solid black;}
.box {background:red;}
</style>
<script>
function toRed()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.className='box';
}
function toGreen()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.style.background='green';
}
</script>
</head>

<body>
<input type="button" value="变红" onclick="toRed()" />
<input type="button" value="变绿" onclick="toGreen()" />
<div id="div1"></div>
</body>
</html>

注意：
1.若已给出style的属性再修改className就不会有效果
2.对于同一个元素，要么选择操纵class要么操纵style

提取行间事件

为元素添加事件

(1)事件和其他属性一样，可以用JS添加

function 名字()
{
	...
}
oBtn.onclick=名字   //直接获取onclick属性


oBtn.onclick=function ()    //匿名函数
{
	....
};

window.onload的意义

1.script标签一般不放body里
2.使用window.online加载HTML的代码

(3)行为（JS）、样式(CSS)、结构(HTML)三者分离

（2）获取一组元素
（1）getElementsByTagName
优势：
1.获取一组元素（数组）
2.配合循环使用
3..length获取数组长度

循环

while循环、for循环

while(条件)
{
	语句
}
   
   
   for循环

for(初始化;条件;自增)
{
	语句
}

（2）用for循环为一组元素添加事件

for(var i=0;i<aDiv.length;i++)
{
	//i->0,1,2,3
	aDiv[i].style.background='red';
}

（3）实现全选、反选、不选

	oBtn1.onclick=function ()     //全选
{
	for(var i=0;i<aCh.length;i++)
	{
		aCh[i].checked=true;
	}
};

oBtn2.onclick=function ()      //不选
{
	for(var i=0;i<aCh.length;i++)
	{
		aCh[i].checked=false;
	}
};

oBtn3.onclick=function ()        //反选
{
	for(var i=0;i<aCh.length;i++)
	{
		if(aCh[i].checked==true)
		{
			aCh[i].checked=false;
		}
		else
		{
			aCh[i].checked=true;
		}
	}
};

选项卡

按钮的实现

(1)添加事件
this的使用
用this选定当前元素，用来修改当前元素的属性

	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].onclick=function ()
		{
			this.className='active';
		};
	}
};

```	

	
(2)先清空所有按钮，再选中当前按钮



```	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].onclick=function ()
		{
			for(var i=0;i<aBtn.length;i++)
			{
				aBtn[i].className='';
			}
			this.className='active';
		};
	}
};

内容的实现

(1)索引值的使用
(2)什么时候用索引值——需要知道“第几个”的时候
(3)html添加index——会被浏览器过滤
(3)js添加index

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var aBtn=oDiv.getElementsByTagName('input');
	var aDiv=oDiv.getElementsByTagName('div');
	
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onclick=function ()
		{
			for(var i=0;i<aBtn.length;i++)
			{
				aBtn[i].className='';
				aDiv[i].style.display='none';
			}
			this.className='active';
			//alert(this.index);
			aDiv[this.index].style.display='block';
		};
	}
};
</script>

简易日历

程序实现思路

(1)类似选项卡，只是下面只有一个div
(2)InnerHTML的使用
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

window.onload=function ()
{
	var oTxt=document.getElementById('txt1');
	var oBtn=document.getElementById('btn1');
	var oDiv=document.getElementById('div1');
	
	oBtn.onclick=function ()
	{
		oDiv.innerHTML=oTxt.value;
		//alert(oDiv.innerHTML);
	};
};
</script>

数组的使用

数组对象用来在单独的变量名中存储一系列的值。

定义数组：

1	var myArray=new Array()

数组赋值：

1.
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2.
var mycars=new Array("Saab","Volvo","BMW")

字符串连接 (+)

作用：连接两个字符串
问题：连接中的优先级（用括号改变优先级）

<script>

alert('abc'+(12+5)+'def');

</script>

JavaScript基础

JavaScript组成

ECMAScript：解释器、翻译
DOM：Document Object Model 操作HTML
BOM：Browser Object Model 操作浏览器
兼容性问题：
ECMA 几乎没有兼容性问题
DOM 有一些操作不兼容
BOM 没有兼容问题（完全不兼容）

变量类型

类型：typeof运算符

用法、返回值

1 2	var a=12; typeof a;

变量类型

变量本来没有类型，变量类型取决于他保存的类型
一个变量应该只存放一种类型的数据

var a=12;
typeof a;   //number

var a='abc';
typeof a；  //string

var a=function();
typeof a;  //function

var a=document;
typeof a;   //object

var b;
typeof b;   //undefined

//undefined出现的情况
//1.真的没有定义
//2.定义了，没有赋值

数据类型转换

(1)显式类型转换(强制类型转换)
[1]parseInt() 把非数字的原始值转换成数字
检测方法：
parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。

var iNum1 = parseInt("12345red");    //返回 12345
var iNum1 = parseInt("0xA");    //返回 10
var iNum1 = parseInt("56.9");    //返回 56
var iNum1 = parseInt("red");    //返回 NaN  Not a number

parseInt() 方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt() 方法的第二个参数指定的，所以要解析十六进制的值，需如下调用 parseInt() 方法：

1	var iNum1 = parseInt("AF", 16); //返回 175

当然，对二进制、八进制甚至十进制（默认模式），都可以这样调用 parseInt() 方法：

1
2
3

var iNum1 = parseInt("10", 2);	//返回 2
var iNum2 = parseInt("10", 8);	//返回 8
var iNum3 = parseInt("10", 10);	//返回 10

[2]parseFloat()
从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成整数。
第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的。parseFloat() 会把这个小数点之前的字符转换成数字。这意味着字符串 “11.22.33” 将被解析成 11.22。
此外，parseFloat() 方法也没有基模式。

var fNum1 = parseFloat("12345red");	//返回 12345
var fNum2 = parseFloat("0xA");	//返回 NaN
var fNum3 = parseFloat("11.2");	//返回 11.2
var fNum4 = parseFloat("11.22.33");	//返回 11.22
var fNum5 = parseFloat("0102");	//返回 102
var fNum1 = parseFloat("red");	//返回 NaN

(2)NaN的意义和检测

[1]NaN = Not a number
[2]NaN和NaN是不相等的
[3]is NaN(a) 判断是否为NaN

隐式类型转换

(1)==、===
[1] == 先转换类型，然后比较
[2] === 不转换类型，直接比

var a=5;
var b='5';
alert(a==b);	//true		先转换类型，然后比较
alert(a===b);	//false		不转换类型，直接比

(2)减法
先转换再相减

var a='12';
var b='5';

alert(a+b);		//1.字符串连接		2.数字相加
alert(a-b);		//1.数字相减

作用域

局部变量、全局变量

局部作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

// 此处不能调用 carName 变量

function myFunction() {
    var carName = "Volvo";

    // 函数内可调用 carName 变量

}

（1）全局变量
变量在函数外定义，即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";

// 此处可调用 carName 变量

function myFunction() {

    // 函数内可调用 carName 变量

}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。


 // 此处可调用 carName 变量

function myFunction() {
    carName = "Volvo";

    // 此处可调用 carName 变量

}

（2）闭包
子函数可以使用父函数的局部变量

function aaa()		//父函数
{
	var a=12;
	
	function bbb()	//子函数
	{
		alert(a);
	}
	
	bbb();
}

aaa();

命令规范

（1）命名规范及必要性
可读性——能看懂
规范性——符合规则

（2）匈牙利命名法
类型前缀（变量取名）

类型	前缀	类型	实例
数组	a	Array	aItems
布尔值	b	Boolean	bIsComplete
浮点数	f	Float	fPrice
函数	fn	Function	fnHandler
整数	i	Integer	iItemCount
对象	o	Object	oDiv1
正则表达式	re	RegExp	reEmailCheck
字符串	s	String	sUserName
变体变量	v	Variant	vAnything

首字母大写

运算符

算术：+ 加、- 减、乘、/ 除、% 取模
赋值：=、+=、-=、=、/=、%=
关系：<、>、<=、>=、==、===、!=、!==
逻辑：&& 与、|| 或、! 否
条件：var iMax = (iNum1 > iNum2) ? iNum1 : iNum2;

（1）用于字符串的 + 运算符

运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

1
2
3

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

在以上语句执行后，变量 txt3 包含的值是 “What a verynice day”。

要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：

1
2
3

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

或者把空格插入表达式中：

1
2
3

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

在以上语句执行后，变量 txt3 包含的值是：

1	"What a very nice day"

（2）对字符串和数字进行加法运算

x=5+5;
document.write(x);  //10

x="5"+"5";
document.write(x);  //55

x=5+"5";
document.write(x);  //55

x="5"+5;
document.write(x);  //55

规则是：
如果把数字与字符串相加，结果将成为字符串。

（3）运算符优先级

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、是否为特定类的实例
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
l	按位或
&&	逻辑与
ll	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

程序流程控制

判断(if、switch、?:)

if()
{
}
else
{
}

if(条件1)
{
	语句1
}
else if(条件2)
{
	语句2
}
else
{
	语句n
}

switch

switch(变量)
{
	case 值1:
		语句1
		break;
	case 值2:
		语句2
		break;
	......
	default:
		语句n
}

三目条件运算符

条件?语句1:语句2

if(条件)
{
	语句1
}
else
{
	语句2
}

循环(while、for)

while、for

while(条件)
{
	语句
}
   
   
   for循环

for(初始化;条件;自增)
{
	语句
}

跳出(break、continue)

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
break 语句可用于跳出循环。break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）

什么是真、什么是假

真：true、非零数字、非空字符串、非空对象
假：false、数字零、空字符串、空对象、undefined

Json

JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。

Json与数组区别

下标：Json下标为字符，数组下标为数字

var json={a: 12, b: 5, c: 7};
var arr=[12, 5, 7];

alert(json['a']);
alert(arr[0]);

.length

1 2	alert(json.length); 错误，json没有length alert(arr.length); 正确，而数组有length

循环

for(var i=0;i<arr.length;i++)
{
	alert('第'+i+'个东西：'+arr[i]);
}


for(var i in arr)
{
	alert('第'+i+'个东西：'+arr[i]);
}

Json和for in

for(var i in json)
{
	alert('第'+i+'个东西：'+json[i]);
}

深入JavaScript

函数返回值

什么是函数返回值

函数的执行结果
可以没有return

一个函数应该只返回一种类型的值

函数传参

可变参（不定参）：arguments

参数的个数可变，参数数组

在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。
arguments 对象检测函数的参数个数，引用属性 arguments.length 即可

取非行间样式(不能用来设置)

obj.currentStyle[attr] 仅兼容IE
getComputedStyle(obj, false)[attr] 仅兼容火狐，chrome

IE
alert(oDiv.currentStyle.width);

Chrome、FF
alert(getComputedStyle(oDiv, false).width);      //flase 处参数可以任意

兼容函数编写

style:

1	#div1 {width:200px; height:200px; background:red;}

script:

function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}                  //函数主体

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
		
	//	alert(getStyle(oDiv, 'width'));   //单一样式
	alert(getStyle(oDiv, 'backgroundColor'));      //复合样式 background 有图片，颜色等
};

数组基础

定义

var arr=[12,5,8,9];
var arr=new Array[12,5,8,9];
没有任何差别，[]的性能略高，因为代码短

数组的属性

length

既可以获取长度，又可以设置长度

应用：快速清空数组
script:

var arr=[1,2,3,4,5,6];

arr.length=3;   

alert(arr);  //运行结果为1，2，3

数组的方法

添加

push(元素)，从尾部添加

unshift(元素)，从头部添加

var arr=[1,2,3];

arr.push(4); 	1,2,3,4
//arr.ushift(4);   4,1,2,3
alert(arr);

删除

pop()，从尾部弹出
shift()，从头部弹出

var arr=[1,2,3];

arr.pop();		1,2
//arr.shift();  2,3   
alert(arr);

插入、删除(splice)

splice(开始, 长度,元素…)
先删除，后插入
splice(开始,长度)
删除
splice(开始, 0, 元素…)
插入

splice(开始，a,b1,b2..bn) a=n
替换

var arr=[1,2,3,4,5,6];

arr.splice(2, 3);   // 1,2,6

arr.splice(2, 0, 'a', 'b', 'c'); // 1,a,b,c,2,3,4,5,6

arr.splice(2, 2, 'a', 'b');   //  1,2,a,b,5,6

连接 concat(数组2)

连接两个数组

var a=[1,2,3];
var b=[4,5,6];
a.concat(b);   // 1,2,3,4,5,6
b.concat(a);   // 4,5,6,1,2,3

拼接 join(分隔符)

用分隔符，组合数组元素，生成字符串

字符串split

1 2	var arr=[1,2,3,4]; arr.join('-'); //1-2-3-4

排序 sort([比较函数])

sort([比较函数])，排序一个数组

排序一个字符串数组
排序一个数字数组

排序一个字符串数组

1
2
3

var arr=['float', 'width', 'alpha', 'zoom', 'left'];

arr.sort();   //alpha,float,left,width,zoom

排序一个数字数组

var arr=[12, 8, 99, 19, 112];

arr.sort(function (n1, n2){
	return n1-n2;
	/*if(n1<n2)
	{
		return -1;
	}
	else if(n1>n2)
	{
		return 1;
	}
	else
	{
		return 0;
	}*/

DOM基础-1

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

DOM节点-1

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

方法

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

属性

属性是节点（HTML 元素）的值，您能够获取或设置。

innerHTML

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

nodeName

nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 ##text
文档节点的 nodeName 始终是 ##document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

DOM基础-2

循环子节点

var oUl=document.getElementById('ul1');

//IE6-8
//alert(oUl.childNodes.length);
for(var i=0;i<oUl.childNodes.length;i++)
{
	//nodeType==3	->	文本节点
	//nodeType==1	->	元素节点
	//alert(oUl.childNodes[i].nodeType);
	
	if(oUl.childNodes[i].nodeType==1)
	{
		oUl.childNodes[i].style.background='red';
	}
}

兼容，不算文本节点，只算元素。

1
2
3

var oUl=document.getElementById('ul1');

alert(oUl.children.length);

parentNode

	var oUl=document.getElementById('ul1');

	alert(oUl.parentNode);
	
<body>
<ul id="ul1">
	<li></li>
	<li></li>
</ul>
</body>

offsetParent

获取定位的父级

首位子节点

firstChild、lastChild

获取首位子节点（包括文本）

firstElementChild lastElementChild

获取首位元素

var oUl=document.getElementById('ul1');

//IE6-8
//oUl.firstChild.style.background='red';

//高级浏览器
//oUl.firstElementChild.style.background='red';

if(oUl.firstElementChild)
{
	oUl.firstElementChild.style.background='red';
}
else
{
	oUl.firstChild.style.background='red';
}

元素属性操作

第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式

var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');

oBtn.onclick=function ()
{
	//oTxt.value='asdfasd';
	//oTxt['value']='xczcvb';
	
	oTxt.setAttribute('value', 'erwertwert');
};

DOM方式操作元素属性

获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)

DOM元素灵活查找

用className选择元素

如何用className选择元素
选出所有元素
通过className条件筛选
封装成函数

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;
}

DOM操作应用

创建、插入和删除元素

创建DOM元素

createElement(标签名) 创建一个节点

appendChild(节点) 追加一个节点
例子：为ul插入li

function ()
{
	var oBtn=document.getElementById('btn1');
	var oUl=document.getElementById('ul1');
	var oTxt=document.getElementById('txt1');
	
	oBtn.onclick=function ()
	{
		var oLi=document.createElement('li');
		
		oLi.innerHTML=oTxt.value;
		
		//父级.appendChild(子节点);
		oUl.appendChild(oLi);
	};
};

<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>

// 追加一个节点

插入元素

insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序插入li

function ()
{
	var oBtn=document.getElementById('btn1');
	var oUl=document.getElementById('ul1');
	var oTxt=document.getElementById('txt1');
	
	oBtn.onclick=function ()
	{
		var oLi=document.createElement('li');
		var aLi=oUl.getElementsByTagName('li');
		
		oLi.innerHTML=oTxt.value;
		
		//父级.appendChild(子节点);
		//oUl.appendChild(oLi);
		if(aLi.length>0)         //判断是不是第一个节点
		{
			oUl.insertBefore(oLi, aLi[0]);
		}
		else
		{
			oUl.appendChild(oLi);
		}
	};
};


<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>

删除DOM元素

removeChild(节点) 删除一个节点
例子：删除li

function ()
{
	var aA=document.getElementsByTagName('a');
	var oUl=document.getElementById('ul1');
	
	for(var i=0;i<aA.length;i++)
	{
		aA[i].onclick=function ()
		{
			oUl.removeChild(this.parentNode);
		};
	}
};

<ul id="ul1">
	<li>asfasd <a href="javascript:;">删除</a></li>
	<li>5645 <a href="javascript:;">删除</a></li>
	<li>ghdfjgj <a href="javascript:;">删除</a></li>
	<li>mvbnmvnb <a href="javascript:;">删除</a></li>
</ul>

文档碎片

仅在低级的浏览器上才能提高性能

function ()
{
	var oUl=document.getElementById('ul1');
	var oFrag=document.createDocumentFragment();  //创建一个文档碎片
	
	for(var i=0;i<10000;i++)
	{
		var oLi=document.createElement('li');
		
		oFrag.appendChild(oLi);
	}
	
	oUl.appendChild(oFrag);
};

<ul id="ul1">
</ul>

DOM操作应用高级

表格应用

获取

tBodies、tHead、tFoot、rows、cells

function ()
{
	var oTab=document.getElementById('tab1');
	
	//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
	alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);   
};


姓名：<input id="name" type="text" />
年龄：<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
	<thead>
    	<td>ID</td>
    	<td>姓名</td>
    	<td>年龄</td>
        <td>操作</td>
    </thead>
    <tbody>
    	<tr>
        	<td>1</td>
        	<td>Blue</td>
        	<td>27</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>2</td>
        	<td>张三</td>
        	<td>23</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>3</td>
        	<td>李四</td>
        	<td>28</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>4</td>
        	<td>王五</td>
        	<td>25</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>5</td>
        	<td>张伟</td>
        	<td>24</td>
        	<td></td>
        </tr>
    </tbody>
</table>

隔行变色

function ()
{
	var oTab=document.getElementById('tab1');
	var oldColor='';  //定义变量保存原来的颜色
	
	for(var i=0;i<oTab.tBodies[0].rows.length;i++)
	{
		oTab.tBodies[0].rows[i].onmouseover=function ()
		{
			oldColor=this.style.background;
			this.style.background='green';
		};
		oTab.tBodies[0].rows[i].onmouseout=function ()
		{
			this.style.background=oldColor;   
		};
		
		if(i%2)
		{
			oTab.tBodies[0].rows[i].style.background='';
		}
		else
		{
			oTab.tBodies[0].rows[i].style.background='#CCC';
		}
	}
};

添加、删除一行

function ()
{
	var oTab=document.getElementById('tab1');
	
	var oBtn=document.getElementById('btn1');
	var oName=document.getElementById('name');
	var oAge=document.getElementById('age');
	var id=oTab.tBodies[0].rows.length+1;
	
	oBtn.onclick=function ()
	{
		var oTr=document.createElement('tr');
		
		var oTd=document.createElement('td');
		oTd.innerHTML=id++;	//?
		oTr.appendChild(oTd);
		
		var oTd=document.createElement('td');
		oTd.innerHTML=oName.value;
		oTr.appendChild(oTd);
		
		var oTd=document.createElement('td');
		oTd.innerHTML=oAge.value;
		oTr.appendChild(oTd);
		
		var oTd=document.createElement('td');
		oTd.innerHTML='<a href="javascript:;">删除</a>';
		oTr.appendChild(oTd);
		
		oTd.getElementsByTagName('a')[0].onclick=function ()
		{
			oTab.tBodies[0].removeChild(this.parentNode.parentNode); //从tBodies里面删除
		};
		
		oTab.tBodies[0].appendChild(oTr);
	};
};

搜索

版本1：基础版本——字符串比较


function ()
{
	var oTab=document.getElementById('tab1');
	var oTxt=document.getElementById('name');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		for(var i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value)
			{
				oTab.tBodies[0].rows[i].style.background='yellow';
			}
			else
			{
				oTab.tBodies[0].rows[i].style.background='';
			}
		}
	};
};

版本2：忽略大小写——大小写转换

function ()
{
	var oTab=document.getElementById('tab1');
	var oTxt=document.getElementById('name');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		for(var i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
			var sTxt=oTxt.value;
			if(sTab.toLowerCase()==sTxt.toLowerCase())
			{
				oTab.tBodies[0].rows[i].style.background='yellow';
			}
			else
			{
				oTab.tBodies[0].rows[i].style.background='';
			}
		}
	};
};

版本3：模糊搜索——search的使用

var str='abc';
str.search(('a'));  //找到并返回，返回数组里的位置，没有找到返回-1

function ()
{
	var oTab=document.getElementById('tab1');
	var oTxt=document.getElementById('name');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		for(var i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
			var sTxt=oTxt.value.toLowerCase();
			if(sTab.search(sTxt)!=-1)   //
			{
				oTab.tBodies[0].rows[i].style.background='yellow';
			}
			else
			{
				oTab.tBodies[0].rows[i].style.background='';
			}
		}
	};
};

版本4：多关键词——split

var str='abc 123 ert';
var arr=str.aplit(' ');

function ()
{
	var oTab=document.getElementById('tab1');
	var oTxt=document.getElementById('name');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		for(var i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
			var sTxt=oTxt.value.toLowerCase();
			
			var arr=sTxt.split(' ');
			
			oTab.tBodies[0].rows[i].style.background='';
			
			for(var j=0;j<arr.length;j++)
			{
				if(sTab.search(arr[j])!=-1)
				{
					oTab.tBodies[0].rows[i].style.background='yellow';
				}
			}
		}
	};
};

高亮显示、筛选

高亮

筛选

function ()  //筛选
{
	var oTab=document.getElementById('tab1');
	var oTxt=document.getElementById('name');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		for(var i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
			var sTxt=oTxt.value.toLowerCase();
			
			var arr=sTxt.split(' ');
			
			oTab.tBodies[0].rows[i].style.display='none';    
			
			for(var j=0;j<arr.length;j++)
			{
				if(sTab.search(arr[j])!=-1)
				{
					oTab.tBodies[0].rows[i].style.display='block';
				}
			}
		}
	};
};

排序

li排序

从一个div移动另一个div

function ()
{
	var oUl1=document.getElementById('ul1');
	var oUl2=document.getElementById('ul2');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var oLi=oUl1.children[0];
		
		//oUl1.removeChild(oLi);
		oUl2.appendChild(oLi);	//1.先把元素从原有父级上删掉	2.添加到新的父级
	};
};

<ul id="ul1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<input id="btn1" type="button" value="移动" />
<ul id="ul2">
</ul>

第一个li移动到最后一个

window.onload=function ()
{
	var oUl1=document.getElementById('ul1');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var oLi=oUl1.children[0];
		
		oUl1.appendChild(oLi);
	};
};


<input id="btn1" type="button" value="移动" />
<ul id="ul1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

利用appendChild排序

window.onload=function ()
{
	var oUl1=document.getElementById('ul1');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var aLi=oUl1.getElementsByTagName('li');
		
		//aLi.sort();
		var arr=[];
		
		for(var i=0;i<aLi.length;i++)
		{
			arr[i]=aLi[i];
		}
		
		arr.sort(function (li1, li2){
			var n1=parseInt(li1.innerHTML);
			var n2=parseInt(li2.innerHTML);
			
			return n1-n2;
		});
		
		//alert(arr[0].innerHTML);
		for(var i=0;i<arr.length;i++)
		{
			alert('该把'+arr[i].innerHTML+'插入到最后');
			oUl1.appendChild(arr[i]);
		}
	};
};

表格排序

window.onload=function ()
{
	var oTab=document.getElementById('tab1');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var arr=[];
		
		for(var i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			arr[i]=oTab.tBodies[0].rows[i];
		}
		
		arr.sort(function (tr1, tr2){
			var n1=parseInt(tr1.cells[0].innerHTML);
			var n2=parseInt(tr2.cells[0].innerHTML);
			
			return n1-n2;
		});
		
		for(var i=0;i<arr.length;i++)
		{
			oTab.tBodies[0].appendChild(arr[i]);
		}
	};
};

JS运动基础

运动基础

让Div运动起来
速度——物体运动的快慢

运动中的Bug
不会停止
速度取某些值会无法停止
到达位置后再点击还会运动
重复点击速度加快

var timer=null;  

function startMove()
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);   //在开始运动时，关闭已有定时器
	timer=setInterval(function (){
		var speed=1;   // 定义一个speed变量 控制速度
		
		if(oDiv.offsetLeft>=300)  //把运动和停止隔开(if/else)
		{
			clearInterval(timer);  //满足条件 关闭定时器 停止运动
		}
		else
		{
			oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	}, 30);
}

运动框架及应用

运动框架实例

分享到侧边栏

通过目标点，计算速度值

<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.onmouseover=function ()
	{
		startMove(0);
	};
	oDiv.onmouseout=function ()
	{
		startMove(-150);
	};
};

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=0;
		
		if(oDiv.offsetLeft>iTarget)
		{
			speed=-10;
		}
		else
		{
			speed=10;
		}
		
		if(oDiv.offsetLeft==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	}, 30);
}

<div id="div1">
	<span>分享到</span>
</div>

淡入淡出的图片

用变量存储透明度

<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.onmouseover=function ()     //鼠标移入
	{
		startMove(100);
	};
	oDiv.onmouseout=function ()		//鼠标移出
	{
		startMove(30);
	};
};

var alpha=30;
var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);  //关闭定时器
	timer=setInterval(function (){
		var speed=0;
		
		if(alpha<iTarget)  //当前透明度小于目标点
		{
			speed=10;     //速度等于10
		}
		else
		{					//当前透明度大于目标点
			speed=-10;      //速度等于-10
		}
		
		//判断是否到达目标点
		if(alpha==iTarget)  //当前透明度等于目标点
		{
			clearInterval(timer); //关闭定时器
		}
		else
		{
			alpha+=speed;
			
			oDiv.style.filter='alpha(opacity:'+alpha+')';
			oDiv.style.opacity=alpha/100;  //opacity满的时候是1；
		}
	}, 30);
}

<div id="div1"></div>

alpha

中文：alpha
解释

表示像素不透明性的值。像素越不透明，则隐藏越多呈现图像的背景。零 alpha 表示完全透明的像素，而最大值的 alpha 表示完全不透明的像素。

缓冲运动

逐渐变慢，最后停止
距离越远速度越大

速度由距离决定

速度=(目标值-当前值)/缩放系数

<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
</style>

function startMove()
{
	var oDiv=document.getElementById('div1');
	setInterval(function (){
		var speed=(300-oDiv.offsetLeft)/10;
		//speed=Math.floor(speed);
		speed=speed>0?Math.ceil(speed):Math.floor(speed);   //速度为正，向上取整  速度为负，向下取整
		
		oDiv.style.left=oDiv.offsetLeft+speed+'px';
		
		document.title=oDiv.offsetLeft+','+speed;
	}, 30);
}
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div id="div2"></div>

实例：右侧悬浮框

Bug：速度取整
跟随页面滚动的缓冲侧边栏

潜在问题：目标值不是整数时

<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>

window.onscroll=function ()
{
	var oDiv=document.getElementById('div1');
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	
	//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
	startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
};

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=(iTarget-oDiv.offsetTop)/4;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(oDiv.offsetTop==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			oDiv.style.top=oDiv.offsetTop+speed+'px';
		}
	}, 30);
}

<body style="height:2000px;">
<div id="div1"></div>
</body>

附

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

//alert(Math.ceil(-9.8)); //向上取整
alert(Math.floor(4.9999)); //向下取整
alert(Math.abs(-6)); //取绝对值

对联悬浮框

Bug：速度取整
跟随页面滚动的缓冲侧边栏

潜在问题：目标值不是整数时

<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>

window.onscroll=function ()
{
	var oDiv=document.getElementById('div1');
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	//可视区的高-div的高，再除以二
	//oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
	startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
	// 目标取整 消除跳动
};

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=(iTarget-oDiv.offsetTop)/4;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(oDiv.offsetTop==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			document.title=iTarget;
			document.getElementById('txt1').value=oDiv.offsetTop;
			oDiv.style.top=oDiv.offsetTop+speed+'px';
		}
	}, 30);
}

<body style="height:2000px;">
<input type="text" id="txt1" style="position:fixed; right:0; top:0;" />
<div id="div1"></div>
</body>

匀速运动的停止条件

运动终止条件

匀速运动：距离足够近
缓冲运动：两点重合

<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=0;
		
		if(oDiv.offsetLeft<iTarget)
		{
			speed=7;
		}
		else
		{
			speed=-7;
		}
		
		if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
		{
			clearInterval(timer);
			
			oDiv.style.left=iTarget+'px';
		}
		else
		{
			oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	}, 30);
}

<input type="button" value="到100" onclick="startMove(100)" />
<input type="button" value="到300" onclick="startMove(300)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

JS运动应用

多物体运动框架

多个物体同时运动

例子：多个Div，鼠标移入变宽

单定时器，存在问题
每个Div一个定时器

<style>
div {width:100px; height:50px; background:red; margin:10px; border:10px solid black;}
</style>

window.onload=function ()
{
	var aDiv=document.getElementsByTagName('div');
	
	for(var i=0;i<aDiv.length;i++)
	{
		aDiv[i].timer=null;   //每个Div都有一个定时器
		
		aDiv[i].onmouseover=function ()
		{
			startMove(this, 400);
		};
		
		aDiv[i].onmouseout=function ()
		{
			startMove(this, 100);
		};
	}
};

//var timer=null;

function startMove(obj, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var speed=(iTarget-obj.offsetWidth)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(obj.offsetWidth==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.style.width=obj.offsetWidth+speed+'px';
		}
	}, 30);
}

<div></div>
<div></div>
<div></div>

多物体运动框架

定时器作为物体的属性
参数的传递：物体、目标值

例子：多个Div淡入淡出

所有东西都不能公用
属性与运动对象绑定：速度、其他属性值（如透明度等）

<style>
div {width:200px; height:200px; margin:20px; float:left; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>

window.onload=function ()
{
	var aDiv=document.getElementsByTagName('div');
	
	for(var i=0;i<aDiv.length;i++)
	{
		aDiv[i].alpha=30;
		
		aDiv[i].onmouseover=function ()
		{
			startMove(this, 100);
		};
		aDiv[i].onmouseout=function ()
		{
			startMove(this, 30);
		};
	}
};

//var alpha=30;

function startMove(obj, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var speed=(iTarget-obj.alpha)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(obj.alpha==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.alpha+=speed;
			
			obj.style.filter='alpha(opacity:'+obj.alpha+')';
			obj.style.opacity=obj.alpha/100;
		}
	}, 30);
}

<div></div>
<div></div>
<div></div>
<div></div>

例子：变宽变高

<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow;}
</style>


window.onload=function ()
{
	var oDiv1=document.getElementById('div1');
	
	oDiv1.onmouseover=function ()
	{
		startMove(this, 400);
	};
	oDiv1.onmouseout=function ()
	{
		startMove(this, 200);
	};
	
	var oDiv2=document.getElementById('div2');
	
	oDiv2.onmouseover=function ()
	{
		startMove2(this, 400);
	};
	oDiv2.onmouseout=function ()
	{
		startMove2(this, 200);
	};
};

function startMove(obj, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var speed=(iTarget-obj.offsetHeight)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(obj.offsetHeight==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.style.height=obj.offsetHeight+speed+'px';
		}
	}, 30);
}

function startMove2(obj, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var speed=(iTarget-obj.offsetWidth)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(obj.offsetWidth==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.style.width=obj.offsetWidth+speed+'px';
		}
	}, 30);
}

<div id="div1">变高</div>
<div id="div2">变宽</div>

任意值运动框架

offset属性的Bug

有边框的Div变宽
用currentStyle代替offset

offsetWidth(盒模型尺寸)=width+2dorder+2padding
styl只能去行间样式

getStyle

function getStyle(obj, name)  //获取不在行间的样式  
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}

<style>
#div1 {width:200px; height:200px; background:red; border:1px solid black;}
</style>
<script>
setInterval(function (){
	var oDiv=document.getElementById('div1');
	
	oDiv.style.width=oDiv.offsetWidth-1+'px';
}, 30);  // =202-1=201  =201+1+1+1
</script>
</head>

<body>
<div id="div1"></div>
</body>

解决方案用getStyle替换offset

<style>
#div1 {width:200px; height:200px; background:red; border:1px solid black;}
</style>


<script>
function getStyle(obj, name)  //获取不在行间的样式  
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}

setInterval(function (){
	var oDiv=document.getElementById('div1');
	
	oDiv.style.width=parseInt(getStyle(oDiv, 'width'))-1+'px';
}, 30);
</script>


<div id="div1"></div>

去掉offset

<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; font-size:14px;}
</style>

<script>
window.onload=function ()
{
	var oDiv1=document.getElementById('div1');
	
	oDiv1.onmouseover=function ()
	{
		startMove(this, 'height', 400);
	};
	oDiv1.onmouseout=function ()
	{
		startMove(this, 'height', 200);
	};
	
	var oDiv2=document.getElementById('div2');
	
	oDiv2.onmouseover=function ()
	{
		startMove(this, 'width', 400);
	};
	oDiv2.onmouseout=function ()
	{
		startMove(this, 'width', 200);
	};
	
	var oDiv3=document.getElementById('div3');
	
	oDiv3.onmouseover=function ()
	{
		startMove(this, 'fontSize', 50);
	};
	oDiv3.onmouseout=function ()
	{
		startMove(this, 'fontSize', 14);
	};
	
	var oDiv4=document.getElementById('div4');
	
	oDiv4.onmouseover=function ()
	{
		startMove(this, 'borderWidth', 100);
	};
	oDiv4.onmouseout=function ()
	{
		startMove(this, 'borderWidth', 10);
	};
};

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

function startMove(obj, attr, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var cur=parseInt(getStyle(obj, attr));
		
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(cur==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.style[attr]=cur+speed+'px';
		}
	}, 30);
}
</script>



<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">字符变大</div>
<div id="div4"></div>

原有运动框架的问题

只能让某个值运动起来
如果想让其他值运动起来，要修改程序

<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; filter:alpha(opacity:30); opacity:0.3;}
</style>


<script>
window.onload=function ()
{
	var oDiv1=document.getElementById('div1');
	
	oDiv1.onmouseover=function ()
	{
		startMove(this, 'opacity', 100);
	};
	oDiv1.onmouseout=function ()
	{
		startMove(this, 'opacity', 30);
	};
};

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

function startMove(obj, attr, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var cur=parseInt(getStyle(obj, attr));
		
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(cur==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.style[attr]=cur+speed+'px';
		}
	}, 30);
}
</script>



<div id="div1"></div>

扩展的运动框架

运动属性作为参数
封装opacity
小数的问题 Math.round() 四舍五入


move.js

<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; filter:alpha(opacity:30); opacity:0.3;}
</style>


<script>
window.onload=function ()
{
	var oDiv1=document.getElementById('div1');
	
	oDiv1.onmouseover=function ()
	{
		startMove(this, 'opacity', 100);
	};
	oDiv1.onmouseout=function ()
	{
		startMove(this, 'opacity', 30);
	};
};

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

function startMove(obj, attr, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var cur=0;
		
		if(attr=='opacity')
		{
			cur=Math.round(parseFloat(getStyle(obj, attr))*100);
		}
		else
		{
			cur=parseInt(getStyle(obj, attr));
		}
		
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(cur==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(cur+speed)+')';  //IE
				obj.style.opacity=(cur+speed)/100;
				// 火狐
				document.getElementById('txt1').value=obj.style.opacity;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
	}, 30);
}
</script>



<div id="div1"></div>
<input type="text" id="txt1" />

JS运动中级

链式运动框架

回调函数

运动停止时，执行函数

运动停止时，开始下一次运动

#div1 {width:100px; height:100px; background:red;}
</style>
<script src="move.js"></script>
<script>
window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	var oDiv=document.getElementById('div1');
	
	oBtn.onclick=function ()
	{ 
		startMove(oDiv, 'width', 300);  //先变宽
		startMove(oDiv, 'height', 300);	//再变长
	};
};
</script>



<iinput id="btn1" type="button" value="运动" />
<div id="div1"></div>

完美运动框架

多个值同时变化

setStyle同时设置多个属性

-参数传递

Json的使用，实现多个属性运动
for in遍历属性
-运用到运动框架
检测运动停止
标志变量

move2.js

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


//startMove(oDiv, {width: 400, height: 400})


function startMove(obj, json, fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var bStop=true;		//假设：所有值都已经到了
		
		for(var attr in json)
		{
			var cur=0;
			
			if(attr=='opacity')
			{
				cur=Math.round(parseFloat(getStyle(obj, attr))*100);
			}
			else
			{
				cur=parseInt(getStyle(obj, attr));
			}
			
			var speed=(json[attr]-cur)/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			
			if(cur!=json[attr])
				bStop=false;
			
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
		
		if(bStop)    //运动完成，关闭定时器
		{
			clearInterval(obj.timer);
						
			if(fnEnd)fnEnd(); //在运动结束被调用
		}
	}, 30);
}

调用框架

<style>
#div1 {width:100px; height:100px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>


<script src="move2.js"></script>
<script>
window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	var oDiv=document.getElementById('div1');
	
	oBtn.onclick=function ()
	{
		startMove(oDiv, {width: 101, height: 300, opacity: 100}, function (){
			alert('a');
		});
	};
};
</script>
</head>


<body>
<iinput id="btn1" type="button" value="运动" />
<div id="div1"></div>
</body>

运动框架总结

运动框架演变过程

startMove(iTarget) 运动框架
startMove(obj, iTarget) 多物体
startMove(obj, attr, iTarget) 任意值
startMove(obj, attr, iTarget, fn) 链式运动
startMove(obj, json) 多值运动
startMove(obj, json, fn) 完美运动框架

运动框架应用

例子：幻灯片


window.onload=function ()
{
	var oDiv=document.getElementById('play');
	var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	
	var now=0;   //设置第一种的top值
	
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;    //定义一个index来记录是第几张图
		aBtn[i].onclick=function ()
		{
			now=this.index;         //now保存当前图片Id
				
			tab();					//调用tab函数
		};
	}
	
	function tab()      //改变top值，实现幻灯片效果
	{
		for(var i=0;i<aBtn.length;i++)
		{
			aBtn[i].className='';   
		}
		aBtn[now].className='active';  //使当前的button置亮
		startMove(oUl, {top: -150*now});  //调用move.js框架
	}
	
	function next()			//调用next函数进行自动切换
	{
		now++; 			
		if(now==aBtn.length)
		{
			now=0;
		}
		
		tab();
	}
	
	var timer=setInterval(next, 2000);  //每两秒调用next函数实现自动切换
	
	oDiv.onmouseover=function ()
	{
		clearInterval(timer);
	};
	
	oDiv.onmouseout=function ()
	{
		timer=setInterval(next, 2000);
	};
};
</script>




<div class="play" id="play">
    <ol>
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
	<ul>
		<li><a href="#"><img src="images/1.jpg" alt="广告一" /></a></li>
		<li><a href="#"><img src="images/2.jpg" alt="广告二" /></a></li>
		<li><a href="#"><img src="images/3.jpg" alt="广告三" /></a></li>
		<li><a href="#"><img src="images/4.jpg" alt="广告四" /></a></li>
		<li><a href="#"><img src="images/5.jpg" alt="广告五" /></a></li>
	</ul>
</div>

例子：微博信息发布效果

<style>
* {margin:0; padding:0;}
#ul1 {width:400px; height:400px; border:1px solid black; margin:10px auto; overflow:hidden;}
#ul1 li {border-bottom:1px #999 dashed; padding:4px; list-style:none; overflow:hidden; filter:alpha(opacity:0); opacity:0;}
</style>



<script src="move2.js"></script>
<script>
window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	var oUl=document.getElementById('ul1');
	var oTxt=document.getElementById('txt1');
	
	oBtn.onclick=function ()
	{
		var oLi=document.createElement('li');  //创建元素
		
		oLi.innerHTML=oTxt.value;   //显示文本
		oTxt.value='';
		
		if(oUl.children.length>0)  //倒序插入
		{
			oUl.insertBefore(oLi, oUl.children[0]);
		}
		else
		{
			oUl.appendChild(oLi);
		}
		
		//运动
		var iHeight=oLi.offsetHeight;  //取高度
		
		oLi.style.height='0';
		
		startMove(oLi, {height: iHeight}, function (){
			startMove(oLi, {opacity: 100});
		});
		//alert(iHeight);
	};
};
</script>



<textarea id="txt1" rows="4" cols="40"></textarea>
<input id="btn1" type="button" value="发布" />
<ul id="ul1">
</ul>

JS事件基础

event对象和事件冒泡

event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

点击

直接用document.onclick
document.body 可能撑不开

window.onload=function ()
{
	document.onclick=function ()
	{
		alert('a');
	};
};

document

<!DOCTYPE HTML>也是一个节点
<!DOCTYPE HTML>和HTML都是document的子节点

window.onload=function ()
{
	alert(document.childNodes[1].tagName);
};

获取event对象(兼容性写法)

var oEvent=ev||event;

点击坐标

clientX–获取x坐标值
clientY–获取y坐标值
event 只能在IE下用
火狐下用ev

window.onload=function ()
{
	document.onclick=function (ev)
	{
		//IE
		//alert(event.clientX+','+event.clientY);
		
		//FF
		//alert(ev.clientX+','+ev.clientY);
		
		var oEvent=ev||event;  //处理兼容性
		
		alert(oEvent.clientX+','+oEvent.clientY);
	};
};

事件流

事件冒泡

事件会随着层级传给父级

取消冒泡

oEvent.cancelBubble=true

#div1 {width:400px; height:300px; background:#CCC; display:none;}

window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	var oDiv=document.getElementById('div1');
	
	oBtn.onclick=function (ev)
	{
		var oEvent=ev||event;
		
		oDiv.style.display='block';
		//alert('按钮被点击了');
		
		oEvent.cancelBubble=true;
	};
	
	document.onclick=function ()
	{
		oDiv.style.display='none';
		//alert('document被点击了');
	};
};

<input1 id="btn1" type="button" value="显示" />

鼠标事件

鼠标位置

用到client一定要用的scroll

可视区位置：clientX、clientY

例子1：跟随鼠标的Div

#div1 {width:200px; height:200px; background:red; position:absolute;}

document.onmousemove=function (ev)
{
	var oEvent=ev||event;
	var oDiv=document.getElementById('div1');
	
	oDiv.style.left=oEvent.clientX+'px';
	oDiv.style.top=oEvent.clientY+'px';
};

<div id="div1"></div>

消除滚动条的影响

#div1 {width:200px; height:200px; background:red; position:absolute;}

document.onmousemove=function (ev)
{
	var oEvent=ev||event;
	var oDiv=document.getElementById('div1');
	
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	
	oDiv.style.left=oEvent.clientX+'px';
	oDiv.style.top=oEvent.clientY+scrollTop+'px';
};

<body style="height:2000px;">
<div id="div1"></div>

获取鼠标在页面的绝对位置

封装函数

#div1 {width:200px; height:200px; background:red; position:absolute;}

//封装函数
function getPos(ev)
{
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
	
	return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}


document.onmousemove=function (ev)
{
	var oEvent=ev||event;
	var oDiv=document.getElementById('div1');
	var pos=getPos(oEvent);
	
	oDiv.style.left=pos.x+'px';
	oDiv.style.top=pos.y+'px';
};

<body style="height:2000px;">
<div id="div1"></div>

例子2：一串跟随鼠标的Div

div {width:10px; height:10px; background:red; position:absolute;}


function getPos(ev)
{
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
	
	return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
	var aDiv=document.getElementsByTagName('div');
	var oEvent=ev||event;
	
	var pos=getPos(oEvent);
	
	for(var i=aDiv.length-1;i>0;i--)
	{
		aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
		aDiv[i].style.top=aDiv[i-1].offsetTop+'px';   //后一个等于前一个的位置
	}
	
	aDiv[0].style.left=pos.x+'px';
	aDiv[0].style.top=pos.y+'px';
};

<div></div>
<div></div>
<div></div>

键盘事件

keyCode

获取用户按下键盘的哪个按键
onkeydown–按下
onkeyup–抬起

document.onkeydown=function (ev)
{
	var oEvent=ev||event;
	
	alert(oEvent.keyCode);
};

例子：键盘控制Div移动

#div1 {width:100px; height:100px; background:#CCC; position:absolute;}

document.onkeydown=function (ev)
{
	var oEvent=ev||event;
	var oDiv=document.getElementById('div1');
	
	if(oEvent.keyCode==37)
	{
		oDiv.style.left=oDiv.offsetLeft-10+'px';
	}
	else if(oEvent.keyCode==39)
	{
		
		oDiv.style.left=oDiv.offsetLeft+10+'px';
	}
};

<div id="div1"></div>

其他属性

ctrlKey、shiftKey、altKey

例子：提交留言

回车提交

ctrl+回车提交

window.onload=function ()
{
	var oTxt1=document.getElementById('txt1');
	var oTxt2=document.getElementById('txt2');
	
	oTxt1.onkeydown=function (ev)
	{
		var oEvent=ev||event;
		
		if(oEvent.keyCode==13 && oEvent.ctrlKey)
		{
			oTxt2.value+=oTxt1.value+'\n';
			oTxt1.value='';
		}
	};
};

<1input id="txt1" type="text" /><br>
<1textarea id="txt2" rows="10" cols="40"></textarea>

JS事件中级

默认行为

浏览器自带的行为就是默认行为

阻止默认行为

普通写法：return flase;

例子1.屏蔽右键菜单

document.oncontextmenu=function ()
{
	return false;	//阻止默认事件
};

自定义右键菜单

* {margin:0; padding:0; list-style:none;}
#div1 {position:absolute; width:80px; background:#CCC; border:1px solid black; display:none;}

document.oncontextmenu=function (ev)
{
	var oEvent=ev||event;
	var oDiv=document.getElementById('div1');
	
	oDiv.style.display='block';
	oDiv.style.left=oEvent.clientX+'px';
	oDiv.style.top=oEvent.clientY+'px';
	
	return false;
};

document.onclick=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.style.display='none';
};

<div id="div1">
	<ul>
    	<li>aaa</li>
    	<li>bbb</li>
    	<li>ccc</li>
    	<li>ddd</li>
    </ul>
</div>

例子2.只能输入数字的输入框

window.onload=function ()
{
	var oTxt=document.getElementById('txt1');
	
	oTxt.onkeydown=function (ev)
	{
		var oEvent=ev||event;
		
		//alert(oEvent.keyCode);
		
		//0-	48
		//9-	57
		
		//如果 用户按的 不是退格 并且 也不是数字
		
		if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
		{
			return false;
		}
	};
};

<1input type="text" id="txt1" />

附 KeyCode对照表

javascript

拖拽

简易拖拽

拖拽原理:鼠标与Div的距离不变，鼠标事件（onmousemove、onmousedown、onmouseup）

#div1 {width:200px; height:200px; background:red; position:absolute;}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	var disX=0;
	var disY=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			
			oDiv.style.left=oEvent.clientX-disX+'px';
			oDiv.style.top=oEvent.clientY-disY+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;   //鼠标抬起时，div不能再移动
			document.onmouseup=null;   	
		};
	};
};

<div id="div1"></div>

靠谱拖拽

原有拖拽的问题

直接给document加事件

document.onmousemove=function (ev)
{
	var oEvent=ev||event;
	
	oDiv.style.left=oEvent.clientX-disX+'px';
	oDiv.style.top=oEvent.clientY-disY+'px';
};

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

FF下，空Div拖拽Bug

阻止默认事件

oDiv.onmousedown=function (ev)
{
	var oEvent=ev||event;
	
	disX=oEvent.clientX-oDiv.offsetLeft;
	disY=oEvent.clientY-oDiv.offsetTop;
	
	document.onmousemove=function (ev)
	{
		var oEvent=ev||event;
		
		oDiv.style.left=oEvent.clientX-disX+'px';
		oDiv.style.top=oEvent.clientY-disY+'px';
	};
	
	document.onmouseup=function ()
	{
		document.onmousemove=null;
		document.onmouseup=null;
	};
	
	return false;  //阻止默认事件
};  //拖拽从onmousedown开始

防止拖出页面

修正位置

#div1 {width:200px; height:200px; background:red; position:absolute;}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	var disX=0;
	var disY=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			if(l<0)  //小于0时直接等于0
			{
				l=0;
			}
			else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
			{
				l=document.documentElement.clientWidth-oDiv.offsetWidth;
			}
			
			if(t<0)   同理
			{
				t=0;
			}
			else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
			{
				t=document.documentElement.clientHeight-oDiv.offsetHeight;
			}
			
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
		
		return false;
	};
};

<div id="div1"></div>

JS事件高级应用

事件绑定

IE方式

attachEvent(事件名称, 函数)，绑定事件处理函数事件名带on

detachEvent(事件名称, 函数)，解除绑定

//attachEvent(事件名， 函数)
//IE
/*
oBtn.attachEvent('onclick', function ()
{
	alert('a');
});
oBtn.attachEvent('onclick', function ()
{
	alert('b');
});

DOM 方式

addEventListener(事件名, 函数, false) 事件名不带on
removeEventListener(事件名称, 函数, 捕获)

火狐方式

//FF
//addEventListener(事件名, 函数, false)
oBtn.addEventListener('click', function ()
{
	alert('a');
}, false);
oBtn.addEventListener('click', function ()
{
	alert('b');
}, false);

兼容火狐、IE

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)
	{
		obj.attachEvent('on'+ev, fn);
	}
	else
	{
		obj.addEventListener(ev, fn, false);
	}
}

window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	
	myAddEvent(oBtn, 'click', function (){
		alert('a');
	});
	
	myAddEvent(oBtn, 'click', function (){
		alert('b');
	});
};

高级拖拽-1

限制范围

对位置进行判断

例子：不能拖出指定对象的Div

document.onmousemove=function (ev)
{
	var oEvent=ev||event;
	var l=oEvent.clientX-disX;
	var t=oEvent.clientY-disY;
	
	if(l<0)
	{
		l=0;
	}
	else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)  //限制范围时用到div的宽度
	{
		l=oDiv2.offsetWidth-oDiv.offsetWidth;
	}
	
	if(t<0)
	{
		t=0;
	}
	else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
	{
		t=oDiv2.offsetHeight-oDiv.offsetHeight;
	}
	
	oDiv.style.left=l+'px';
	oDiv.style.top=t+'px';
};

####　磁性吸附

修改legth的大小判断条件

document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			if(l<50)  //修改legth的大小判断条件
			{
				l=0;
			}
			else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)
			{
				l=oDiv2.offsetWidth-oDiv.offsetWidth;
			}
			
			if(t<50)
			{
				t=0;
			}
			else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
			{
				t=oDiv2.offsetHeight-oDiv.offsetHeight;
			}
			
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		};

高级拖拽-2

图片拖拽

阻止默认事件
文字选中
阻止默认事件
IE下拖动有问题

事件捕获

setCapture() 开启捕获
releaseCapture() 释放捕获

#div1 {width:100px; height:100px; background:red; position:absolute;}


window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	var disX=0;
	var disY=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;
		
		if(oDiv.setCapture)
		{
			//IE
			oDiv.onmousemove=mouseMove;
			oDiv.onmouseup=mouseUp;
			
			oDiv.setCapture();
		}
		else
		{
			//Chrome、FF
			document.onmousemove=mouseMove;
			document.onmouseup=mouseUp;
		}
		
		function mouseMove(ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		}
		
		function mouseUp()
		{
			this.onmousemove=null;
			this.onmouseup=null;
			
			if(oDiv.releaseCapture)
			{
				oDiv.releaseCapture();
			}
		}
		
		return false;	//chrome、ff、IE9
	};
};

asdfasdfsdf<br>
dfasfasdfasd
<div id="div1">asdfasdfsdf<br>
dfasfasdfasd</div>
asdfasdfsdf<br>
dfasfasdfasd

与DOM配合

带框的拖拽
保留原有位置的拖拽

#div1 {width:100px; height:100px; background:yellow; position:absolute;}
.box {border:1px dashed black; position:absolute;}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	var disX=0;
	var disY=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;
		
		var oBox=document.createElement('div');
		
		oBox.className='box';
		oBox.style.width=oDiv.offsetWidth-2+'px';
		oBox.style.height=oDiv.offsetHeight-2+'px';
		
		oBox.style.left=oDiv.offsetLeft+'px';
		oBox.style.top=oDiv.offsetTop+'px';
		
		document.body.appendChild(oBox);
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			oBox.style.left=l+'px';
			oBox.style.top=t+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
			
			oDiv.style.left=oBox.offsetLeft+'px';
			oDiv.style.top=oBox.offsetTop+'px';
			
			document.body.removeChild(oBox);
		};
		
		return false;	//chrome、ff、IE9
	};
};

<div id="div1"></div>

自定义滚动条

拖拽

只有横向拖拽
限制范围——范围的大小

计算比例——当前值/最大值

#parent {width:600px; height:20px; background:#CCC; position:relative; margin:10px auto;}
#div1 {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oParent=document.getElementById('parent');
	
	var disX=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
				
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			
			if(l<0)
			{
				l=0;
			}
			else if(l>oParent.offsetWidth-oDiv.offsetWidth)
			{
				l=oParent.offsetWidth-oDiv.offsetWidth;
			}
			
			oDiv.style.left=l+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
		
		return false;	//chrome、ff、IE9
	};
};

<div id="parent">
	<div id="div1"></div>
</div>

控制其他对象

例子1：控制物体的大小

#parent {width:600px; height:20px; background:#CCC; position:relative; margin:10px auto;}
#div1 {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}
#div2 {width:0px; height:0px; background:green;}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	var oParent=document.getElementById('parent');
	
	var disX=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
				
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			
			if(l<0)
			{
				l=0;
			}
			else if(l>oParent.offsetWidth-oDiv.offsetWidth)
			{
				l=oParent.offsetWidth-oDiv.offsetWidth;
			}
			
			oDiv.style.left=l+'px';
			
			var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
			document.title=scale;
			
			oDiv2.style.width=400*scale+'px';
			oDiv2.style.height=400*scale+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
		
		return false;	//chrome、ff、IE9
	};
};

<div id="parent">
	<div id="div1"></div>
</div>
<div id="div2"></div>

例子2：控制物体的透明度

#parent {width:600px; height:20px; background:#CCC; position:relative; margin:10px auto;}
#div1 {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}
#div2 {width:300px; height:300px; background:green; filter:alpha(opacity:0); opacity:0;}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	var oParent=document.getElementById('parent');
	
	var disX=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
				
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			
			if(l<0)
			{
				l=0;
			}
			else if(l>oParent.offsetWidth-oDiv.offsetWidth)
			{
				l=oParent.offsetWidth-oDiv.offsetWidth;
			}
			
			oDiv.style.left=l+'px';
			
			var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
			document.title=scale;
			
			oDiv2.style.filter='alpha(opacity:'+scale*100+')';
			oDiv2.style.opacity=scale;
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
		
		return false;	//chrome、ff、IE9
	};
};

<div id="parent">
	<div id="div1"></div>
</div>
<div id="div2"></div>

例子3：控制文字滚动

#parent {width:600px; height:20px; background:#CCC; position:relative; margin:10px auto;}
#div1 {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}
#div2 {width:400px; height:300px; border:1px solid black; overflow:hidden; position:relative;}
#div3 {position:absolute; left:0; top:0; padding:4px;}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	var oDiv3=document.getElementById('div3');
	var oParent=document.getElementById('parent');
	
	var disX=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
				
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			
			if(l<0)
			{
				l=0;
			}
			else if(l>oParent.offsetWidth-oDiv.offsetWidth)
			{
				l=oParent.offsetWidth-oDiv.offsetWidth;
			}
			
			oDiv.style.left=l+'px';
			
			var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
			document.title=scale;
			
			oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
		
		return false;	//chrome、ff、IE9
	};
};

<div id="parent">
	<div id="div1"></div>
</div>
<div id="div2">
	<div id="div3">    
</div>

Ajax基础

什么是 Ajax

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax.js

function ajax(url, fnSucc, fnFaild)
{
	//1.创建Ajax对象
	if(window.XMLHttpRequest)
	{
		var oAjax=new XMLHttpRequest();
	}
	else
	{
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//2.连接服务器（打开和服务器的连接）
	oAjax.open('GET', url, true);
	
	
	//3.发送
	oAjax.send();
	
	//4.接收
	oAjax.onreadystatechange=function ()
	{
		if(oAjax.readyState==4)
		{
			if(oAjax.status==200)
			{
				//alert('成功了：'+oAjax.responseText);
				fnSucc(oAjax.responseText);
			}
			else
			{
				//alert('失败了');
				if(fnFaild)
				{
					fnFaild();
				}
			}
		}
	};
}

使用Ajax

基础：请求并显示静态TXT文件

字符集编码（统一编码）

缓存、阻止缓存

<script src="ajax.js"></script>  //引用ajax.js

window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		ajax('aaa.txt', function (str){
			alert(str);
		}, function (){
			alert('失败');
		});
	};
};

<1input id="btn1" type="button" value="读取" />

阻止缓存

ajax(‘aaa.txt?t=’+new Date().getTime(), function (str)

window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		ajax('aaa.txt?t='+new Date().getTime(), function (str){
			alert(str);
		}, function (){
			alert('失败');
		});
	};
};

动态数据：请求JS（或Json）文件

eval的使用

DOM创建元素

<script src="ajax.js"></script>

window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	var oUl=document.getElementById('ul1');
	
	oBtn.onclick=function ()
	{
		ajax('data.txt?t='+new Date().getTime(), function (str){
			var arr=eval(str);
			
			for(var i=0;i<arr.length;i++)
			{
				var oLi=document.createElement('li');
				
				oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
				
				oUl.appendChild(oLi);
			}
		}, function (){
			alert('失败');
		});
	};
};

<1input id="btn1" type="button" value="读取" />
<ul id="ul1">
</ul>

Ajax原理

HTTP请求方法

GET方法是默认的HTTP请求方法，我们日常用GET方法来提交表单数据，然而用GET方法提交的表单数据只经过了简单的编码，同时它将作为URL的一部分向Web服务器发送，因此，如果使用GET方法来提交表单数据就存在着安全隐患上
POST方法是GET方法的一个替代方法，它主要是向Web服务器提交表单数据，尤其是大批量的数据。POST方法克服了GET方法的一些缺点。通过POST方法提交表单数据时，数据不是作为URL请求的一部分而是作为标准数据传送给Web服务器，这就克服了GET方法中的信息无法保密和数据量太小的缺点。

Ajax中级

编写Ajax-1

创建Ajax对象

ActiveXObject(“Microsoft.XMLHTTP”) //IE6
XMLHttpRequest()
全局变量是window的属性
用没定义的变量–报错
用没有定义的属性–undefined

//1.创建Ajax对象 用属性的形式来判断
if(window.XMLHttpRequest)
{
	var oAjax=new XMLHttpRequest();
}
else
{
	var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}

连接服务器

open(方法, 文件名, 异步传输)

1
2
3

//2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', 'a.txt', true);

同步和异步

同步传输（一步一步）是一种以数据块为传输单位的数据传输方式，该方式下数据块与数据块之间的时间间隔是固定的，必须严格地规定它们的时间关系。每个数据块的头部和尾部都要附加一个特殊的字符或比特序列，标记一个数据块的开始和结束，一般还要附加一个校验序列，以便对数据块进行差错控制。
异步传输（一起）将比特分成小组进行传送，小组可以是8位的1个字符或更长。发送方可以在任何时刻发送这些比特组，而接收方从不知道它们会在什么时候到达。
Ajax就是用异步传输

发送请求

send()
1
oAjax.send();

接收返回值

//4.接收返回
oAjax.onreadystatechange=function ()
{
	//oAjax.readyState	//浏览器和服务器，进行到哪一步了
	if(oAjax.readyState==4)	//读取完成
	{
		if(oAjax.status==200)	//成功
		{
			alert('成功：'+oAjax.responseText);
		}
		else
		{
			alert('失败:'+oAjax.status);
		}
	}
};

Ajax

function ajax(url, fnSucc, fnFaild)
{
	//1.创建Ajax对象
	if(window.XMLHttpRequest)
	{
		var oAjax=new XMLHttpRequest();
	}
	else
	{
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//2.连接服务器
	//open(方法, 文件名, 异步传输)
	oAjax.open('GET', url, true);
	
	//3.发送请求
	oAjax.send();
	
	//4.接收返回
	oAjax.onreadystatechange=function ()
	{
		//oAjax.readyState	//浏览器和服务器，进行到哪一步了
		if(oAjax.readyState==4)	//读取完成
		{
			if(oAjax.status==200)	//成功
			{
				fnSucc(oAjax.responseText);
			}
			else
			{
				if(fnFaild)
				{
					fnFaild(oAjax.status);
				}
				//alert('失败:'+oAjax.status);
			}
		}
	};
}

编写Ajax - 2

请求状态监控

onreadystatechange事件

onreadystatechange 存储函数（或函数名
每当 readyState 属性改变时，就会调用该函数。

readyState属性：请求状态

readyState属性值	请求状态
0 （未初始化）	还没有调用open()方法
1 （载入）	已调用send()方法，正在发送请求
2 （载入完成）	send()方法完成，已收到全部响应内容
3 （解析）	正在解析响应内容
4 （完成）	响应内容解析完成，可以在客户端调用了

status属性：请求结果

1xx（临时响应）

表示临时响应并需要请求者继续执行操作的状态代码。

代码	说明
100 （继续）	请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
101 （切换协议）	请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx （成功）

表示成功处理了请求的状态代码。

代码	说明
200 （成功）	服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201 （已创建）	请求成功并且服务器创建了新的资源。
202 （已接受）	服务器已接受请求，但尚未处理。
203 （非授权信息）	服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容）	服务器成功处理了请求，但没有返回任何内容。
205 （重置内容）	服务器成功处理了请求，但没有返回任何内容。
206 （部分内容）	服务器成功处理了部分 GET 请求。

3xx （重定向）

表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。

代码	说明
300 （多种选择）	针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动）	请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动）	服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置）	请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改）	自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305 （使用代理）	请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向）	服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4xx（请求错误）

这些状态代码表示请求可能出错，妨碍了服务器的处理。

代码	说明
400 （错误请求）	服务器不理解请求的语法。
401 （未授权）	请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403 （禁止）	服务器拒绝请求。
404 （未找到）	服务器找不到请求的网页。
405 （方法禁用）	禁用请求中指定的方法。
406 （不接受）	无法使用请求的内容特性响应请求的网页。
407 （需要代理授权）	此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时）	服务器等候请求时发生超时。
409 （冲突）	服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410 （已删除）	如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度）	服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件）	服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大）	服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长）	请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型）	请求的格式不受请求页面的支持。
416 （请求范围不符合要求）	如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值）	服务器未满足”期望”请求标头字段的要求。

5xx（服务器错误）

这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

代码	说明
500 （服务器内部错误）	服务器遇到错误，无法完成请求。
501 （尚未实施）	服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关）	服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）	服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504 （网关超时）	服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持）	服务器不支持请求中所用的 HTTP 协议版本。

服务器响应

responseText 属性：如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseXML 属性：如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用responseXML属性

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

JS面向对象基础

什么是对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。

什么是面向对象

使用对象时，只关注对象提供的功能，不关注其内部细节
比如JQuery

JS中的面向对象

面向对象编程(OOP)的特点

抽象：抓住核心问题
封装：不考虑内部实现，只考虑功能使用
继承：从已有对象上，继承出新的对象
多重继承
多态

对象的组成

方法——函数：过程、动态的
属性——变量：状态、静态的

方法——函数：过程、动态的

function aaa()			//函数：自由
{
	alert('abc');
}

var arr=[1,2,3,4];

arr.aaa=function ()		//方法：属于一个对象
{
	alert('abc');
};

aaa();
arr.aaa();

属性——变量：状态、静态的

var a=12;		//变量：自由的，不属于任何人

alert(a);

var arr=[1,2,3,4,5,6];

arr.a=12;		//属性：属于一个对象的

alert(arr.a);

第一个面向对象程序

为对象添加方法和属性

this详解，事件处理中this的本质

当前发生事件的对象
当前的方法所属的对象

不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性

object对象

function createPerson(name, qq)		//构造函数
{
	var obj=new Object();
	
	obj.name=name;
	obj.qq=qq;
	
	obj.showName=function ()
	{
		alert('我的名字叫：'+this.name);
	};
	obj.showQQ=function ()
	{
		alert('我的QQ号：'+this.qq);
	};
	
	return obj;
}

var obj=createPerson('blue', '258248832');

obj.showName();
obj.showQQ();

var obj2=createPerson('张三', '45648979879');

obj2.showName();
obj2.showQQ();

工厂方式

什么是工厂

原料
加工
出厂

工厂方式

用构造函数创建一个类
什么是类、对象（实例）：模具和零件

function createPerson(name, qq)		//构造函数
{
	//原料
	var obj=new Object();
	
	//加工
	obj.name=name;
	obj.qq=qq;
	
	obj.showName=function ()
	{
		alert('我的名字叫：'+this.name);
	};
	obj.showQQ=function ()
	{
		alert('我的QQ号：'+this.qq);
	};
	
	//出厂
	return obj;
}

var obj=createPerson('blue', '258248832');
var obj2=createPerson('张三', '45648979879');

alert(obj.showName==obj2.showName);

工厂方式的问题

问题

没有new

函数重复定义

function createPerson(name, qq)		//构造函数
{
	//原料
	var obj=new Object();
	
	//加工
	obj.name=name;
	obj.qq=qq;
	
	obj.showName=function ()
	{
		alert('我的名字叫：'+this.name);
	};
	obj.showQQ=function ()
	{
		alert('我的QQ号：'+this.qq);
	};
	
	//出厂
	return obj;
}

var obj=createPerson('blue', '258248832');
var obj2=createPerson('张三', '45648979879');

alert(obj.showName==obj2.showName);

加上new

偷偷做了两件事
替你创建了一个空白对象
替你返回了这个对象

function createPerson(name, qq)		//构造函数
{
	//系统偷偷替咱们做：
	//var this=new Object();
	
	//加工
	this.name=name;
	this.qq=qq;
	
	this.showName=function ()
	{
		alert('我的名字叫：'+this.name);
	};
	this.showQQ=function ()
	{
		alert('我的QQ号：'+this.qq);
	};
	
	//也会偷偷做一些：
	//return this;
}

var obj=new createPerson('blue', '258248832');
var obj2=new createPerson('张三', '45648979879');   //new

obj.showName();
obj.showQQ();
//alert(obj.showName==obj2.showName);
</script>

原型——prototype

什么是原型

原型是class，修改他可以影响一类元素
在已有对象中加入自己的属性、方法
原型修改对已有对象的影响

为Array添加sum方法

给对象添加方法，类似于行间样式
给原型添加方法，类似于class

原型的小缺陷

无法限制覆盖

var arr1=new Array(12,55,34,78,676);
var arr2=new Array(12,33, 1);

Array.prototype.sum=function ()	//class
//arr1.sum=function ()				//行间样式
{
	var result=0;
	
	for(var i=0;i<this.length;i++)
	{
		result+=this[i];
	}
	
	return result;
};

alert(arr1.sum());
alert(arr2.sum());	//?

流行的面向对象编写方式

用混合方式构造对象

混合的的构造函数/原型方式
Mixed Constructor Function/Prototype Method

原则

构造函数：加属性
原型：加方法

对象命名规范

类名首字母大写

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');

/*obj.showName();
obj.showQQ();

obj2.showName();
obj2.showQQ();*/
alert(obj.showName==obj2.showName);

JS面向对象实例

实例：面向对象的选项卡

把面向过程的程序，改写成面向对象的形式

原则

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

过程

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

改错

this、事件、闭包、传参

#div1 input {background:white;}
#div1 input.active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}


window.onload=function ()
{
	new TabSwitch('div1');
};

function TabSwitch(id)
{
	var _this=this;
	var oDiv=document.getElementById(id);
	
	this.aBtn=oDiv.getElementsByTagName('input');
	this.aDiv=oDiv.getElementsByTagName('div');
	
	for(var i=0;i<this.aBtn.length;i++)
	{
		this.aBtn[i].index=i;
		this.aBtn[i].onclick=function ()
		{
			_this.fnClick(this);
		};
	}
};

TabSwitch.prototype.fnClick=function (oBtn)
{
	//alert(this);
	for(var i=0;i<this.aBtn.length;i++)
	{
		this.aBtn[i].className=''
		this.aDiv[i].style.display='none';
	}
	oBtn.className='active';
	this.aDiv[oBtn.index].style.display='block';
}

<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>dfsadf</div>
<div>erwqerwe</div>
</div>

对象与闭包

有权访问另一个函数作用域内变量的函数都是闭包
通过闭包传递this

JS面向对象高级

Json方式的面向对象

把方法包在一个Json里

有人管他叫——命名空间
在公司里，把同一类方法，包在一起
不适合多个对象

Json的对象

var json={
	name: 'blue',
	qq: '258248832',
	
	showName: function ()
	{
		alert('我的名字叫：'+this.name);
	},
	showQQ: function ()
	{
		alert('我的QQ号是：'+this.qq);
	}
};

var json2={
	name: '...',
	qq: '258248832',
	
	showName: function ()
	{
		alert('我的名字叫：'+this.name);
	},
	showQQ: function ()
	{
		alert('我的QQ号是：'+this.qq);
	}
};

json.showName();
json.showQQ();

命名空间

var zns={};

zns.common={};
zns.fx={};
zns.site={};

zns.common.getUser=function ()
{
	alert('a');
};

zns.fx.getUser=function ()
{
	alert('b');
};

zns.site.getUser=function ()
{
	alert('c');
};

zns.common.getUser();
zns.fx.getUser();
zns.site.getUser();

拖拽和继承

面向对象的拖拽

改写原有拖拽

对象的继承

什么是继承
在原有类的基础上，略作修改，得到一个新的类
不影响原有类的功能

instanceof运算符

查看对象是否是某个类的实例

父类

function Drag(id)
{
	var _this=this;
	this.disX=0;
	this.disY=0;
	
	this.oDiv=document.getElementById(id);
	this.oDiv.onmousedown=function (ev)
	{
		_this.fnDown(ev);
		
		return false;
	};
};

Drag.prototype.fnDown=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.fnMove(ev);
	};
	document.onmouseup=function ()
	{
		_this.fnUp();
	};
};

Drag.prototype.fnMove=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.fnUp=function ()
{
	document.onmousemove=null;
	document.onmouseup=null;
};

HTML部分

#div1 {width:200px; height:200px; background:yellow; position:absolute;}
#div2 {width:200px; height:200px; background:green; position:absolute;}

<script src="Drag.js"></script>
<script src="LimitDrag.js"></script>

window.onload=function ()
{
	new Drag('div1');
	new LimitDrag('div2');
};

<div id="div1">普通拖拽</div>
<div id="div2">限制范围</div>

使用继承

限制范围的拖拽类

继承类

function LimitDrag(id)
{
	Drag.call(this, id);	//继承属性
}

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

LimitDrag.prototype.fnMove=function (ev)
{
	var oEvent=ev||event;
	var l=oEvent.clientX-this.disX;
	var t=oEvent.clientY-this.disY;
	
	if(l<0)
	{
		l=0;
	}
	else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
	{
		l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
	}
	
	this.oDiv.style.left=l+'px';
	this.oDiv.style.top=t+'px';
};

构造函数伪装

属性的继承
原理：欺骗构造函数
call的使用

属性的继承

function A()
{
	this.abc=12;
}

//继承A

function B()
{
	//this->new B()
	A.call(this);
}

call的使用

function show(a, b)
{
	alert('this是：'+this+'\na是：'+a+'\nb是：'+b);
}

//show(12, 5);
show.call('abc', 12, 5);

原型链

方法的继承
原理：复制方法
覆盖原型和方法复制

引用

var arr1=[1,2,3];
var arr2=arr1;

arr2.push(4);

alert(arr1);	//1,2,3,4
alert(arr2);	//1,2,3,4

方法的继承

//继承父类方法
for(var i in A.prototype)
{
	B.prototype[i]=A.prototype[i];
}

//自己的方法
B.prototype.fn=function ()
{
	alert('abc');
};

系统对象

本地对象（非静态对象）

什么是本地对象，需要实例化（new）
常用对象
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error
内置对象（静态对象）
什么是本地对象
Global、Math
宿主对象（由浏览器提供的对象）
DOM、BOM

BOM应用

BOM基础

打开、关闭窗口

open

window.open(‘url’,’_blank’)
window.open有返回值，返回值就是打开的页面

例子：运行

window.onload=function ()
{
	var oTxt=document.getElementById('txt1');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var oNewWin=window.open('about:blank', '_blank');
		
		oNewWin.document.write(oTxt.value);
	};
};

close

关闭时提示问题
火狐里不能不用close关闭非open的窗口
1
window.close()

常用属性

window.navigator.userAgent //当前浏览器版本信息
window.location //当前页面的地址，可读取还可赋值

window.location

1	window.location='http://www.uknow.top'

尺寸及坐标

窗口尺寸、工作区尺寸

可视区尺寸

仅跟窗口大小有关
document.documentElement.clientWidth
document.documentElement.clientHeight

滚动距离

随着滚动距离变大
document.body.scrollTop
document.documentElement.scrollTop

兼容写法

document.onclick=function ()
{
	//IE、FF
	//alert(document.documentElement.scrollTop);
	
	//chrome
	//alert(document.body.scrollTop);
	
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	
	alert(scrollTop);
};

常用方法和事件

系统对话框

警告框：alert(“内容”)，没有返回值
选择框：confirm(“提问的内容”)，返回boolean
输入框：prompt()，返回字符串或null

选择框：confirm

1
2
3

var res=confirm('你是否要删除');

alert(res);

输入框：prompt

1
2
3

var res=prompt('请输入你的姓名', 'blue');

alert(res);

window对象常用事件

onload
onscroll //当滚动时事件发生
onresize //当改变时事件发生

例子：回到顶部按钮、侧边栏广告

#div1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
body {height:2000px;}

window.onscroll=window.onresize=function ()
{
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var oDiv=document.getElementById('div1');
	
	oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
};

<div id="div1"></div>

闪烁问题

userAgent>IE6 —> fixed
IE —> 运动

COOKIE基础与应用

cookie基础

什么是cookie

页面用来保存信息

比如：自动登录、记住用户名

cookie的特性

同一个网站中所有页面共享一套cookie
数量、大小有限
过期时间

JS中使用cookie

document.cookie

document.cookie='user=blue';		//添加
document.cookie='pass=123456';

alert(document.cookie);

Date()

var oDate=new Date();

oDate.setDate(oDate.getDate()+800000);

alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate());

使用cookie - 1

cookie的使用

设置cookie

格式：名字=值
不会覆盖
过期时间：expires=时间
日期对象的使用
封装函数

function setCookie(name, value, iDay)
{
	var oDate=new Date();
	oDate.setDate(oDate.getDate()+iDay);
	
	document.cookie=name+'='+value+';expires='+oDate;
}

读取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];
		}
	}
	
	return '';
}

删除cookie

已经过期

function removeCookie(name)
{
	setCookie(name, 1, -1);
}

封装函数

function setCookie(name, value, iDay)
{
	var oDate=new Date();
	oDate.setDate(oDate.getDate()+iDay);
	
	document.cookie=name+'='+value+';expires='+oDate;
}

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];
		}
	}
	
	return '';
}

function removeCookie(name)
{
	setCookie(name, 1, -1);
}

/*setCookie('userName', 'dancingblue', 365);
setCookie('password', '123456', 14);*/

//alert(document.cookie);
//alert(getCookie('sex'));
removeCookie('password');
alert(document.cookie);

使用cookie - 2

cookie的使用

例子

用cookie记录上次登录的用户名

提交时——记录用户名
window.onload——读取用户名

function setCookie(name, value, iDay)
{
	var oDate=new Date();
	oDate.setDate(oDate.getDate()+iDay);
	
	document.cookie=name+'='+value+';expires='+oDate;
}

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];
		}
	}
	
	return '';
}

function removeCookie(name)
{
	setCookie(name, 1, -1);
}

window.onload=function ()
{
	var oForm=document.getElementById('form1');
	var oUser=document.getElementsByName('user')[0];
	
	oForm.onsubmit=function ()
	{
		setCookie('user', oUser.value, 14);
	};
	
	oUser.value=getCookie('user');
};

<1form id="form1" action="http://www.zhinengshe.com/">
	用户名：<input type="text" name="user" /><br>
    密码：<input type="password" name="pass" /><br>
	<input type="submit" value="登陆" />
</form>

JS中的正则表达式

正则表达式基础 - 1

复习字符串操作

search 查找
substring 获取子字符串
charAt 获取某个字符
split 分割字符串，获得数组

search

1
2
3

var str='abcdef';

alert(str.search('u'));		//位置, -1

substring

var str='abcdef';

//alert(str.substring(2, 5));	//不包括结束位置
alert(str.substring(1));

charAt

1
2
3

var str='abcdef';

alert(str.charAt(0));

split

var str='12-56-aaa-89';
var arr=str.split('-');

alert(arr)

找出字符串中的所有数字

用传统字符串操作完成
用正则表达式完成

传统操作

var str='12 fff 87 er334 233 -=-=fa80';
var arr=[];
var tmp='';

for(var i=0;i<str.length;i++)
{
	if(str.charAt(i)>='0' && str.charAt(i)<='9')
	{
		tmp+=str.charAt(i);
	}
	else
	{
		if(tmp)
		{
			arr.push(tmp);
			tmp='';
		}
	}
}

if(tmp)
{
	arr.push(tmp);
	tmp='';
}

alert(arr);

正则操作

1
2
3

var str='12 fff 87 er334 233 -=-=fa80';

alert(str.match(/\d+/g));

正则表达式基础 - 2

什么是正则表达式

什么叫“正则”
规则、模式
强大的字符串匹配工具
是一种正常人类很难读懂的文字
RegExp对象
JS风格——new RegExp(“a”, “i”)
perl风格——/a/i

JS风格

var re=new RegExp('b', 'i');  //i 忽略大小写
var str='abcdef';

alert(str.search(re));

perl风格

var re=/a/i;
var str='abcdef';

alert(str.search(re));

字符串与正则配合 - 1

search

字符串搜索

返回出现的位置
忽略大小写：i——ignore
判断浏览器类型

match

获取匹配的项目

量词：+
量词变化：\d、\d\d和\d+
全局匹配：g——global
例子：找出所有数字

例子：找出所有数字

var str='asdf 34 656 cvs33';
var re=/\d+/g;

alert(str.match(re));

字符串与正则配合 - 2

replace

替换所有匹配

返回替换后的字符串

例子：敏感词过滤

var str='abc aaa erw';
var re=/a/g;

alert(str.replace(re, '0'));
</script>

字符串 - 1

任意字符

[abc] 或
例子：o[usb]t——obt、ost、out

范围

[a-z]、[0-9]
例子：id[0-9]——id0、id5

排除

[^a]
例子：o[^0-9]t——oat、o?t、o t

字符串 - 2

组合

[a-z0-9A-Z]

实例：偷小说

过滤HTML标签
自定义innerText方法

window.onload=function ()
{
	var oTxt1=document.getElementById('txt1');
	var oTxt2=document.getElementById('txt2');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var re=/<[^<>]+>/g;
		
		oTxt2.value=oTxt1.value.replace(re, '');
	};
};


<textarea id="txt1" rows="10" cols="40"></textarea><br>
<input id="btn1" type="button" value="转换" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>

转义字符

.（点）——任意字符
\d(数字)、\w(英文、数字、下划线)、\s(空白字符)
\D(除了数字)、\W(除了英文、数字、下划线)、\S(除了空白字符)

量词

什么是量词

{n}出现的次数
{n,m}，至少出现n次，最多m次
{n，} 最少n次，最多不限
例子：查找QQ号 [1-9]\d{4,10}
例子：固定电话 (0\d{2,3}-)?[1-9]\d{7} ?表示前面可以有可以没有

常用量词

{n,} 至少n次
× 任意次 {0,}
？零次或一次 {0,1}
＋一次或任意次{1,}
{n} 正好n次

常用正则例子

表单校验实例

校验邮箱
行首(^)、行尾($)
test 只要一部分符合要求就返回ture

window.onload=function ()
{
    var oTxt=document.getElementById('txt1');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()
    {
        var re=/^\w+@[a-z0-9]+\.[a-z]+$/i;

        if(re.test(oTxt.value))
        {
            alert('合法的邮箱');
        }
        else
        {
            alert('你丫写错了');
        }
    };
};


<1input type="text" id="txt1" />
<1input type="button" value="校验" id="btn1" />

智能社：JavaScript教程-从入门到精通视频-整理笔记

初探JavaScript魅力-1

JavaScript是什么

第一个JS兼容性问题:document.getElementById

引入函数：因为直接在事件内写代码会很乱

if判断：如点击按钮显示/隐藏div(弹出菜单)

初探JavaScript魅力-2

函数传参

改变背景颜色

改变Div的任意样式

style与className

提取行间事件

为元素添加事件

window.onload的意义

循环

while循环、for循环

选项卡

按钮的实现

内容的实现

简易日历

程序实现思路

数组的使用

字符串连接 (+)

JavaScript基础

JavaScript组成

变量类型

类型：typeof运算符

变量类型

数据类型转换

隐式类型转换

作用域

命令规范

运算符

程序流程控制

判断(if、switch、?:)

循环(while、for)

跳出(break、continue)

什么是真、什么是假

Json

Json

Json与数组区别

Json和for in

深入JavaScript

函数返回值

什么是函数返回值

一个函数应该只返回一种类型的值

函数传参

可变参（不定参）：arguments

取非行间样式(不能用来设置)

兼容函数编写

数组基础

定义

数组的属性

length

数组的方法

添加

删除

插入、删除(splice)

连接 concat(数组2)

拼接 join(分隔符)

排序 sort([比较函数])

DOM基础-1

DOM节点-1

方法

属性

innerHTML

nodeName

nodeValue

nodeType

DOM基础-2

循环子节点

parentNode

offsetParent

首位子节点

firstChild、lastChild

firstElementChild lastElementChild

元素属性操作

DOM元素灵活查找

用className选择元素

DOM操作应用

分享到侧边栏