JavaScript

最新推荐文章于 2023-03-08 21:17:41 发布

漂游大叔

最新推荐文章于 2023-03-08 21:17:41 发布

阅读量682

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_29764065/article/details/82863681

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

JavaScript

JavaScript基础

Javascript组成

ECMAScript：解释器、翻译

DOM：Document Object Model

BOM：Brower Object Model

各组成部分的兼容性，兼容性问题由来

ECMA：几乎没有兼容性问题

DOM：有一些操作不兼容

BOM：没有兼容问题(完全不兼容，所有不使用)

变量类型

类型：typeof运算符

用法、返回值

常用类型：

Number、string、boolean、undefined、object、function

一个变量应该只存放一种类型的数据

<!doctype html>

<html>

<head>

</head>

<body>

</body>

var a=12;

//alert(typeof a);//number

a='asdfg';

//alert(typeof a);//string

a=true;

//alert(typeof a);//boolean

a=function (){

alert('abca');

};

//alert(typeof a);//function

a=document;

//alert(typeof a);//object

var b;

//alert(typeof b);//undefined

//1.真的没定义

//2.虽然定义，没有给东西

</script>

</html>

数据类型转换

例子：计算两个文本框的和

<!doctype html>

<html>

<head>

<title>数据类型转换</title>

</head>

<body>

</body>

window.οnlοad=function(){

var oTxt1=document.getElementById("txt1");

var oTxt2=document.getElementById("txt2");

var oBtn=document.getElementById("btn1");

oBtn.οnclick=function(){

//alert(typeof oTxt1.value);//'12'+'56'

alert(oTxt1.value+oTxt2.value);

};

}

</script>

</html>

显示类型转换(强制类型转换)

parseInt()、parseFloat()

<!doctype html>

<html>

<head>

<title>parseInt和parseFloat</title>

</head>

<body>

</body>

var a='3.5';

//alert(parseInt(a));//结果3

alert(parseFloat(a));//结果3.5

</script>

</html>

NaN的意义和检测

<!doctype html>

<html>

<head>

</head>

<body>

</body>

var a=parseInt('abc');

var b=parseInt('fds');

alert(a==b);//结果false NaN和NaN不相等

alert(isNaN(a));//结果true

</script>

</html>

隐式类型转换

==、===

<!doctype html>

<html>

<head>

<title>隐式类型转换</title>

</head>

<body>

</body>

var a=5;

var b='5';

//alert(a==b);//true 先转换类型，然后比较

//alert(a===b);//false 不转换类型，直接比较

</script>

</html>

减法

<!doctype html>

<html>

<head>

<title>隐式类型转换</title>

</head>

<body>

</body>

var c='12';

var d='5';

alert(c+d);//125 1.字符串连接 2.数字相加字符串连接优先级相加

alert(c-d);//7 1.数字相减

</script>

</html>

变量作用域和闭包

变量作用域(作用范围)

局部变量、全局变量

<!doctype html>

<html>

<head>

<title>变量作用域</title>

</head>

<body>

</body>

var a;//全局变量：在任何地方都可以使用

function a(){

var a=12;//局部变量：只能在定义它的函数里面使用

}

function b(){

alert(a);

}

a();

b();

</script>

</html>

什么是闭包

子函数可以使用父函数中的局部变量

之前一直使用闭包

网上对闭包的定义

<!doctype html>

<html>

<head>

</head>

<body>

</body>

//子函数可以使用父函数的局部变量

function a(){ //父函数

var a=12;

function b(){ //子函数

alert(a);

}

b();

}

a();

</script>

</html>

命名规范

命名规范及必要性

可读性----能看懂

规范性----符合规则

匈牙利命名法

类型前缀

首字母大写

类型	前缀	类型	实例
数组	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

运算符

算术：+加、-减、*乘、/除、%取模

实例：隔行变色、秒转时间

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

window.οnlοad=function(){

var aLi=document.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++){

if(i%2==0){

aLi[i].style.background='#ccc';

}else{

aLi[i].style.background='';

}

};

</script>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

var s=156;

alert(parseInt(s/60)+"分"+s%60+"秒");

</script>

</html>

赋值：=、+=、-=、*=、/=、%=

关系：<、>、<=、>=、==、===、!=、!==

逻辑：&&与、||或、!否

实例：全选与反选

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

var n=2;

if(n>9 && n<100){

alert("是两位数");

}else{

alert("不是两位数");

}

</script>

</html>

运算符优先级：括号

程序流程控制

任何复杂的程序逻辑都可以通过“顺序”，“分支”，“循环”三种基本的程序结构实现

if语句

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

</body>

function myFunction(){

var x="";

var time=new Date().getHours();

if (time<20){

x="Good day";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

If...else语句

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>点击这个按钮，获得基于时间的问候。</p>

</body>

function myFunction(){

var x="";

var time=new Date().getHours();

if (time<20){

x="Good day";

}else{

x="Good evening";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

三目运算符

boolean表达式?表达式1:表达式2

先计算boolean表达式的值，如果为true，则整个表达式的值为表达式1的值

如果为false，则整个表达式的值为表达式2的值

<!DOCTYPE html>

<html>

<head>

<title>三目运算符</title>

</head>

<body>

<p>点击这个按钮，获得基于时间的问候。</p>

</body>

function myFunction(){

var x="";

var time=new Date().getHours();

time<20?x="Good day":x="Good evening"

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

If...else if...else语句

<!doctype html>

<html>

<head>

</head>

<body>

</body>

var d = new Date();

var time = d.getHours();

if(time<10){

document.write("<b>早上好</b>");

}else if(time>=10 && time<16){

document.write("<b>今天好</b>");

}else{

document.write("<b>晚上好!</b>");

}

</script>

</html>

switch...case语句

<!DOCTYPE html>

<html>

<head>

<title>switch case</title>

</head>

<body>

<p>点击下面的按钮来显示今天是周几：</p>

</body>

function myFunction(){

var x;

var d=new Date().getDay();

switch(d){

case 0:x="今天是星期日";

break;

case 1:x="今天是星期一";

break;

case 2:x="今天是星期二";

break;

case 3:x="今天是星期三";

break;

case 4:x="今天是星期四";

break;

case 5:x="今天是星期五";

break;

case 6:x="今天是星期六";

break;

}

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

default关键字

<html>

<head>

<title>default</title>

</head>

<body>

<p>点击下面的按钮，会显示出基于今日日期的消息：</p>

</body>

function myFunction(){

var x;

var d=new Date().getDay();

switch (d){

case 6:x="今天是星期六";

break;

case 0:x="今天是星期日";

break;

default:

x="期待周末";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

for循环

for(语句1;语句2;语句3){

被执行的代码

}

语句1 （代码块）开始前执行

语句2 定义运行循环（代码块）的条件

语句3 在循环（代码块）已被执行之后执行

for/in

循环遍历对象的属性

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>

</body>

function myFunction(){

var x;

var txt="";

var person={fname:"Bill",lname:"Gates",age:56};

for (x in person){

txt=txt + person[x];

}

document.getElementById("demo").innerHTML=txt;

}

</script>

</html>//结果：BillGates56

while循环

while语句是前测试循环

--退出条件是在执行循环内部的代码之前计算的

--因此，循环主体可能根本不被执行

<!doctype html>

<html>

<head>

<title>while语句</title>

<style>

font-family:微软雅黑;

}

</style>

</head>

<body>

var i=1;

while(i<=10){

document.write('<h1>'+i+'</h1>');

i++;

}

</script>

</body>

</html>

do-while语句

do-while语句是后测试循环

--退出条件再执行循环内部的代码之后计算

--再计算表达式之前，至少会执行循环主体一次

<!DOCTYPE html>

<html>

<head>

<title>do/while</title>

</head>

<body>

<p>点击下面的按钮，只要i小于5就一直循环代码块。</p>

</body>

function myFunction(){

var x="",i=0;

do{

x=x + "该数字为 " + i + "<br>";

i++;

}

while (i<5);

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

Break语句用于中断整个循环

Continue用于中断本次循环

Break语句

<!DOCTYPE html>

<html>

<head>

<title>break</title>

</head>

<body>

<p>点击按钮，测试带有break语句的循环。</p>

</body>

function myFunction(){

var x="",i=0;

for (i=0;i<10;i++){

if (i==3){

break;

}

x=x + "该数字为 " + i + "<br>";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

Continue语句

<!DOCTYPE html>

<html>

<head>

<title>continue</title>

</head>

<body>

<p>点击下面的按钮来执行循环，该循环会跳过i=3的步进。</p>

</body>

function myFunction(){

var x="",i=0;

for (i=0;i<10;i++){

if (i==3){

continue;

}

x=x + "该数字为 " + i + "<br>";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

什么是真、什么是假

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

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

对象

Array对象：

concat() 连接两个或更多的数组，并返回结果

copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中

every() 检测数值元素的每个元素是否符合条件

fill() 用于将一个固定值替换数组的元素

filter() 检测数值元素，并返回符合条件所有元素的数组

find() 返回符合传入测试(函数)条件的数组元素

findIndex() 返回符合传入测试(函数)条件的数组元素索引

forEach() 数组用于调用数组的每个元素，并将元素传递给回调函数

includes() 判断一个数组是否包含一个指定的值，如果是返回true，否则false

indexOf() 搜索数组中的元素，并返回它所在的位置

join() 把数组的所有元素转换为一个字符串

lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索

map() 通过指定函数处理数组的每个元素，并返回处理后的数组

pop() 移除最后一个数组元素

push() 向数组的末尾添加一个或多个元素，并返回新的数组

reduce() 将数组元素计算为一个值(从左到右)

reduceRight() 将数组元素计算为一个值(从右到左)

reverse() 反转数组的元素顺序

shift() 删除并返回数组的第一个元素

slice() 从已有的数组中返回选定的元素

some() 检测数组元素中是否有元素符合指定条件

sort() 对数组的元素进行排序

splice() 从数组中添加或删除元素

toString() 把数组转换为字符串，并返回结果

unshift() 向数组的开头添加一个或更多元素，并返回新的长度

valueOf() 返回数组对象的原始值

Boolean对象：

toString() 把布尔值转换为字符串，并返回结果

valueOf() 返回Boolean对象的原始值

Date对象：

getDate() 从Date对象返回一个月中的某一天(1~31)

getDay() 从Date对象返回一周中的某一天(0~6)

getFullYear() 从Date对象以四位数字返回年份

getHours() 返回Date对象的小时(0~23)

getMilliseconds() 返回Date对象的毫秒(0~999)

getMinutes() 返回Date对象的分钟(0~59)

getMonth() 从date对象返回月份(0~11)

getSeconds() 返回Date对象的秒数(0~59)

getTime() 返回1970年1月1日至今的毫秒数

getTimezoneOffset() 返回本地时间与格林威治标准时间(GMT)的分钟差

setDate() 设置Date对象中月的某一天(1~31)

setFullYear() 设置Date对象中的年份(四位数字)

setHours() 设置Date对象中的小时(0~23)

setMilliseconds()设置Date对象中的毫秒(0~999)

setMinutes() 设置Date对象中的分钟(0~59)

setMonth() 设置Date对象中的月份(0~11)

setSeconds() 设置Date对象中的秒钟(0~59)

toDateString() 把Date对象的日期部分转换为字符串

toJSON() 以JSON数据格式返回日期字符串

valueOf() 返回Date对象的原始值

Math对象：

abs(x) 返回x的绝对值

acos(x) 返回x的反余弦值

asin(x) 返回x的反正弦值

atan(x) 以介于-PI/2与PI/2弧度之间的数值来返回x的反正切值

atan2(y,x) 返回从x轴到点(x,y)的角度(介于-PI/2与PI/2弧度之间)

ceil(x) 对数进行上舍入

cos(x) 返回数的余弦

exp(x) 返回Ex 的指数

floor(x) 对x进行下舍入

log(x) 返回数的自然对数(底为e)

max(x,y,z...n)返回x,y,z,...n中的最高值

min(x,y,z...n)返回x,y,z,...n中的最底值

pow(x,y) 返回x的y次幂

random() 返回0~1之间的随机数

round(x) 把数四舍五入为最接近的整数

sin(x) 返回数的正弦

sqrt(x) 返回数的平方根

tan(x) 返回角的正切

Number对象：

toExponential(x) 把对象的值转换为指数计数法

toFixed(x) 可把数字四舍五入为指定小数位数的数字，并把数字转换为字符串

toPrecision(x) 把数字格式化为指定的长度，类型变为字符串

toString(x) 把数字转换为字符串，使用指定的基数
valueOf() 返回Number对象的基本数字值

String对象：

charAt() 返回在指定位置的字符

charCodeAt() 返回在指定位置的字符的Unicode编码

concat() 连接两个或更多字符串，并返回新的字符串

fromCharCode() 将Unicode编码转为字符

indexOf() 返回某个指定的字符串值在字符串中首次出现位置

lastIndexOf() 从后向前搜索字符串，并从起始位置(0)开始计算返回字符串最后出现的位置

match() 在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

replace() 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串

search() 查找与正则表达式相匹配的值

slice() 提取字符串的片断，并在新的字符串中返回被提取的部分

split() 把字符串分割为字符串数组

substr() 在字符串中抽取从下标开始的指定数目的字符

substring() 提取字符串中两个指定的索引号之间的字符

toLowerCase() 把字符串转换为小写

toUpperCase() 把字符串转换为大写

trim() 去除字符串两边的空白

valueOf() 返回某个字符串对象的原始值

String HTML包装方法

anchor() 创建HTML锚

big() 用大号字体显示字符串

blink() 显示闪动字符串

bold() 使用粗体显示字符串

fixed() 已打字机文本显示字符串

fontcolor() 使用指定的颜色显示字符串

fontsize() 使用指定的尺寸来显示字符串

italics() 使用斜体显示字符串

link() 将字符串显示为链接

small() 用于显示加删除线的字符串

sub() 把字符串显示为下标

sup() 把字符串显示为上标

RegExp对象：

i 执行对大小写不敏感的匹配

g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)

m 执行多行匹配

方括号用于查找某个范围内的字符

[abc] 查找方括号之间的任何字符

[^abc] 查找任何不在方括号之间的字符

[0-9] 查找任何0到9的数字

[a-z] 查找任何熊小写a到小写z的字符

[A-Z] 查找任何大写A到大写Z的字符

[A-z] 查找任何从大写A到小写z的字符

[adgk] 查找给定集合内的任何字符

[^adgk] 查找给定集合外的任何字符

(red|blue|green) 查找任何指定的选项

元字符是拥有特殊含义的字符

. 查找单个字符，除了换行和行结束符

\w 查找单词字符

\W 查找非单词字符

\d 查找数字

\D 查找非数字字符

\s 查找空白字符

\S 查找非空白字符

\b 匹配单子边界

\B 匹配非单词边界

\0 查找NULL字符

\n 查找换行符

\f 查找换页符

\r 查找回车符

\t 查找制表符

\v 查找垂直制表符

支持正则表达式的String对象的方法

search检索与正则表达式相匹配的值

match找到一个或多个正则表达式的匹配

replace替换与正则表达式匹配的子串

split把字符串分割为字符串数组

事件

鼠标事件：

onclick 单机事件

ondblclick 双击事件

onmouseenter 鼠标滑入触发事件

onmouseleave 鼠标滑出触发事件

onmousemove 鼠标移动事件

键盘事件：

onkeydown 键盘按键被按下事件

onkeyup 键盘按键被按下并松开事件

onkeypress 键盘按键被松开事件

表单事件：

onfocus 事件在对象获得焦点时发生

onblur 事件会在对象失去焦点时发生

onchange 事件会在域的内容改变时发生

onselect 事件会在文本框中的文本被选中时发生

onsubmit 事件在表单提交时触发

onreset 表单重置时触发

框架/对象（Frame/Object）事件

window.onload 事件会在页面或图像加载完成后立即发生

window.onerror 事件在加载外部文件（文档或图像）发生错误时触发

window.onresize 事件会在窗口或框架被调整大小时发生

window.onscroll 事件在元素滚动条在滚动时触发

Json

什么是Json

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

var json={a:12,b:5,c:'abc'}

json.b++;

alert(json.b);

</script>

</html>

Json和数组

<!DOCTYPE html>

<html>

<head>

<title>json和数组</title>

</head>

<body>

</body>

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

var arr=[12,5,7];

alert(json.a);//结果12 也可以用['']代替. alert(json['a']);

alert(arr[0]);//结果12

alert(json.length);//undefined

alert(arr.length);//3

</script>

</html>

Json和for in

<!DOCTYPE html>

<html>

<head>

<title>json和for in</title>

</head>

<body>

</body>

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

var arr=[12,5,7];

for(var x in json){

alert("第"+x+":"+json[x]);

}

for(var z in arr){

alert(z+"下标值："+arr[z]);

}

</script>

</html>

深入JavaScript

函数返回值

函数返回值

什么是函数返回值

函数的执行结果

<!DOCTYPE html>

<html>

<head>

<title>函数返回值</title>

</head>

<body>

</body>

function show(a,b){

return a+b;

}

var a=show(3,5);

alert(a);

</script>

</html>

可以没有return

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

函数传参

可变参(不定参)：arguments

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

例子1：求和

求所有参数的和

<!DOCTYPE html>

<html>

<head>

<title>arguments</title>

</head>

<body>

</body>

function show(){

var result=0;

for(var i=0;i<arguments.length;i++){

result+=arguments[i];

}

return result;

}

alert(show(3,5,8));

</script>

</html>

例子2：CSS函数

判断arguments.length

给参数取名，增加可读性

比如：css(oDiv,’width’) 给两个参数获取样式

Css(oDiv,’width’,’200px’) 给三个参数设置样式

<!DOCTYPE html>

<html>

<head>

<title>CSS函数1</title>

</head>

<body>

</body>

function css(obj,name,value){

//alert(obj==arguments[0]);

if(arguments.length==2){

return obj.style[name];

}else{

obj.style[name]=value;

}

window.οnlοad=function(){

var oDiv=document.getElementById('div1');

//alert(css(oDiv,'width'));

css(oDiv,'background','green');

}

</script>

</html>

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

非行间样式就是指不是写在标签体内的style属性的样式

obj.currentStyle[attr]

getComputedStyle(obj,null)[attr]

<!DOCTYPE html>

<html>

<head>

<title>取非行间样式1</title>

<style>

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

</style>

</head>

<body>

</div>

</body>

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}else{

return getComputedStyle(obj,null)[name];

}

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

alert(getStyle(oDiv,'width'));

//alert(oDiv.style.width);

//alert(oDiv.currentStyle.width);//currentStyle存在兼容问题，支持IE

//alert(getComputedStyle(oDiv,null).width);//支持火狐、谷歌

//alert(oDiv.currentStyle);//不同浏览器下显示什么不同，通过真假来判断

/*if(oDiv.currentStyle){

//IE

alert(oDiv.currentStyle.width);

}else{

//火狐

alert(getComputedStyle(oDiv,null).width);

}*///方便浏览器兼容，提高复用性，将if封装成函数调用

};

</script>

</html>

数组基础

数组的使用

定义

var arr=[12,5,8,9];

var arr=new Array(12,5,8,9);

没有任何差别，[]的性能略高，因为代码短

数组的属性

length

既可以获取，又可以设置

例子：快速清空数组

<!DOCTYPE html>

<html>

<head>

<title>数组length</title>

</head>

<body>

</body>

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

alert(arr.length);

arr.length=0;

alert(arr.length);

</script>

</html>

数组使用原则：数组中应该只存一种类型的变量

添加、删除元素

数组的方法

添加

push(元素)，从尾部添加元素，同时改变原数组

unshift(元素)，从头部添加元素，同时改变原数组

删除

pop()，从尾部删除元素，同时改变原数组

shift()，从头部删除元素，同时改变原数组

<!DOCTYPE html>

<html>

<head>

<title>数组length</title>

</head>

<body>

</body>

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

arr.push(8);

alert(arr);

arr.pop();

alert(arr);

arr.unshift(1);

alert(arr);

arr.shift();

alert(arr);

</script>

</html>

插入、删除

splice

替换

splice(开始，长度，元素...)

先删除，后插入

删除

splice(开始，长度)

插入

splice(开始，0，元素...)

<!DOCTYPE html>

<html>

<head>

<title>数组splice</title>

</head>

<body>

</body>

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

//删除：splice(起点，长度)

//arr.splice(2,3);

//alert(arr);

//插入：splice(起点，0，元素...)

arr.splice(2,0,1,1);

alert(arr);

//替换：splice(起点，长度，元素...)，先删除再插入

arr.splice(2,2,1,1);

alert(arr);

</script>

</html>

获取，反转

获取

slice(开始，结束)，从哪开始到哪结束，但不包含最后一个

<!DOCTYPE html>

<html>

<head>

<title>数组slice</title>

</head>

<body>

<p id="demo">点击按钮截取数组下标1到2的元素</p>

</body>

function myFunction(){

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

var arr1 = arr.slice(1,3);

var x=document.getElementById("demo");

x.innerHTML=arr1;

}//结果是2,3

</script>

</html>

反转

reverse()，数组反转排序

<!DOCTYPE html>

<html>

<head>

<title>数组reverse</title>

</head>

<body>

<p id="demo">单击按钮将数组反转排序。</p>

</body>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

function myFunction(){

fruits.reverse();

var x=document.getElementById("demo");

x.innerHTML=fruits;

}

</script>

</html>

排序、转换

排序

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

排序一个字符串数组

排序一个数字数组

<!DOCTYPE html>

<html>

<head>

<title>数组sort</title>

</head>

<body>

</body>

var arr=[100,20,1,3,1000];

var str=arr.sort(asc);

//定义升序函数

function asc(a,c){return a-c}

alert(str);//数组升序

//定义降序函数

var str1=arr.sort(desc);

function desc(a,c){return c-a}

alert(str1);//数组倒序

</script>

</html>

转换类

concat(数组2)

连接两个数组,不改变原数组

<!DOCTYPE html>

<html>

<head>

<title>数组concat</title>

</head>

<body>

</body>

var arr1=[1,2,3];

var arr2=[4,5,6];

arr=arr1.concat(arr2);

alert(arr);

</script>

</html>

join(分隔符)

用分隔符，组合数组元素，生成字符串，不改变原数组

<!DOCTYPE html>

<html>

<head>

<title>数组join</title>

</head>

<body>

</body>

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

var a=arr.join('-');

alert(a);

alert(arr);

</script>

</html>

字符串split()，把字符串分割成数组

<!DOCTYPE html>

<html>

<head>

<title>数组split</title>

</head>

<body>

</body>

var str="1,2,3,4";

var a=str.split(",");

alert(a);

alert(str);

alert("str类型："+typeof(str));

</script>

</html>

定时器的使用

定时器的作用

开启定时器

setInterval 间隔型

<!DOCTYPE html>

<html>

<head>

<title>setInterval()</title>

</head>

<body>

<h3>语法：setInterval(code, milliseconds);</h3>

<h4>code：必需。要调用一个代码串，也可以是一个函数</h4>

<h4>milliseconds：必须。周期性执行或调用code之间的时间间隔，以毫秒计</h4>

<p>点击按钮，等待 3 秒会弹出 "Hello"。</p>

<p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p>

</body>

function myFunction() {

setInterval('alert("Hello");', 3000);

}

</script>

</html>

setTimeout 延时型

<!DOCTYPE html>

<html>

<head>

<title>setTimeout()</title>

</head>

<body>

<h3>语法：setTimeout(code, milliseconds, param1, param2, ...)</h3>

<h3>语法：setTimeout(function, milliseconds, param1, param2, ...)</h3>

<h4>code/function：必需。要调用一个代码串，也可以是一个函数。</h4>

<h4>milliseconds：可选。执行或调用code/function需要等待的时间，以毫秒计。默认为0</h4>

<h4>param1, param2, ... ：可选。传给执行函数的其他参数</h4>

<p>点击按钮，3 秒后会弹出 "Hello"。</p>

<p>

点击 "开始计数!" 按钮开始执行计数程序。输入框从 0 开始计算。点击 "停止计数!" 按钮停止后，可以再次点击点击 "开始计数!" 按钮会重新开始计数。

</p>

</body>

//3 秒（3000 毫秒）后弹出 "Hello"

var myVar;

function myFunction() {

myVar = setTimeout(alertFunc, 3000);

}

function alertFunc() {

alert("Hello!");

}

//计数器 -- 可以通过点击按钮停止

var c = 0;

var t;

var timer_is_on = 0;

function timedCount() {

document.getElementById("txt").value = c;

c = c + 1;

t = setTimeout(function(){timedCount()}, 1000);

}

function startCount(){

if (!timer_is_on) {

timer_is_on = 1;

timedCount();

}

function stopCount(){

clearTimeout(t);

timer_is_on = 0;

}

</script>

</html>

两种定时器的区别

停止定时器

clearInterval

<!DOCTYPE html>

<html>

<head>

<title>clearInterval()</title>

<style>

#myProgress {

width: 50%;

height: 30px;

position: relative;

background-color: #ddd;

}

#myBar {

background-color: #4CAF50;

width: 10px;

height: 30px;

position: absolute;

}

</style>

</head>

<body>

<h3>语法：clearInterval(id_of_setinterval)<h3>

<h4>id_of_setinterval：调用setInterval()函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval() 所设定的定时执行操作<h4>

<p>显示当前时间:</p>

<h2>JavaScript 进度条</h2>

</div>

<br>

</body>

//显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {

var d = new Date();

var t = d.toLocaleTimeString();

document.getElementById("demo").innerHTML = t;

}

function myStopFunction() {

clearInterval(myVar);

}

//使用 setInterval() 和 clearInterval() 来创建动态进度条

function move() {

var elem = document.getElementById("myBar");

var width = 0;

var id = setInterval(frame, 10);

function frame() {

if (width == 100) {

clearInterval(id);

} else {

width++;

elem.style.width = width + '%';

}

</script>

</html>

clearTimeout

<!DOCTYPE html>

<html>

<head>

<title>clearTimeout()</title>

</head>

<body>

<h3>语法：clearTimeout(id_of_settimeout)</h3>

<h4>id_of_setinterval：调用setTimeout()函数时所获得的返回值，使用该返回标识符作为参数，可以取消该setTimeout()所设定的定时执行操作</h4>

<p>

点击 "开始计数!" 按钮开始执行计数程序。输入框从 0 开始计算。点击 "停止计数!" 按钮停止后，可以再次点击点击 "开始计数!" 按钮会重新开始计数。

</p>

</body>

var c = 0;

var t;

var timer_is_on = 0;

function timedCount() {

document.getElementById("txt").value = c;

c = c + 1;

t = setTimeout(function(){ timedCount() }, 1000);

}

function startCount() {

if (!timer_is_on) {

timer_is_on = 1;

timedCount();

}

function stopCount() {

clearTimeout(t);

timer_is_on = 0;

}

</script>

</html>

数码时钟

效果思路

获取系统时间

Date对象

//Date对象会自动把当前日期和时间保存为其初始值

var now = new Date();

//或者

Var nowd2=new Date("2015/5/15 11:15");

Date对象的方法

getFullYear();//获取年份

getMonth();//获取月

getDate();//获取日

getHours();//获取小时

getMinutes();//获取分钟

getSeconds();//获取秒

getTime();//返回从1970年1月1日至今的毫秒数

getDay();//获取星期

<!DOCTYPE html>

<html>

<head>

<title>Date对象</title>

</head>

<body>

<p >点击按钮获取年份</p>

<p >点击按钮获取月</p>

<p >点击按钮获取日</p>

<p >点击按钮获取小时</p>

<p >点击按钮获取分钟</p>

<p >点击按钮获取秒</p>

<p >点击按钮获取返回从1970年1月1日至今的毫秒数</p>

<p >点击按钮获取星期</p>

</body>

function fullYear(){

var d = new Date();

alert(d.getFullYear()+"年");

}

function month(){

var d=new Date();

alert((d.getMonth()+1)+"月");

}

function date(){

var d=new Date();

alert(d.getDate()+"日");

}

function hours(){

var d=new Date();

alert(d.getHours()+"小时");

}

function minutes(){

var d=new Date();

alert(d.getMinutes()+"分钟");

}

function seconds(){

var d=new Date();

alert(d.getSeconds()+"秒");

}

function time(){

var d=new Date();

alert(d.getTime()+"毫秒");

}

function day(){

var d=new Date();

alert("星期"+d.getDay());

}

</script>

</html>

显示系统时间

字符串连接

空位补零

设置图片路径

charAt方法

<!DOCTYPE html>

<html>

<head>

<title>charAt</title>

</head>

<body>

<p id="demo">单击按钮显示字符串的第一个字符。</p>

</body>

function charAt(){

var str="HELLO WORLD";

document.getElementById("demo").innerHTML=str.charAt(0);

}

</script>

</html>

延时提示框

效果演示

原来的方法

移入显示，移出隐藏

移出延时隐藏

移入下面的DIV后，还是隐藏

简化代码

合并两个相同的mouseover和mouseout

<!DOCTYPE html>

<html>

<head>

<title>延时提示框缩减</title>

<style>

div{float:left;margin:10px;}

#div1{width:50px;height:50px;background:red;}

#div2{width:250px;height:180px;background:#CCC;display:none;}

</style>

</head>

<body>

</body>

window.οnlοad=function(){

var oDiv1=document.getElementById('div1');

var oDiv2=document.getElementById('div2');

var timer=null;

oDiv2.οnmοuseοver=oDiv1.οnmοuseοver=function(){

clearTimeout(timer);

oDiv2.style.display="block";

};

oDiv2.οnmοuseοut=oDiv1.οnmοuseοut=function(){

timer=setTimeout(function(){

oDiv2.style.display="none";

},500);

};

</script>

</html>

无缝滚动--基础

效果演示

物体运动基础

让DIV移动起来

offsetLeft的作用(获取物体的左边距，同样还有offsetTop、offsetWidth、offsetHeight)

用定时器让物体连续移动

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;padding:0;}

#div1{width:572px;height:108px;margin:100px auto;position:relative;background:red;overflow:hidden;}

#div1 ul{position:absolute;left:0;top:0;}

#div1 ul li{float:left;width:143px;height:107px;list-style:none;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var oUl=oDiv.getElementsByTagName("ul")[0];

var aLi=oUl.getElementsByTagName("li");

alert(oUl);

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";

var timer=setInterval(function(){

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left="0";

}

if(oUl.offsetLeft>0){

oUl.style.left=-oUl.offsetWidth/2+"px";

}

oUl.style.left=oUl.offsetLeft+2+'px';

},30);

};

</script>

</html>

无缝滚动

效果原理

让ul一直向左移动

复制li

innerHTML和+=

修改ul的width

滚动过界后，重设位置

判断过界

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;padding:0;}

#div1{width:572px;height:108px;margin:100px auto;position:relative;background:red;overflow:hidden;}

#div1 ul{position:absolute;left:0;top:0;}

#div1 ul li{float:left;width:143px;height:107px;list-style:none;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var oUl=oDiv.getElementsByTagName("ul")[0];

var aLi=oUl.getElementsByTagName("li");

alert(oUl);

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";

function move(){

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left="0";

}

if(oUl.offsetLeft>0){

oUl.style.left=-oUl.offsetWidth/2+"px";

}

oUl.style.left=oUl.offsetLeft+2+'px';

}

var timer=setInterval(move,30);

oDiv.οnmοuseοver=function(){

clearInterval(timer);

}

oDiv.οnmοuseοut=function(){

timer=setInterval(move,30);

}

};

</script>

</html>

无缝滚动--扩展

改变滚动方向

修改speed

修改判断条件

鼠标移入暂停

移入关闭定时器

移出重新开启定时器

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;padding:0;}

#div1{width:572px;height:108px;margin:100px auto;position:relative;background:red;overflow:hidden;}

#div1 ul{position:absolute;left:0;top:0;}

#div1 ul li{float:left;width:143px;height:107px;list-style:none;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var oUl=oDiv.getElementsByTagName("ul")[0];

var aLi=oUl.getElementsByTagName("li");

var speed=2;

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";

function move(){

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left="0";

}

if(oUl.offsetLeft>0){

oUl.style.left=-oUl.offsetWidth/2+"px";

}

oUl.style.left=oUl.offsetLeft+speed+'px';

}

var timer=setInterval(move,30);

oDiv.οnmοuseοver=function(){

clearInterval(timer);

}

oDiv.οnmοuseοut=function(){

timer=setInterval(move,30);

}

document.getElementsByTagName('a')[0].οnclick=function(){

speed=-2;

}

document.getElementsByTagName('a')[1].οnclick=function(){

speed=2;

}

};

</script>

</html>

DOM基础

DOM基础

什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

查找HTML元素有三种方法：

通过id找到HTML元素

var x=document.getElementById("intro");

通过标签名找到HTML元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到HTML元素

var x=document.getElementsByClassName("intro");

浏览器支持情况

DOM节点

childNodes nodeType

childNodes属性返回包含被选节点的子节点的NodeList

nodeType属性返回节点类型

获取子节点

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</body>

window.οnlοad=function(){

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

//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";

}

</script>

</html>

children

children返回被选元素的所有直接子元素

<!DOCTYPE html>

<html>

<head>

<title>children</title>

</head>

<body>

</ul>

</body>

window.οnlοad=function(){

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

//alert(oUl.children.length);

for(var i=0;i<oUl.children.length;i++){

oUl.children[i].style.background="red";

}

</script>

</html>

parentNode

parentNode属性可返回某节点的父节点

例子：点击链接，隐藏整个li

<!DOCTYPE html>

<html>

<head>

<title>parentNode</title>

</head>

<body>

<ul>

</ul>

</body>

window.οnlοad=function(){

var aA=document.getElementsByTagName('a');

for(var i=0;i<aA.length;i++){

aA[i].οnclick=function(){

this.parentNode.style.display="none";

}

</script>

</html>

offsetParent

offsetParent返回第一个被定位的父元素

例子：获取元素在页面上的实际位置

<!DOCTYPE html>

<html>

<head>

<title>offsetParent</title>

<style>

#div1{width:200px;height:200px;background:#ccc;margin:100px;position:relative;}

#div2{width:100px;height:100px;background:red;position:absolute;left:50px;top:50px;}

</style>

</head>

<body>

</div>

</body>

window.οnlοad=function(){

var oDiv2=document.getElementById("div2");

alert(oDiv2.offsetParent);

//结果是HTMLDIVelement，因为给div1设置了position:relative;

}

</script>

</html>

首尾子节点

有兼容性问题

firstChild、firstElementChild

获取父元素的第一个子元素

<!DOCTYPE html>

<html>

<head>

<title>firstChild</title>

</head>

<body>

</ul>

</body>

window.οnlοad=function(){

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

}

</script>

</html>

lastChild、lastElementChild

返回选定元素的最后一个子节点

兄弟节点

有兼容性问题

nextSibling、nextElementSibling

可返回某个元素之后紧跟的节点(处于同一树层级中)

<!DOCTYPE html>

<html>

<head>

<title>nextSibling</title>

</head>

<body>

<li id="item1">Coffee</li>

</ul>

<p><strong>注意:</strong> 空白元素被看作是文本，文本是节点。</p>

</body>

function but(){

var z=document.getElementById("item1");

var x="";

if(z.nextElementSibling){

var x=z.nextElementSibling.id;

}else{

var x=z.nextSibling.id;

}

alert(x);

}

</script>

</html>

previousSibling、previousElementSibling

可返回某节点之前紧跟的节点（处于同一树层级）

<!DOCTYPE html>

<html>

<head>

<title>previousSibling</title>

</head>

<body>

</ul>

<p><strong>注意:</strong> 空格是文本，文本是节点。</p>

<p>尝试在<li>元素之间添加空格，结果将是"undefined"。</p>

</body>

function bt(){

var itm=document.getElementById("item2");

//解决浏览器兼容

if(itm.previousElementSibling){

var z=itm.previousElementSibling.id;

}else{

var z=itm.previousSibling.id;

}

alert(z);

}

</script>

</html>

操作元素属性

元素属性操作

第一种：oDiv.style.display=”block”;

第二种：oDiv.style[“display”]=”block”;

第三种：Dom方式

<!DOCTYPE html>

<html>

<head>

<title>setAttribute</title>

</head>

<body>

</body>

window.οnlοad=function(){

var oTxt=document.getElementById("txt1");

var oBtn=document.getElementById("btn1");

oBtn.οnclick=function(){

//第一种操作元素属性

//oTxt.value="abcd";

//第二种操作元素属性

//oTxt["value"]="abcd";

//第三种操作元素属性

oTxt.setAttribute("value","abcd");

}

</script>

</html>

DOM方式操作元素属性

获取：getAttribute(名称)

设置：setAttribute(名称,值)

删除：removeAttribute(名称)

DOM元素灵活查找

用className选择元素

如何用className选择元素

选出所有元素

通过className条件筛选

封装成函数

<!DOCTYPE html>

<html>

<head>

<title>setAttribute1</title>

</head>

<body>

</ul>

</body>

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;

}

window.οnlοad=function(){

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

/*var aLi=oUl.getElementsByTagName("li");

for(var i=0;i<aLi.length;i++){

if(aLi[i].className=="box"){

aLi[i].style.background="red";

}

}*///提高复用，单独封装成函数getByClass(idName,className);

var aBox=getByClass(oUl,"box");

for(var i=0;i<aBox.length;i++){

aBox[i].style.background="red";

}

</script>

</html>

DOM操作应用

创建、插入和删除元素

创建DOM元素

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

appendChild(节点) 将创建的节点追加到指定位置

例子：为ul插入li

<!DOCTYPE html>

<html>

<head>

<title>createElement</title>

</head>

<body>

</ul>

</body>

window.οnlοad=function(){

var oBtn=document.getElementById("btn1");

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

oBtn.οnclick=function(){

var oLi=document.createElement("li");

oUl.appendChild(oLi);

}

</script>

</html>

插入元素

insertBefore(节点，原有节点) 在已有元素前插入

例子：倒序插入li

<!DOCTYPE html>

<html>

<head>

<title>insertBefore</title>

</head>

<body>

</ul>

</body>

window.οnlοad=function(){

var oBtn=document.getElementById("btn1");

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

var oTxt=document.getElementById("txt1");

oBtn.οnclick=function(){

var oLi=document.createElement("li");

var aLi=oUl.getElementsByTagName("li");

oLi.innerHTML=oTxt.value;

if(aLi.length>0){

oUl.insertBefore(oLi,aLi[0]);

}else{

oUl.appendChild(oLi);

}

</script>

</html>

删除DOM元素

removeChild(节点) 删除一个节点

例子：删除li

<!DOCTYPE html>

<html>

<head>

<title>removeChild</title>

</head>

<body>

</ul>

</body>

window.οnlοad=function(){

var aA=document.getElementsByTagName('a');

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

for(var i=0;i<aA.length;i++){

aA[i].οnclick=function(){

oUl.removeChild(this.parentNode);

}

</script>

</html>

文档碎片

文档碎片可以提高DOM操作性能(理论上)

文档碎片原理

document.createDocumentFragment()

<!DOCTYPE html>

<html>

<head>

<title>createDocumentFragment</title>

</head>

<body>

</ul>

</body>

window.οnlοad=function(){

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

var oFrag=document.createDocumentFragment();

for(var i=0;i<1000;i++){

var oLi=document.createElement("li");

oFrag.appendChild(oLi);

}

oUl.appendChild(oFrag);

}

</script>

</html>

DOM操作应用高级

表格应用

获取

tBodies、tHead、tFoot、rows、cells

tBodies返回表格<tbody>元素的集合

tHead返回表格的thead元素的引用

tFoot返回表格的tfoot元素的引用

rows返回表格中所有行(TableRow对象)的一个数组，即一个HTMLCollection

cells返回表格中所有<td>或<th>元素

<!DOCTYPE html>

<html>

<head>

<title>table</title>

</head>

<body>

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

window.οnlοad=function(){

var oTab=document.getElementById("tab1");

//var x=oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1].getElementsByTagName("td")[1].innerHTML;与下面等同效果

var x=oTab.tBodies[0].rows[1].cells[1].innerHTML;

alert(x);

}

</script>

</html>

隔行变色

鼠标移入高亮

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

window.οnlοad=function(){

var oTab=document.getElementById("tab1");

alert(oTab.tBodies[0].rows.length);

var oColor="";

for(var i=0;i<oTab.tBodies[0].rows.length;i++){

//添加移入移出设置

oTab.tBodies[0].rows[i].οnmοuseοver=function(){

oColor=this.style.background;

this.style.background="green";

}

oTab.tBodies[0].rows[i].οnmοuseοut=function(){

this.style.background=oColor;

}

//设置隔行变色

if(i%2){

oTab.tBodies[0].rows[i].style.background="";

}else{

oTab.tBodies[0].rows[i].style.background="#ccc";

}

</script>

</html>

添加、删除一行

DOM方法的使用

<!DOCTYPE html>

<html>

<head>

<title>TABLE添加一行</title>

</head>

<body>

姓名：<input id="name" type="text">

年龄：<input id="age" type="text">

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

window.οnlοad=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.οnclick=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);

//对a标签添加单击事件

oTd.getElementsByTagName('a')[0].οnclick=function(){

oTab.tBodies[0].removeChild(this.parentNode.parentNode);

}

//将获取的值赋给需要显示的表格

oTab.tBodies[0].appendChild(oTr);

}

</script>

</html>

搜索

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

<!DOCTYPE html>

<html>

<head>

<title>TABLE搜索</title>

</head>

<body>

姓名：<input id="name" type="text">

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

window.οnlοad=function(){

var oTab=document.getElementById("tab1");

var oTxt=document.getElementById("name");

var oBtn=document.getElementById("btn1");

oBtn.οnclick=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="";

}

};

}

</script>

</html>

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

x.toLowerCase()#把字符串转换为大写

x.toUpperCase()#把字符串转换为小写

<!DOCTYPE html>

<html>

<head>

<title>TABLE搜索忽略大小写</title>

</head>

<body>

姓名：<input id="name" type="text">

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

window.οnlοad=function(){

var oTab=document.getElementById("tab1");

var oTxt=document.getElementById("name");

var oBtn=document.getElementById("btn1");

oBtn.οnclick=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="";

}

};

}

</script>

</html>

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

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串

<!DOCTYPE html>

<html>

<head>

<title>TABLE模糊搜索</title>

</head>

<body>

姓名：<input id="name" type="text">

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

window.οnlοad=function(){

var oTab=document.getElementById("tab1");

var oTxt=document.getElementById("name");

var oBtn=document.getElementById("btn1");

oBtn.οnclick=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="";

}

};

}

</script>

</html>

版本4：多关键词--split

split()方法用于把一个字符串分割成字符串数组

<!DOCTYPE html>

<html>

<head>

<title>TABLE多关键字搜索</title>

</head>

<body>

姓名：<input id="name" type="text">

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

window.οnlοad=function(){

var oTab=document.getElementById("tab1");

var oTxt=document.getElementById("name");

var oBtn=document.getElementById("btn1");

oBtn.οnclick=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";

}

};

}

</script>

</html>

高亮显示、筛选

排序

移动Li

元素排序：转换--排序--插入

<!DOCTYPE html>

<html>

<head>

<title>TABLE排序</title>

</head>

<body>

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

window.οnlοad=function(){

var oTab=document.getElementById("tab1");

var oBtn=document.getElementById("btn1");

oBtn.οnclick=function(){

//定义一个空数组

var arr=[];

//将集合遍历给数组

for(var i=0;i<oTab.tBodies[0].rows.length;i++){

arr[i]=oTab.tBodies[0].rows[i];

}

//将获取的数组进行排序

arr.sort(function(a,b){

var n1=parseInt(a.cells[0].innerHTML);

var n2=parseInt(b.cells[0].innerHTML);

return n1-n2;

});

//将排序后的数组重新插入给自己

for(var j=0;j<arr.length;j++){

oTab.tBodies[0].appendChild(arr[j]);

}

</script>

</html>

表单应用

表单基础知识

什么是表单

向服务器提交数据，比如：用户注册

confirm 用于显示一个带有指定消息和确认及取消按钮的对话框

<!DOCTYPE html>

<html>

<head>

<title>confirm1</title>

</head>

<body>

<p>点击按钮，显示确认框。</p>

</body>

function btn(){

var x;

var r=confirm("按下按钮!");

alert(r);

if (r==true){

x="你按下了\"确定\"按钮!";

}else{

x="你按下了\"取消\"按钮!";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</html>

action 属性规定当提交表单时，向何处发送表单数据

表单事件

onsubmit 提交时触发

<!doctype html>

<html>

<head>

<title>onsubmit表单事件</title>

<style>

font-family:微软雅黑;

}

</style>

</head>

<body>

</form>

</body>

fidobj=document.getElementById("fid");

fidobj.οnsubmit=function(){

r=confirm("您确认提交表单吗?");

if(!r){

return false;

}

</script>

</html>

onreset 重置时触发

<!doctype html>

<html>

<head>

<title>onreset表单事件</title>

<style>

font-family:微软雅黑;

}

</style>

</head>

<body>

</form>

</body>

fidobj=document.getElementById("fid");

//onsubmit提交表单

fidobj.οnsubmit=function(){

r=confirm("您确认提交表单吗?");

if(!r){

return false;

}

//onreset重置表单

fidobj.οnreset=function(){

r=confirm("您确认清除表单数据吗?");

if(!r){

return false;

}

</script>

</html>

表单内容验证

必填项

<!DOCTYPE html>

<html>

<head>

<title>表单必填项内容为空提示</title>

</head>

<body>

姓: <input type="text" name="fname">

</form>

</body>

function validateForm(){

//获取内容值

var x=document.forms["myForm"]["fname"].value;

//判断内容是不是为空，为空则提示

if (x==null || x==""){

alert("姓必须填写");

return false;

}

</script>

</html>

阻止用户输入非法字符阻止事件

输入时、失去焦点时验证 onkeyup、onblur

提交时检查 onsubmit

*后台数据检查

JS运动基础

运动基础

运动基础

让DIV运动起来

速度--物体运动的快慢

运动中的Bug

不会停止

速度取某些值会无法停止

到达位置后再点击还会运动

重复点击速度加快

匀速运动

速度不变

<!DOCTYPE html>

<html>

<head>

<title>div运动</title>

<style>

#div1{width:200px;height:200px;background:red;position:absolute;top:50px;left:0px;}

</style>

</head>

<body>

</div>

</body>

var timer=null;

function startMove(){

var oDiv=document.getElementById("div1");

alert(oDiv.offsetLeft);//offsetLeft获取物体的左边距

//保证每次只运行一个定时器

clearInterval(timer);

//定义定时器执行运动

timer=setInterval(function(){

var speed=10;

//希望物体到一定位置停止

if(oDiv.offsetLeft>=300){

//停止定时器

clearInterval(timer);

}else{

//修改左间距实现物体向右运动

oDiv.style.left=oDiv.offsetLeft+speed+"px";

}

},30);

}

</script>

</html>

运动框架及应用

运动框架

在开始运动时，关闭已有的定时器

把运动和停止隔开(if/else)

运动框架实例

例子1：“分享到”侧边栏

通过目标点，计算速度值

<!DOCTYPE html>

<html>

<head>

<title>分享侧边栏</title>

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

</head>

<body>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

oDiv.οnmοuseοver=function(){

startMove(0);

}

oDiv.οnmοuseοut=function(){

startMove(-150);

}

var timer=null;

function startMove(iTarget){

var oDiv=document.getElementById("div1");

//alert(oDiv.offsetLeft);//offsetLeft用于获取当前对象到其上级层左边的距离

//关闭定时器，再执行定时器时保证当前无启动的定时器

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

}

</script>

</html>

例子2：淡入淡出的图片

用变量存储透明度

<!DOCTYPE html>

<html>

<head>

<title>分享侧边栏</title>

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

</head>

<body>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

oDiv.οnmοuseοver=function(){

startMove(0);

}

oDiv.οnmοuseοut=function(){

startMove(-150);

}

var timer=null;

function startMove(iTarget){

var oDiv=document.getElementById("div1");

//alert(oDiv.offsetLeft);//offsetLeft用于获取当前对象到其上级层左边的距离

//关闭定时器，再执行定时器时保证当前无启动的定时器

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

}

</script>

</html>

缓冲运动

缓冲运动

逐渐变慢，最后停止

距离越远速度越大

速度由距离决定

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

<!DOCTYPE html>

<html>

<head>

<style>

#div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:50px;}

#div2{width:1px;height:300px;position:absolute;left:300px;top:0px;background:black;}

</style>

</head>

<body>

</div>

</div>

</body>

function startMove(){

var oDiv=document.getElementById("div1");

setInterval(function(){

//随着边距变化速度跟着变化

var speed=(300-oDiv.offsetLeft)/10;

//向上取整

//speed=Math.ceil(speed);

//缓冲运动一定要取整数

speed=speed>0?Math.ceil(speed):Math.floor(speed);

oDiv.style.left=oDiv.offsetLeft+speed+"px";

document.title=oDiv.offsetLeft;

},30);

}

</script>

</html>

例子：缓冲菜单

Bug：速度取整

跟随页面滚动的缓冲侧边栏

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

<!DOCTYPE html>

<html>

<head>

<title>对联悬浮框</title>

<style>

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

</style>

</head>

</div>

</body>

window.οnscrοll=function(){

var oDiv=document.getElementById("div1");

//获取 scrollTop 方面的差异

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

//alert(scrollTop);

//top=可见区域高度-物体的上边距+滚动高度

//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{

oDiv.style.top=oDiv.offsetTop+speed+"px";

}

},30);

}

</script>

</html>

匀速运动的停止条件

运动终止条件

匀速运动：距离足够近

缓冲运动：两点重合

<!DOCTYPE html>

<html>

<head>

<title>匀速运动停止</title>

<style>

#div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:50px;}

#div2{width:1px;height:300px;position:absolute;left:300px;top:0px;background:black;}

#div3{width:1px;height:300px;position:absolute;left:100px;top:0px;background:black;}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

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;

}

//判断物体的距离小于等于7就算到了

if(Math.abs(iTarget-oDiv.offsetLeft)<=7){

clearInterval(timer);

//解决未到目标位置

oDiv.style.left=iTarget+"px";

}else{

oDiv.style.left=oDiv.offsetLeft+speed+"px";

}

},30);

}

</script>

</html>

JS运动应用

多物体运动框架

多个物体同时运动

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

单定时器，存在问题

每个DIV一个定时器

<!DOCTYPE html>

<html>

<head>

<title>多物体运动</title>

<style>

div{width:100px;height:100px;background:red;margin:10px;}

</style>

</head>

<body>

</body>

window.οnlοad=function(){

//获取相同标签的数量

var aDiv=document.getElementsByTagName("div");

//alert(aDiv.length);

//给相同的标签添加事件

for(var i=0;i<aDiv.length;i++){

aDiv[i].timer=null;

aDiv[i].οnmοuseοver=function(){

startMove(this,400);

}

aDiv[i].οnmοuseοut=function(){

startMove(this,100);

}

var timer=null;

//每个div设置一个定时器

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

}

</script>

</html>

多物体运动框架

定时器作为物体的属性

参数的传递：物体、目标值

例子：多个div淡入淡出

所有东西都不能公用

属性与运动对象绑定：速度、其他属性值(如透明度等)

<!DOCTYPE html>

<html>

<head>

<title>多物体淡入淡出</title>

<style>

div{width:100px;height:100px;margin:20px;float:left;background:red;filter:alpha(opacity:30);opacity:0.3;}

</style>

</head>

<body>

</body>

window.οnlοad=function(){

var aDiv=document.getElementsByTagName("div");

for(var i=0;i<aDiv.length;i++){

aDiv[i].alpha=30;

aDiv[i].οnmοuseοver=function(){

startMove(this,100);

}

aDiv[i].οnmοuseοut=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);

}

</script>

</html>

任意值运动框架

Offset属性的Bug

<!DOCTYPE html>

<html>

<head>

<title>offset的Bug</title>

<style>

#div1{height:200px;background:red;border:1px solid black;}

</style>

</head>

<body>

</body>

//获取行间样式

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}else{

return getComputedStyle(obj,null)[name];

}

setInterval(function(){

var oDiv=document.getElementById("div1");

//offsetWidth属性可以返回对象的padding+border+width属性值之和

//style.width返回值就是定义的width属性值

//oDiv.style.width=oDiv.offsetWidth-1+"px";

//oDiv.style.width获取非行间样式style，存在浏览器兼容

//oDiv.style.width=parseInt(oDiv.style.width)-1+"px";

//存在兼容问题，上面写法换成调用函数解决

oDiv.style.width=parseInt(getStyle(oDiv,"width"))-1+"px";

},30);

</script>

</html>

有边框的Div变宽

用currentStyle代替offset

<!DOCTYPE html>

<html>

<head>

<title>offset的Bug</title>

<style>

#div1{height:200px;background:red;border:1px solid black;}

</style>

</head>

<body>

</body>

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}else{

return getComputedStyle(obj,null)[name];

}

setInterval(function(){

var oDiv=document.getElementById("div1");

//offsetWidth属性可以返回对象的padding+border+width属性值之和

//style.width返回值就是定义的width属性值

//oDiv.style.width=oDiv.offsetWidth-1+"px";

//oDiv.style.width获取非行间样式style，存在浏览器兼容

//oDiv.style.width=parseInt(oDiv.style.width)-1+"px";

//存在兼容问题，上面写法换成调用函数解决

oDiv.style.width=parseInt(getStyle(oDiv,"width"))-1+"px";

},30);

</script>

</html>

原有运动框架的问题

只能让某个值运动起来

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

<!DOCTYPE html>

<html>

<head>

<title>多物体变高和变宽</title>

<style>

div{width:200px;height:200px;margin:20px;float:left;background:red;font-size:30px;}

</style>

</head>

<body>

</body>

window.οnlοad=function(){

var aDiv1=document.getElementById("div1");

aDiv1.οnmοuseοver=function(){

startMove(this,"height",400);

}

aDiv1.οnmοuseοut=function(){

startMove(this,"height",200);

}

var aDiv2=document.getElementById("div2");

aDiv2.οnmοuseοver=function(){

startMove(this,"width",400);

}

aDiv2.οnmοuseοut=function(){

startMove(this,"width",200);

}

var aDiv3=document.getElementById("div3");

aDiv3.οnmοuseοver=function(){

startMove(this,"font-size",100);

}

aDiv3.οnmοuseοut=function(){

startMove(this,"font-size",30);

}

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}else{

return getComputedStyle(obj,null)[name];

}

//定义div1变高

function startMove(obj,attr,iTarget){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var cur=parseInt(getStyle(obj,attr));

//解决offset问题，使用非行间

//var speed=(iTarget-obj.offsetHeight)/6;

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>

</html>

扩展的运动框架

运动属性作为参数

封装opacity

小数的问题

<!DOCTYPE html>

<html>

<head>

<title>任意值运动-透明度</title>

<style>

div{width:200px;height:200px;margin:20px;float:left;background:red;font-size:30px;alpha(opacity:30);opacity:0.3;}

</style>

</head>

<body>

</body>

window.οnlοad=function(){

var aDiv1=document.getElementById("div1");

aDiv1.οnmοuseοver=function(){

startMove(this,"opacity",400);

}

aDiv1.οnmοuseοut=function(){

startMove(this,"opacity",30);

}

//运动框架

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}else{

return getComputedStyle(obj,null)[name];

}

//定义div1变高

function startMove(obj,attr,iTarget){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

//透明度0.3是小数不适用parseInt

//var cur=parseInt(getStyle(obj,attr));

var cur=0;

//判断传入进来的是否是透明度

if(attr=="opacity"){

cur=Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

cur=parseInt(getStyle(obj,attr));

}

//解决offset问题，使用非行间

//var speed=(iTarget-obj.offsetHeight)/6;

var speed=(iTarget-cur)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur==iTarget){

clearInterval(obj.timer);

}else{

//opacity是没有px的，解决如下

//obj.style[attr]=cur+speed+"px";

//处理属性也判断一下是否是透明度

if(attr=="opacity"){

obj.style[attr]=cur+speed;

//给IE浏览器用的

obj.style.filter="alpha(opacity:"+(cur+speed)+")";

//给火狐等其他浏览器用的

obj.style.opacity=(cur+speed)/100;

}else{

obj.style[attr]=cur+speed+"px";

}

},30);

}

</script>

</html>

仿Flash图片展示

效果思路

两边的按钮--淡入淡出

大图下拉--层级、高度变化

下方的li--多物体淡入淡出

下方的Ul--位置计算

左右按钮

淡入淡出

鼠标移到按钮上，按钮会消失

层级问题

按钮和遮罩上都得加上事件

下方Li效果

点击切换大图--选项卡

Li淡入淡出--移入移出

Ul移动--位置计算

大图片切换

图片层级--zIndex一直加1

图片下拉效果(运动框架)

可以改为淡入淡出

加入自动播放

和选项卡一样

<!DOCTYPE html>

<html>

<head>

<style>

</style>

</head>

<body>

</ul>

<ul>

</div>

</body>

function getByClass(oParent,sClass){

var aEle=oParent.getElementsByTagName("*");

alert(aEle);

var aResult=[];

for(var i=0;i<aElse.lenght;i++){

if(aEle[i].className==sClass){

aResult.push(aEle[i]);

}

return aResult;

}

window.οnlοad=function(){

var oDiv=document.getElementById("playimages");

var oBtnPrev=getByClass(oDiv,"prev")[0];

var oBtnNext=getByClass(oDiv,"next")[0];

var oMarkLeft=getByClass(oDiv,"mark_left")[0];

var oMarkRight=getByClass(oDiv,"mark_right")[0];

var oDivSmall=getByClass(oDiv,"small_pic")[0];

var oUlSmall=oDivSmall.getElementsByTagName("ul")[0];

var aLiSmall=oDivSmall.getElementsByTagName("li");

var oUlBig=getByClass(oDIV,"big_pic")[0];

var aLiBig=oUlBing.getElementsByTagName("li");

var nowZIndex=2;

var now=0;

oUlSmall.style.width=aLiSmall.lenght*aLiSmall[0].offsetWidth+"px";

//左右按钮

oBtnPrev.οnmοuseοver=oMarkLeft.οnmοuseοver=function(){

startMove(oBtnPrev,"opacity",100);

}

oBtnPrev.οnmοuseοver=oMarkLeft.οnmοuseοut=function(){

startMove(oBtnPrev,"opacity",0);

}

oBtnNext.οnmοuseοver=oMarkRight.οnmοuseοver=function(){

startMove(oBtnPrev,"opacity",100);

}

oBtnNext.οnmοuseοver=oMarkRight.οnmοuseοut=function(){

startMove(oBtnPrev,"opacity",0);

}

//大图切换

for(var i=0;i<aLiSmall.lenght;i++){

aLiSmall[i].index=i;

aLiSmall[i].οnclick=function(){

if(this.index==now)return;

now=this.index;

tab();

}

aLiSmall[i].οnmοuseοver=function(){

startMove(this,"opacity",100);

}

aLiSmall[i].οnmοuseοut=function(){

if(this.index!=now){

startMove(this,"opacity",60);

}

function tab(){

aLiBig[now].style.zIndex=nowZIndex++;

for(var i+0;i<aLiSmall.length;i++){

startMove(aLiSmall[i],"opacity",60);

}

startMove(aLiSmall[now],"opacity",100);

aLiBig[now].style.height=0;

startMove(aLiBig[aLiSmall[now]],"height",320);

if(now==0){

startMove(oUlSmall,"left",0);

}else if(now==aLiSmall.lenght-1){

startMove(oUlSmall,"left",-(now-2)*aLiSmall[0].offsetWidth);

}else{

startMove(oUlSmall,"left",-(now-1)*aLiSmall[0].offsetWidth);

}

oBtnPrev.οnclick=function(){

now--;

if(now==-1){

now=aLiSmall.lenght-1;

}

oBtnNext.οnclick=function(){

now++;

if(now==aLiSmall.length){

now=0;

}

tab();

}

var timer=setInterval(oBtnPrev.onclick,2000);

oDiv.οnmοuseοver=function(){

clearInterval(timer);

}

oDiv.οnmοuseοut=function(){

timer=setInterval(oBtnPrev.onclick,2000);

}

</script>

</html>

JS运动中级

链式运动框架

回调函数

运动停止时，执行函数

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

<!DOCTYPE html>

<html>

<head>

<style>

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

</style>

</head>

<body>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

oDiv.οnmοuseοver=function(){

startMove(oDiv,"width",300,function(){

startMove(oDiv,"height",300,function(){

startMove(oDiv,"opacity",100);

});

}

oDiv.οnmοuseοut=function(){

startMove(oDiv,"opacity",30,function(){

startMove(oDiv,"height",100,function(){

startMove(oDiv,"width",100);

});

}

</script>

</html>

例子：土豆网右下角菜单

完美运动框架

多个值同时变化

setStyle同时设置多个属性

参数传递

Json的使用

for in遍历属性

//完美运动框架

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}else{

return getComputedStyle(obj,false)[name];

}

function startMove(obj,attr,iTarget,fnEnd){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

//透明度0.3是小数不适用parseInt

//var cur=parseInt(getStyle(obj,attr));

var cur=0;

//判断传入进来的是否是透明度

if(attr=="opacity"){

cur=Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

cur=parseInt(getStyle(obj,attr));

}

//解决offset问题，使用非行间

//var speed=(iTarget-obj.offsetHeight)/6;

var speed=(iTarget-cur)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur==iTarget){

clearInterval(obj.timer);

if(fnEnd)fnEnd();

}else{

//opacity是没有px的，解决如下

//obj.style[attr]=cur+speed+"px";

//处理属性也判断一下是否是透明度

if(attr=="opacity"){

obj.style[attr]=cur+speed;

//给IE浏览器用的

obj.style.filter="alpha(opacity:"+(cur+speed)+")";

//给火狐等其他浏览器用的

obj.style.opacity=(cur+speed)/100;

}else{

obj.style[attr]=cur+speed+"px";

}

},30);

}

function startMove(obj,json,fnEnd){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var bStop=true;//假设所有的值已经到了

for(var attr in json){

//透明度0.3是小数不适用parseInt

//var cur=parseInt(getStyle(obj,attr));

var cur=0;

//判断传入进来的是否是透明度

if(attr=="opacity"){

cur=Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

cur=parseInt(getStyle(obj,attr));

}

//解决offset问题，使用非行间

var speed=(json[attr]-cur)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur!=json[attr]){

bStop=false;

}

//opacity是没有px的，解决如下

//obj.style[attr]=cur+speed+"px";

//处理属性也判断一下是否是透明度

if(attr=="opacity"){

obj.style[attr]=cur+speed;

//给IE浏览器用的

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

}

运用到运动框架

检测运动停止

标志变量

例子：伸缩同时淡入淡出的菜单

<!DOCTYPE html>

<html>

<head>

<title>完美运动框架</title>

<style>

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

</style>

</head>

<body>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

oDiv.οnmοuseοver=function(){

startMove(oDiv,{width:110,height:300,opacity:100});

}

oDiv.οnmοuseοut=function(){

startMove(oDiv,{width:100,height:100,opacity:30});

}

</script>

</html>

运动框架总结

运动框架演变过程

startMove(iTarget) 运动框架

startMove(obj,iTarget) 多物体

startMove(obj,attr,iTarget)任意值

startMove(obj,attr,iTarget,fn)链式运动

startMove(obj,json) 多值运动

startMove(obj,json,fn) 完美运动框架

运动框架应用

运动框架应用

例子：幻灯片

<!DOCTYPE html>

<html>

<head>

<title>完美运动框架</title>

<style>

</style>

</head>

<body>

<ol>

</ol>

<ul>

</ul>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("play");

var aBtn=oDiv.getElementsByTagName("ol")[0].getElementsByTagName("li");

var oUl=oDiv.getElementsByTagName("ul")[0];

var now=0;

for(var i=0;i<aBtn.length;i++){

aBtn[i].index=i;

aBtn[i].οnclick=function(){

now=this.index;

tab();

}

function tab(){

for(var j=0;j<aBtn.length;j++){

aBtn[i].className="";

}

aBtn[now].className="active";

//oUl.style.top=-150*this.index+"px";

startMove(oUl,{top:-150*now});

}

function next(){

now++;

if(now==aBtn.length){

now=0;

}

tab();

}

var timer=setInterval(next,2000);

oDiv.οnmοuseοver=function (){

clearInterval(timer);

}

oDiv.οnmοuseοut=function(){

timer=setInterval(next,2000);

}

</script>

</html>

例子：新浪微博

链式运动

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

</ul>

</body>

window.οnlοad=function(){

var oBtn=document.getElementById("btn1");

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

var oTxt=document.getElementById("txt1");

oBtn.οnclick=function(){

//createElement创建一个节点

var oLi=document.createElement("li");

oLi.innerHTML=oTxt.value;

oTxt.value="";

//oUl.appendChild(oLi);将创建的节点追加到指定位置

if(oUl.children.length>0){

//insertBefore(节点，原有节点)在已有的子节点前插入一个新的子节点

oUl.insertBefore(oLi,oUl.children[0]);

}else{

oUl.appendChild(oLi);

}

//运动

var iHeight=oLi.offsetHeight;

//alert(iHeight);

oLi.style.height="0";

//高度展开后opacity为100

startMove(oLi,{height:iHeight},function(){

startMove(oLi,{opacity:100});

});

}

</script>

</html>

JS事件基础

Event对象和事件冒泡

什么是event对象

用来获取事件的详细信息：鼠标位置、键盘按键

例子：获取鼠标位置：clientX

Document的本质：document.childNodes[0].tagName

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

var oEvent=ev||event;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

window.οnlοad=function(){

//document代表的是页面

document.οnclick=function(ev){

//event存在浏览器兼容问题

//IE

//alert(event.clientX+","+event.clientY);

//火狐

//alert(ev.clientX+","+ev.clientY);

//解决兼容问题

var oEvent=ev||event;

alert(oEvent.clientX+","+oEvent.clientY);

}

</script>

</html>

事件流

事件冒泡

取消冒泡：oEvent.cancelBubble=true

例子：仿select控制

<!DOCTYPE html>

<html>

<head>

<title>仿select控制</title>

<style>

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

</style>

</head>

<body >

</body>

window.οnlοad=function(){

var oBtn=document.getElementById("btn1");

var oDiv=document.getElementById("div1");

oBtn.οnclick=function(ev){

var oEvent=ev||event;

oDiv.style.display="block";

//alert("按钮被点击了");

//取消冒泡事件

oEvent.cancelBubble=true;

}

document.οnclick=function(){

oDiv.style.display="none";

//alert("document被点击了");

}

</script>

</html>

鼠标事件

鼠标位置

可视区位置：clientX、clientY

例子1：跟随鼠标的Div

消除滚动条的影响

滚动条的意义--可视区与页面顶部的距离

<!doctype html>

<html>

<head>

<title>onmousemove鼠标移动事件</title>

<style>

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

</style>

</head>

<body>

</body>

document.οnmοusemοve=function(ev){

var oEvent=ev||event;

var oDiv=document.getElementById("div1");

//鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条

//oDiv.style.left=oEvent.clientX+"px";

//oDiv.style.top=oEvent.clientY+"px";

var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

oDiv.style.left=oEvent.clientX+scrollLeft+"px";

oDiv.style.top=oEvent.clientY+scrollTop+"px";

}

</script>

</html>

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

封装函数

<!doctype html>

<html>

<head>

<title>onmousemove鼠标移动事件</title>

<style>

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

</style>

</head>

<body>

</body>

//封装成函数

function getPos(ev){

var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};

}

document.οnmοusemοve=function(ev){

var oEvent=ev||event;

var oDiv=document.getElementById("div1");

//鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条

//oDiv.style.left=oEvent.clientX+"px";

//oDiv.style.top=oEvent.clientY+"px";

//var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

//var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var pos=getPos(oEvent);

//oDiv.style.left=oEvent.clientX+scrollLeft+"px";

//oDiv.style.top=oEvent.clientY+scrollTop+"px";

oDiv.style.left=pos.x+"px";

oDiv.style.top=pos.y+"px";

}

</script>

</html>

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

<!doctype html>

<html>

<head>

<title>一串跟随鼠标的Div</title>

<style>

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

</style>

</head>

<body>

</body>

//封装成函数

function getPos(ev){

var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};

}

document.οnmοusemοve=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";

}

</script>

</html>

键盘事件

keyCode(兼容性写法)

获取用户按下键盘的哪个按钮

var x=oEvent.which||oEvent.keyCode;

<!doctype html>

<html>

<head>

<title>一串跟随鼠标的Div</title>

<style>

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

</style>

</head>

<body>

</body>

//封装成函数

function getPos(ev){

var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};

}

document.οnmοusemοve=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";

}

</script>

</html>

例子：键盘控制Div移动

<!doctype html>

<html>

<head>

<title>键盘控制移动</title>

<style>

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

</style>

</head>

<body>

</div>

</body>

document.οnkeydοwn=function(ev){

var oEvent=ev||event;

var oDiv=document.getElementById("div1");

var x=oEvent.which||oEvent.keyCode;

//左37右39上38下40

if(x==37){

oDiv.style.left=oDiv.offsetLeft-10+"px";

}else if(x==39){

oDiv.style.left=oDiv.offsetLeft+10+"px";

}else if(x==38){

oDiv.style.top=oDiv.offsetTop-10+"px";

}else if(x==40){

oDiv.style.top=oDiv.offsetTop+10+"px";

}

</script>

</html>

其他属性

ctrlKey、shiftKey、altKey

例子：提交留言

<!doctype html>

<html>

<head>

<style>

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

</style>

</head>

<body>

</body>

window.οnlοad=function(){

var oTxt1=document.getElementById("txt1");

var oTxt2=document.getElementById("txt2");

var oBtn=document.getElementById("btn1");

oBtn.οnclick=function(){

oTxt2.value +=oTxt1.value+"\n";

oTxt1.value="";

}

</script>

</html>

回车提交

<!doctype html>

<html>

<head>

<style>

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

</style>

</head>

<body>

</body>

window.οnlοad=function(){

var oTxt1=document.getElementById("txt1");

var oTxt2=document.getElementById("txt2");

oTxt1.οnkeydοwn=function(ev){

var oEvent=ev||event;

var x=oEvent.which||oEvent.keyCode;

if(x==13){

oTxt2.value +=oTxt1.value+"\n";

oTxt1.value="";

}

</script>

</html>

ctrl+回车提交

<!doctype html>

<html>

<head>

<style>

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

</style>

</head>

<body>

<p>同时按下回车键和ctrl提交</p>

</body>

window.οnlοad=function(){

var oTxt1=document.getElementById("txt1");

var oTxt2=document.getElementById("txt2");

oTxt1.οnkeydοwn=function(ev){

var oEvent=ev||event;

var x=oEvent.which||oEvent.keyCode;

//判断同时按下回车键和ctrl键后执行

if(x==13 && oEvent.ctrlKey){

oTxt2.value +=oTxt1.value+"\n";

oTxt1.value="";

}

</script>

</html>

JS事件中级

默认行为

默认行为

什么是默认行为

阻止默认行为

普通写法：return false；

<!doctype html>

<html>

<head>

<title>oncontextmenu</title>

</head>

<body>

</body>

//oncontextmenu在元素中用户右击鼠标时触发并打开上下文菜单

document.οncοntextmenu=function(){

return false;

}

</script>

</html>

例子1.屏蔽右键菜单

弹出自定义右键菜单

<!doctype html>

<html>

<head>

<style>

*{margin:0;padding:0;list-style:none;}

#div1{position:absolute;width:80px;background:#ccc;border:1px solid black;display:none;}

</style>

</head>

<body>

<ul>

</ul>

<div>

</body>

document.οncοntextmenu=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.οnclick=function(){

var oDiv=document.getElementById("div1");

oDiv.style.display="none";

}

</script>

</html>

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

keydown、keyup事件的区别

<!doctype html>

<html>

<head>

<title>只能输入数字的输入框1</title>

</head>

<body>

</body>

window.οnlοad=function(){

var oTxt=document.getElementById("txt1");

oTxt.οnkeydοwn=function(ev){

var oEvent=ev||event;

//获取数字键的unicode

//alert(oEvent.keyCode);

//0- 48,9- 57,0- 96,9- 105

//处理非数字键输入，并且可以backspace键

if(oEvent.keyCode!=8 && (oEvent.keyCode<96||oEvent.keyCode>105)){

return false;

}

</script>

</html>

拖拽

简单拖拽

拖拽原理

距离不变

三个事件

靠谱拖拽

原有拖拽的问题

直接给document加事件

FF下，空Div拖拽BUG

阻止默认事件

<!doctype html>

<html>

<head>

<style>

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

</style>

</head>

<body>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var disX=0;

var disY=0;

//定义鼠标按下后事件

oDiv.οnmοusedοwn=function(ev){

var oEvent=ev||event;

//鼠标的X位置减去div的左边距离位置

disX=oEvent.clientX-oDiv.offsetLeft;

//鼠标的Y位置减去div的上边距离位置

disY=oEvent.clientY-oDiv.offsetTop;

//定义document移动事件，原因鼠标在还没有松开时离开div里面就停止了，所有使用document获取onmousemove事件

document.οnmοusemοve=function(ev){

var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+"px";

oDiv.style.top=oEvent.clientY-disY+"px";

}

//定义document松开事件，原因鼠标在没有松开时跑到了顶部时松开了事件，所有使用document获取松开事件

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

//阻止默认事件

return false;

}

</script>

</html>

防止拖出页面

修正位置

<!doctype html>

<html>

<head>

<style>

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

</style>

</head>

<body>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var disX=0;

var disY=0;

//定义鼠标按下后事件

oDiv.οnmοusedοwn=function(ev){

var oEvent=ev||event;

//鼠标的X位置减去div的左边距离位置

disX=oEvent.clientX-oDiv.offsetLeft;

//鼠标的Y位置减去div的上边距离位置

disY=oEvent.clientY-oDiv.offsetTop;

//定义document移动事件，原因鼠标在还没有松开时离开div里面就停止了，所有使用document获取onmousemove事件

document.οnmοusemοve=function(ev){

var oEvent=ev||event;

var l=oEvent.clientX-disX;

var t=oEvent.clientY-disY;

if(l<0){

l=0;

}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){

//浏览器的宽减去div的宽

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

if(t<0){

t=0;

}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){

//浏览器的高减去div的高

t=document.documentElement.clientHeight-oDiv.offsetHeight;

}

oDiv.style.left=l+"px";

oDiv.style.top=t+"px";

}

//定义document松开事件，原因鼠标在没有松开时跑到了顶部时松开了事件，所有使用document获取松开事件

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

//阻止默认事件

return false;

}

</script>

</html>

JS事件高级应用

事件绑定

事件绑定

IE方式

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

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

DOM方式

addEventListener(事件名称，函数，捕获)

removeEventListener(事件名称，函数，捕获)

何时使用事件绑定

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

//创建封装函数

function myAddEvent(obj,ev,fn){

if(obj.attachEvent){

obj.attachEvent("on"+ev,fn);

}else{

obj.addEventListener(ev,fn,false);

}

window.οnlοad=function (){

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

/*解决浏览器兼用

attachEvent(事件名，函数)支持IE，addEventListener(事件名, 函数, false)，支持火狐

封装成函数，方便调用

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

}*/

myAddEvent(oBtn,"click",function(){alert("a");});

myAddEvent(oBtn,"click",function(){alert("b");});

};

</script>

</html>

绑定事件和this

绑定匿名函数，会无法删除

高级拖拽

复习拖拽原理

距离不变

三个事件：down、move、up

限制范围

对位置进行判断

例子1：不能拖出窗口的DIV

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

<!doctype html>

<html>

<head>

<style>

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

#div2{position:relative;width:400px;height:300px;background:#ccc;}

</style>

</head>

<body>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var oDiv2=document.getElementById("div2");

var disX=0;

var disY=0;

//定义鼠标按下后事件

oDiv.οnmοusedοwn=function(ev){

var oEvent=ev||event;

//鼠标的X位置减去div的左边距离位置

disX=oEvent.clientX-oDiv.offsetLeft;

//鼠标的Y位置减去div的上边距离位置

disY=oEvent.clientY-oDiv.offsetTop;

//定义document移动事件，原因鼠标在还没有松开时离开div里面就停止了，所有使用document获取onmousemove事件

document.οnmοusemοve=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){

//div2的宽减去div的宽

l=oDiv2.offsetWidth-oDiv.offsetWidth;

}

if(t<0){

t=0;

}else if(t>oDiv2.offsetHeight-oDiv.offsetHeight){

//div2的高减去div的高

t=oDiv2.offsetHeight-oDiv.offsetHeight;

}

oDiv.style.left=l+"px";

oDiv.style.top=t+"px";

}

//定义document松开事件，原因鼠标在没有松开时跑到了顶部时松开了事件，所有使用document获取松开事件

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

//阻止默认事件

return false;

}

</script>

</html>

磁性吸附

<!doctype html>

<html>

<head>

<title>拖拽磁性吸附</title>

<style>

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

#div2{position:relative;width:500px;height:500px;background:#ccc;}

</style>

</head>

<body>

</div>

</body>

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var oDiv2=document.getElementById("div2");

var disX=0;

var disY=0;

//定义鼠标按下后事件

oDiv.οnmοusedοwn=function(ev){

var oEvent=ev||event;

//鼠标的X位置减去div的左边距离位置

disX=oEvent.clientX-oDiv.offsetLeft;

//鼠标的Y位置减去div的上边距离位置

disY=oEvent.clientY-oDiv.offsetTop;

//定义document移动事件，原因鼠标在还没有松开时离开div里面就停止了，所有使用document获取onmousemove事件

document.οnmοusemοve=function(ev){

var oEvent=ev||event;

var l=oEvent.clientX-disX;

var t=oEvent.clientY-disY;

if(l<50){

l=0;

}else if(l>oDiv2.offsetWidth-oDiv.offsetWidth){

//div2的宽减去div的宽

l=oDiv2.offsetWidth-oDiv.offsetWidth;

}

if(t<50){

t=0;

}else if(t>oDiv2.offsetHeight-oDiv.offsetHeight){

//div2的高减去div的高

t=oDiv2.offsetHeight-oDiv.offsetHeight;

}

oDiv.style.left=l+"px";

oDiv.style.top=t+"px";

}

//定义document松开事件，原因鼠标在没有松开时跑到了顶部时松开了事件，所有使用document获取松开事件

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

//阻止默认事件

return false;

}

</script>

</html>

图片拖拽

阻止默认事件

文字选中

阻止默认事件

IE下拖动有问题

事件捕获

setCapture函数的作用就是将后续的mouse事件都发送给这个对象

releaseCapture就是将鼠标事件还回去

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

<style>

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

</style>

</head>

<body>

asdfasdfsdf<br>

dfasfasdfasd

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

dfasfasdfasd</div>

asdfasdfsdf<br>

dfasfasdfasd

</body>

window.οnlοad=function (){

var oDiv=document.getElementById('div1');

var disX=0;

var disY=0;

oDiv.οnmοusedοwn=function(ev){

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

if(oDiv.setCapture){

//IE

oDiv.οnmοusemοve=mouseMove;

oDiv.οnmοuseup=mouseUp;

oDiv.setCapture();

}else{

//Chrome、FF

document.οnmοusemοve=mouseMove;

document.οnmοuseup=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.οnmοusemοve=null;

this.οnmοuseup=null;

if(oDiv.releaseCapture){

oDiv.releaseCapture();

}

return false; //chrome、ff、IE9

};

</script>

</html>

与DOM配合

带框的拖拽

保留原有位置的拖拽

<!DOCTYPE HTML>

<html>

<head>

<style>

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

.box {border:1px dashed black; position:absolute;}

</style>

</head>

<body>

</body>

window.οnlοad=function (){

var oDiv=document.getElementById('div1');

var disX=0;

var disY=0;

oDiv.οnmοusedοwn=function (ev){

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

//创建div元素

var oBox=document.createElement('div');

//给div添加name

oBox.className='box';

//给div添加style

oBox.style.width=oDiv.offsetWidth-2+'px';

oBox.style.height=oDiv.offsetHeight-2+'px';

//设置div设置位置

oBox.style.left=oDiv.offsetLeft+'px';

oBox.style.top=oDiv.offsetTop+'px';

//将创建的div插入到body下面

document.body.appendChild(oBox);

document.οnmοusemοve=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.οnmοuseup=function (){

document.οnmοusemοve=null;

document.οnmοuseup=null;

oDiv.style.left=oBox.offsetLeft+'px';

oDiv.style.top=oBox.offsetTop+'px';

//松开鼠标移出div

document.body.removeChild(oBox);

};

return false;//chrome、ff、IE9阻止浏览器默认行为

};

</script>

</html>

自定义滚动条

拖拽

只有横向拖拽

限制范围--范围的大小

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

控制其他对象

例子1：控制物体的大小

<!DOCTYPE HTML>

<html>

<head>

<title>自定义滚动条2</title>

<style>

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

</style>

</head>

<body>

</div>

</body>

window.οnlοad=function (){

var oDiv=document.getElementById('div1');

var oDiv2=document.getElementById('div2');

var oParent=document.getElementById('parent');

var disX=0;

oDiv.οnmοusedοwn=function (ev){

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

document.οnmοusemοve=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.οnmοuseup=function (){

document.οnmοusemοve=null;

document.οnmοuseup=null;

};

return false;//chrome、ff、IE9

};

</script>

</html>

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

<!DOCTYPE HTML>

<html>

<head>

<title>自定义滚动条3</title>

<style>

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

</style>

</head>

<body>

</div>

</body>

window.οnlοad=function (){

var oDiv=document.getElementById('div1');

var oDiv2=document.getElementById('div2');

var oParent=document.getElementById('parent');

var disX=0;

oDiv.οnmοusedοwn=function (ev){

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

document.οnmοusemοve=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.οnmοuseup=function (){

document.οnmοusemοve=null;

document.οnmοuseup=null;

};

return false;//chrome、ff、IE9

};

</script>

</html>

例子3：控制文字滚动

<!DOCTYPE HTML>

<html>

<head>

<title>自定义滚动条</title>

<style>

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

</style>

</head>

<body>

</div>

第一部分: 入门课程、了解JavaScript - 案例+知识点，夯实基础做足准备

* 限于篇幅，大纲只列出部分课上内容和小部分案例

第1课初识JavaScript

JS是什么：大型网站应用效果分析

JS编写流程：布局、样式、编写代码、测试

JS中的事件：onclick、onmouseover等

getElementById获取元素

用style修改样式

例子：百度首页下拉列表>>查看

例子：网站弹出层>>查看

合并相似代码

函数的写法、作用

变量的使用

className的使用，JS属性和HTML属性

例子：淘宝网下拉菜单+CSS3简单应用>>查看

if判断：根据情况，执行不同程序

例子：收缩展开菜单>>查看

本课总结：常见JS问题

本课练习

第2课 Javascript入门基础

JS函数传参：怎么传、传什么、哪里用

传多个参数

JS中操作属性的第二种方式

style和className的区别和冲突

提取行间事件：行为、样式、结构三者分离

获取元素的第二种方法：getElementsByTagName

数组的使用

循环：while循环、自增、for循环

例子：邮箱常见的全选、反选效果>>查看

JS基础效果：选项卡>>查看

利用索引值，关联多组元素

另一种选项卡：innerHTML的使用>>查看

本课总结：循环变量陷阱

本课练习

申请免费试听我要报名学习

第二部分: 基础课程、灵活运用 - 超过100个实用交互课堂演示实例

* 限于篇幅，大纲只列出部分课上内容和小部分案例

第3课 Javascript基础知识

JS能做什么、JS不能做什么

JS组成和功能：DOM、BOM、ECMA

JS中的变量类型：typeof，常见变量类型

什么是object类型

变量类型转换：为什么转换、什么时候转换

parseInt、parseFloat、Number

例子：JS实现的简易计算器>>查看

NaN的作用和检测，什么时候会因为NaN出问题

显式类型转换和隐式类型转换

变量作用域，闭包的简单理解

JS中的命名规范，各种常见前缀的使用

JS中的运算符

取模操作的简单应用：隔行变色、简易秒表>>查看

赋值、比较、逻辑运算符

运算优先级，括号的使用

例子：字符串连接的优先级陷阱

JS中的流程控制：判断、跳出

什么是真，什么是假：JS中变量的“真假”

本课总结

本课练习

第4课 JavaScript中的定时器

定时器基础：什么是定时器

两种定时器的区别

定时器和循环的区别和转换

定时器的开启和关闭

例子：秒表和延时隐藏>>查看

定时器应用例子：简易数码时钟（文字版、图片版、CSS3版）>>查看

Date对象的使用，日期和时间的获取

函数返回值、charAt方法的使用

定时器应用例子：QQ资料框（延时隐藏、事件合并）>>查看

定时器应用例子：自动播放的选项卡（计数、越界、暂停）>>查看

本课总结

本课练习

第5课 JS深入、数组、字符串

arguments的使用

数据类型的使用：参数、变量、返回值

currentStyle、getComputedStyle

JS中兼容问题的处理、工具函数的封装

Json基础：什么是json，用在什么地方

Json和数组的区别

用for in进行Json循环

字符串方法：substring、分割、比较、大小写

字符串和字符编码的转换

数组基础：定义、属性、类型

数组方法：添加、删除、替换

数组的排序、拼接和转换

比较函数的原理和使用

本课总结：循环变量陷阱

本课练习

第6课 DOM、BOM

DOM节点：子节点、父节点、兄弟节点

结构父节点和定位父节点

两种子节点属性的区别

第三种选择元素的方式——getByClass

节点的创建：createElement的使用

节点的插入：appendChild、insertBefore

节点的删除：removeChild

节点的替换：replaceChild

例子：简易JS留言板（无后台版）>>查看

例子：邮箱附件的上传和删除>>查看

innerHTML的Bug

BOM基础：窗体操作（open、close）

操作子窗体的内容

关闭窗体的提示问题

常用的BOM属性、浏览器类型测试

例子：腾讯图片hash页码的获取和设置>>查看

可视区的含义和尺寸、滚动距离

BOM常用事件：onscroll、onresize、IE6检测

例子：侧边栏悬浮广告及兼容处理>>查看

本课总结：循环变量陷阱

本课练习

第7课 Ajax基础

服务器客户端交互过程解析

搭建自己的服务器环境：wamp安装与配置

什么是Ajax：无刷新数据读取，用途

异步与同步的区别

如何使用Ajax：静态文件、动态文件、数据文件

例子：通过Ajax与后台交互的留言板>>查看

字符集、编码、数据格式、串联化数据

什么缓存、如何消除缓存

GET、POST方式的区别和用途

结果文件的解析，与DOM配合

Ajax原理：创建Ajax对象、与服务器交互、事件和属性

Ajax跨域的原理和应用

本课总结

本课练习

第8课 Ajax应用

Ajax常用工具函数的编写：数据封装、数据解析、错误处理

例子：Ajax用户注册和登陆>>查看

用Jsonp跨域：原理、过程、错误处理、问题

例子：Jsonp配合后台中转实现百度下拉搜索提示>>查看

大型Ajax应用的编写：请求管理和自定义消息

例子：完整的留言板效果（页码、顶踩等功能）>>查看

例子：通过Ajax与后台交互的留言板>>查看

本课总结

本课练习

申请免费试听我要报名学习

第三部分: 中级课程、渐入佳境 - 超过40个大型交互课堂演示实例

第9课 JS事件基础

JS中的常用事件

什么是Event对象

Event对象的兼容性处理

第二种处理JS兼容性问题的方法

例子：跟随鼠标的JS提示框>>查看

事件流，冒泡和捕获，阻止冒泡

例子：仿Select控件>>查看

鼠标事件：client属性的使用、滚动条的影响

封装鼠标位置工具函数

键盘事件：keyCode的使用

例子：键盘控制Div的移动>>查看

键盘事件的其他属性，定义web上的快捷键

例子：Ctrl+Enter提交留言>>查看

事件的默认行为、阻止默认事件

例子：自定义右键菜单>>查看

例子：简易表单校验（完整版见正则）>>查看

原生JS编写拖拽：原理、事件、问题

例子：拖拽拼图>>查看

本课总结

本课练习

第10课 JS事件应用

事件绑定，工具函数封装

this的四种常见“错法”

删除不掉的匿名函数，function的本质

完美拖拽

例子：仿百度地图拖拽>>查看

setCapture的功能和用法

拖拽的封装和重用

拖拽高级功能：限制范围、磁性吸附

碰撞检测：九宫格法、拖拽中的碰撞检测

例子：拖拽删除元素（回收站）>>查看

拖拽与DOM配合（仿桌面应用）

例子：仿QZone拖拽改变板块位置>>查看

拖拽改变Div大小

例子：完整的windows窗口（大小、位置、最小化等）>>查看

原生JS实现自定义滚动条

例子：用滚动条控制页面元素——大小、透明度、颜色>>查看

鼠标滚轮事件：事件、属性、兼容

鼠标滚轮和自定义滚动条配合

例子：仿优酷推荐视频效果>>查看

cookie基础：用途、特性、限制

例子：记住用户名（使用智能社的cookie库）>>查看

例子：仿许愿墙效果>>查看

编写cookie库：获取、设置、删除

封装cookie工具函数

Date对象的另类用法

本课总结

本课练习

第11课 JS运动动画基础

运动基础、原理

运动速度控制

定时器管理

例子：jia this“分享到”侧边栏>>查看

例子：淡入淡出图片>>查看

缓冲运动：原理、问题

例子：跟随窗口滑动的小窗口>>查看

多物体同时运动：多定时器管理

例子：滑动二级菜单>>查看

多物体运动框架：参数、属性

例子：图片幻灯片>>查看

offset属性的Bug

扩展运动框架

浮点数的Bug

例子：淘宝滑动焦点图>>查看

例子：手风琴焦点图>>查看

本课总结

本课练习

第12课 JS运动动画中级

链式运动框架：运动队列

函数接口

例子：土豆网联动悬浮菜单>>查看

例子：仿新浪微博最新消息>>查看

完美运动框架：参数的传递、运动停止的检测

例子：伸缩同时淡入淡出的菜单>>查看

运动框架演变过程分析

布局转换、层级控制

例子：多图片展开效果>>查看

图片预加载、img常用事件

Image对象的使用

本课总结

本课练习

第13课正则表达式

传统字符串操作总结

什么是正则表达式

正则表达式相比传统字符串操作的优势

RegExp对象的创建：JS风格、perl风格

search配合正则、i选项的使用

match所有匹配子字符串、g选项的使用

量词基础：+

replace配合正则

例子：论坛关键词过滤>>查看

字符类：任意、范围、排除、组合

例子：模拟爬虫抓取>>查看

元字符、元字符转义

各种量词的使用：数量、任意、选择

表单校验实例：邮箱、中文、QQ号等>>查看

完美版getByClass

单词边界的使用

本课总结

本课练习

第14课 JS面向对象基础

什么是面向对象：概念、特点

面向对象的用途：重用、继承

面向对象思想：接口、方法

JS中的对象组成

this的本质

为对象添加属性和方法

工厂方式构建对象

new的本质和用法

什么是原型（prototype）

原型的用法、问题

混合的面向对象编写方式

面向对象中的命名规范

实例：面向对象的选项卡

如何编写面向对象的程序

对象和闭包

本课总

本课练习

申请免费试听我要报名学习

第四部分: 提高课程、增强工作能力 - 超过40个大型交互课堂演示实例

</div>

</body>

window.οnlοad=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.οnmοusedοwn=function (ev){

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

document.οnmοusemοve=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.οnmοuseup=function (){

document.οnmοusemοve=null;

document.οnmοuseup=null;

};

return false; //chrome、ff、IE9

};

</script>

</html>

AJAX基础

什么是服务器

网页浏览过程分析

如何配置自己的服务器程序(AMP)

什么是Ajax

AJAX 不是新的编程语言，而是一种使用现有标准的新方法

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行

无刷新数据读取

用户注册、在线聊天室

异步、同步

使用Ajax

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

字符集编码

缓存、阻止缓存

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

window.οnlοad=function ()

{

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

oBtn.οnclick=function ()

{//?t=new Date().getTime()去掉缓存的方法

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

alert(str);

}, function (){

alert('失败');

});

};

</script>

</html>

动态数据：请求JS(或json)文件

eval的使用

Json获取的是字符串，eval方法将字符串转为数组

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

window.οnlοad=function (){

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

oBtn.οnclick=function (){

ajax('arr.txt?t='+new Date().getTime(), function (str){

//ajax获取过来的是字符串

//alert(typeof str);结果：string

//alert(str.length);结果：15

//eval()函数将执行表达式

var arr=eval(str);

alert(arr[3]);

}, function (){

alert('失败');

});

};

</script>

</html>

DOM创建元素

局部刷新：请求并显示部分网页文件

<!DOCTYPE HTML>

<html>

<head>

<title>read_and_create</title>

</head>

<body>

</ul>

</body>

window.οnlοad=function (){

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

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

oBtn.οnclick=function (){

ajax('data.txt?t='+new Date().getTime(), function (str){

var arr=eval(str);

//对arr里面的数组进行循环

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('失败');

});

};

</script>

</html>

Ajax原理

HTTP请求方法

GET--用于获取数据(如：浏览帖子)

POST--用于上传数据(如：用户注册)

GET还是POST?

与POST相比，GET更简单也更快，并且在大部分情况下能用

然而，在以下情况中，请使用POST请求：

无法使用缓存文件(更新服务器上的文件或数据库)

向服务器发送大量数据(POST没有数据量限制)

发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

GET、POST的区别

Get是在url里传数据：安全性、容量

缓存

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<!--get：通过网址传递的

post：通过http content-->

<!--get：通过网址、容量小、安全性差

post：不通过网址、容量大(2G)、安全性好一点、没有缓存-->

用户名:<input type="text" name="username" /><br>

密码：<input type="password" name="password" /><br>

</form>

</body>

</html>

AJAX中级

编写AJAX

创建Ajax对象
连接服务器
发送请求
接收返回值

创建Ajax对象

ActiveXObject(“Microsoft.XMLHTTP”)

XMLHttpRequest()

连接服务器

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

规定请求的类型、URL以及是否异步处理请求

method：请求的类型；GET或者POST

url：文件在服务器上的位置

async：true(异步)或false(同步)

发送请求

send(string)

将请求发送到服务器

string：仅用于POST请求

请求状态监控

Onreadystatechange事件

readyState属性：请求状态

0(未初始化)还没有调用open()方法

1(载入)已调用send()方法，正在发送请求

2(载入完成)send()方法完成，已收到全部响应内容

3(解析)正在解析响应内容

4(完成)响应内容解析完成，可以在客户端调用了

status属性：请求结果

200:”OK”

404:未找到页面

responseText

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

window.οnlοad=function (){

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

oBtn.οnclick=function (){

//1.创建Ajax对象

if(window.XMLHttpRequest){

//支持非IE6的浏览器

var oAjax=new XMLHttpRequest();

//alert(oAjax);

}else{

//支持IE6

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

}

//2.连接服务器,Open(方法，文件名，异步传输)

oAjax.open("GET","a.txt",true);

//3.发送请求

oAjax.send();

//4.接收返回

oAjax.onreadystatechange=function(){

//oAjax.readyState//浏览器和服务器，进行到哪一步了

if(oAjax.readyState==4){//读取完成

if(oAjax.status==200){//成功

alert("成功"+oAjax.responseText);

}else{

alert("失败"+oAjax.status);

}

};

</script>

</html>

Ajax数据

数据类型

什么叫数据类型--英语、中文

XML、Json

字符集

所有文件字符集相同

JS面向对象基础

什么是面向对象

什么是对象

什么是收音机

对象是一个整体，对外提供一些操作

什么是面向对象

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

比如JQUERY

面向对象时一种通用思想，并非只有编程中能用，任何事情都可以用

JS中的面向对象

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

抽象：抓住核心问题

抽--把最主要的特征、跟问题相关的特征抽出来

封装：不考虑内部实现，只考虑功能使用

看不到里面的东西，用好表面的功能就行了

继承：从已有对象上，继承出新的对象

多重继承

多态

对象的组成

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

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

function aaa(){ //函数：自由

alert('abc');

}

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

arr.aaa=function (){ //方法：属于一个对象

alert('abc');

};

aaa();

arr.aaa();

</script>

</html>

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

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

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

alert(a);

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

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

alert(arr.a);

</script>

</html>

第一个面向对象程序

为对象添加方法和属性

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

window

<!DOCTYPE HTML>

<html>

<head>

<title>window</title>

</head>

<body>

</body>

window.show=function (){

alert(this);

};

show();

</script>

</html>

this--函数属于谁

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

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

arr.a=12;

arr.show=function (){

alert(this.a);

};

oDiv.οnclick=function (){

alert(this);

};

arr.show();

</script>

</html>

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

object对象

工厂方式

什么是工厂

原料

加工

出厂

工厂方式

用构造函数创建一个类

什么是类、对象(实例)：模具和零件

工厂方式的问题

问题

没有new

函数重复定义

加上new

偷偷做了两件事

替你创建了一个空白对象

替你返回了这个对象

new和this

原型--prototype

什么是原型

原型是class，修改他可以影响一类元素

在已有对象中加入自己的属性、方法

原型修改对已有对象的影响

为Array添加sum方法

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

给原型添加方法，类似于class

原型的小缺陷

无法限制覆盖

流行的面向对象编写方式

用混合方法构造对象

混合的的构造函数/原型方式

Mixed Constructor Function/Prototype Method

原则

构造函数：加属性

原型：加方法

对象命名规范

类名首字母大写