JavaScript-白红宇

JavaScript

阅读量：5163 次

发布时间：2019-06-13

本文共 30065 字，大约阅读时间需要 100 分钟。

JavaScript

一、什么是JavaScript

1) Javascript是netscape公司开发的一种在浏览器端执行的脚本语言，需要嵌入到html当中才能执行。

是一种基于对象和事件驱动解释性的脚本语言，嵌入到页面上。

2) 其作用主要包括：

 为页面添加动态效果

数据验证(指的是，对表单中的数据进行合法性验证，只有验证通过才能提交)

 操作网页，实现一些动态效果

 访问浏览器，获得浏览器的一些信息。(比如获得浏览器的类型、版本等)

 ajax核心技术之一

二、javaScript的一些特点

html+css+js--->需要浏览器查看，要讲究标准的规范代码。保证浏览器兼容性。

1) javascript是类c的语言

2) javascript脚本可以保存在. js文件里，也可以直接写在html文件里

3) javascript基于对象，内置大量现成对象，不是纯粹的面向对象的语言。比如，没有定义类的语法，也没有继承和多态。

4) javascript是一种弱类型语言，即变量在声明时，不能明确声明其类型。变量的类型是在运行时确定

的，并且可以随时改变

5)javaScript是解释性代码，代码错误，则无效果。Firefox浏览器使用错误控制台查看

三、事件定义方式

（1）在定义事件时直接写入JavaScript脚本（所有的事件都是on开头的）

如：<input type=”button” value=”第一个按钮” οnclick=” alert( ‘hello,world!’ ); ”>//注意分号

（2）嵌入式，在页面上嵌入<script></script>标签，在标签中放置JavaScript代码

如：<head>

alert(“ hello world ”);

</script>

</head>

（3）文件调用式，将JavaScript代码写入一个单独的文件，并保存为.js后缀。外部文件不能包含<script>标签。

<head>

</head>

html文件所在的路径为当前路径。js文件中只能写脚本。

四、javascript的组成部分

1）ECMAScript规范

 主要定义了javascript的语言基础部分。

各个浏览器都严格遵守该规范，没有兼容性问题（所有浏览器都支持）。

 ECMAScript规范由ECMA制订。

2）dom （document object model）文档对象模型

主要定义了如何将html转换成一棵符合dom规范的树，并且如何对这棵树进行相应的操作。

该规范由w3c定义，但是，部分浏览器没有严格遵守该规范。写代码时需要考虑兼容性问题。

3）bom（browser object model）浏览器对象模型

浏览器内置的一些对象，用来操作窗口。

这些对象包括window、screen、location、navigator、document、XmlHttpRequest等。

虽然该部分没有规范，但是，各个浏览器都支持这些对象

4）事件处理

有兼容性问题。

5）JavaScript是使用ECMAScript标准的脚本，操作DOM API和BOM API，进而控制浏览器中的网

页显示效果和浏览器行为。

五、JavaScript的基本语法

JavaScript基本语法：每个浏览器都支持，不存在兼容问题。

javascript中大小写敏感。

javascript注释：// /**/

1、标识符

变量方法的命名，由字母、$、下划线开头，后面可以是字母、$、下划线和数字。

不能使用关键字。不能使用数字为开头。建议使用长变量名

2、语句

语句以“；”为结尾。

3、变量

JavaScript（JS）是弱类型语言，不用明确声明其类型，声明变量使用var 关键字。

变量的类型是在运行时确定的，并且可以随时改变。

可以使用typeof获知变量的类型。

<html>

<head>

function test(){

var value; alert(typeof value);

value=1; alert(typeof value);

value="hello"; alert(typeof value);

}

</script>

</head>

</html>

4、数据类型

简单类型：string、number、boolean

特殊类型：null、undefined

复杂类型：Array等

（1）string类型

string类型表示文本，由unicode字符、数字、标点符号组成的序列。

string属于基本类型，没有char类型。

首尾由单引号或双引号括起。

特殊字符适用转义，转义符\，比如：\n , \\ , \’ , \” var v=v="m\'a\"r\ny";

中文：\u4e00表示一个汉字，用于那些不允许使用中文的表达式，比如正则表达式。

var aa=”\u4f60\u597d欢迎来到java世界”;

alert(aa);//你好欢迎来到java世界

（2）number类型

number类型代表数字，不管是整数、小数都是number

number类型有一个对应的包装类Number

所有数字都采用64位浮点格式存储，类似于double格式。

整数：10进制的整数由数字的序列组成。

16进制数据前面加上0x

8进制前面加个0

浮点数：使用小数点记录数据，如3.4 5.6

使用指数记录数据，如4.3e23=4.3*10^23;

（3）boolean类型

仅有两个值：true和false，也代表1和0。

实际运算中true=1,,false=0

var b = true;

var c = b+1;

alert(c);//2

boolean类型使用时，要注意的问题：

不为空的字符串，转换成true。

非零的数字，转换成true。

null、undefined转换成false。

 boolean类型也有包装类Boolean。

function test(value){ //value类型为undefine

alert(typeof value);

if(! value){

alert("没有参数!");

}

（4）null

空类型，只有一个值null。null在程序中代表“无值”或者“无对象”。

可以通过给一个变量赋值null来清除变量的内容。

在使用typeof测试类型时，返回object

（5）underfine（未定义类型）

声明了变量但从未赋值或者对象属性不存在

未定义类型只有一个值undefine，typeof检查，返回undefine

5、数据类型转换

（1）隐式转换

不同类型数据在计算过程中会自动进行转换

数字+字符串：数字转换成字符串

数字+布尔值： true转换为1，false转换为0

字符串+布尔值：布尔值转换成字符串true或者false

布尔值+布尔值：布尔值转换为数值1或0

function f()

{

var s="a";

var n=1;

var b1=true;

var b2=false;

alert(s+n);//a1

alert(n+b1);//2 boolean类型，true是1，false是0

alert(s+b1);//atrue

alert(b1+b2);//1

}

（2）显示转换

数据类型转换函数

toString 转换成字符串，所有数据类型都可转换为string类型

parseInt()

强制转换成整数

如果不能转换，则返回NAN（not a number）

parseInt(“6.12”)=6

parseFloat()

强制转换成浮点数

如果不能转换，则返回NaN

parseFloat(“6.12”)=6.12

（3）案例

function getS()

{

//得到数据

var s=document.getElementById("txtNumber").value;

//isNaN()方法判断给定的是否为NaN

if(isNaN(s)){

alert("请录入数值");

}else{

var n=parseInt(s);

alert(n*n);

}

6、运算符

（1）算术运算

+ - * / %

-可以表示减号，也可以表示负号

+可以表示加法，也可以用于字符串的连接

递增(++) 递减(--)

（2）关系运算符

> < >= <= == !=

严格相等：=== 数值相同，类型相同

非严格相等：== 数值相同

function f()

{

var b=1;

var a="1";

alert(a==b);//true

alert(a===b);//false

alert(0=="")//true,空字符串底层存的是"0"

alert("0"==0)//true

alert(""=="0");//false

}

（3）逻辑运算

! && ||

（4）条件运算符

条件运算符又称“三目”/“三元”。

xxx?a1:a2;

7、控制语句

if switch-case for while

function getSum()

{

var sum=0;

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

sum+=i;

}

alert(sum);

}

五、常用内置对象

js中的对象：内置对象、DOM、BOM对象、浏览器对象等

javascript内置对象一般首字母大写。

javascript是一种基于对象语言。对象由属性和方法封装而成（和java一样的用法）

javascript常用内置对象有：

简单数据对象：String Number Boolean

组合对象： Array Math Date

高级对象：Function RegExp

1、String对象

a、创建

var s=”mary”;

var s=new String(“mary”);

b、属性

s.length字符串中字符的个数

c、方法

s.charAt(index) 返回指定位置的字符

s.charCodeAt(index) 返回字符的Unicode编码

 s.substring(from, to) 返回子字符串

 s.indexOf(str) 指定字符串在原字符串中第一次出现的位置。

 s.lastIndexOf(str) 指定字符串在原字符串中最后一次出现的的位置。

 s.toLowerCase/toUpperCase 返回小写/大写形式

s.split(bystr) 返回分割后的字符串数组

满足正则表达式的方法

s.match(regexp) 返回匹配指定正则表达式的字符串，返回的结果是一个数组。

 s.search(regexp) 返回按照正则表达式检索到的字符串位置。

 s.replace(regexp,newStr) ; 替换符合正则表达式规定的字符串

d、字符串，常常需要结合正则表达式

<head>

function test(){

var str='766908296@qq.com';

alert(str.length);

var qq=str.substring(0,str.indexOf('@'));

alert(qq);

var isEmail=str.match(/\w+@\w+\.\w+/);

alert(isEmail);

var reg=new RegExp(/\w+@\w+\.\w+/);

var str1="tom.com";// ''和""都表示字符串

isEmail=str1.match(reg);

alert(isEmial);//匹配上，返回被匹配字符串。匹配不上返回空（null）

}

</script>

</head>

2、Array对象

Array 数组，相当于java里的ArrayList。

数组的大小可以改变，并且数组元素的类型可以混合存放。

（1）创建和初始化

a、使用new Array( )方式创建数组

var ary1=new Array( 5); 创建长度为5的空数组（长度可变）

var ary2=new Array(); 长度为0的数组

ary1[1]=1;

ary1[2]="abc";

ary1[3]="3";

ary1[5]=8；添加一个元素，长度为6

ary2[0]=9; 添加一个元素，长度由0变为1

alert("ary1:"+ary1.length+","+ary1.join("-"));

b、使用JSON语法创建数组对象

var ary3=[1，false，"abc"];

alert(ary3.toString()+ary3.length); 注意toString用“，”连接

两种创建方式没有任何区别

c、二维数组

var a=new Array();

a[0]=[“1”,”2”];

（2）属性

length属性 : 返回数组的长度

（3）方法 

a、toString() 返回数组元素连接后的字符串。中间用”，”连接

b、join(byStr) 用于将数组中的各个元素连接成字符串

byStr为连接符

c、concat(value1,value2,..) 用于连接两个数组,生成一个新数组

var a=[1,2,3];

var b=a.concat(4,5);

alert(b.toString());//1,2,3,4,5

d、slice(start ,end) 用于截取数组的一部分并以数组的形式返回。原数组不会有任何变化。

start: 开始位置索引

end: 结束位置，省略则相当于从start位置截取以后所有的数组元素。

var arr1=[‘a’,’b’,’c’,’d’,’e’,’f’,’g’];

alert(ar1.slice(2,4).toString());// c,d

alert(ar1.slice(4).toString);//e,f,g

e、reverse() 将数组反转。不会生成新数组

f、sort(sortFunc) 数组排序排序

sortFunc:可选项，用来确定元素顺序的函数的名称。

sortFunc缺省时按照字符串的排序方式，即按照字符串首字符大小升序排序

可通过如下形式来重新定义排序方式：

var arr4 = arr3.sort(

function(a1,a2){

//降序排，假如 2,5 2-5=-3<0表示2小于5，所以2应该放在5后面。

return a1-a2;

//升序,假如2,5, 5-2=3>0表示2大于5，则2应该放在5的前面。

return a2-a1;

}) ;

function sortTest(){

var ary = [9,2,12,3,11];

ary.sort(); 默认按照字符编码排序

alert(ary.toString()); [11,12,2,3,9]

ary.sort(function(v1,v2){ 自定义排序规则

return v1-v2;

});

alert(ary.toString()) ; [2,3,9,11,12]

//按照字符串长度排序

var names = ['Tom','Li','Andy','Robin'];

names.sort(byLength);

函数是一个对象，函数名是这个函数对象的引用

alert(names.toString());

}

function byLength(v1, v2){

return v1.length - v2.length;

}

</script>

g、案例

function operArr(t)

{

var str=document.getElementById("txtArr").value;

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

switch(t){

case 1:ary.reverse();break;

case 2:ary.sort();break;

case 3:ary.sort(function(f1,f2){

return f1-f2;

});break;

}

alert(ary.toString());

}

3、Math对象

Math对象用于执行数学任务。

没有构造函数Math()。

无需创建，直接把Math作为对象使用就可以调用其所有属性和方法。

a、属性

Math.E 自然数

Math.PI 圆周率

Math.LN2 ln2等

b、方法

random() : 随机生成一个0到1之间的数字。

 ceil() : 对一个数上舍入。

 floor() : 对一个数下舍入

----------------------------------->

-2 -1.5 -1 0 1 1.5 2

alert ( Math.floor(1.5)+Match.floor(-1.5) )； 1，-2

alert ( Math.ceil(1.5)+Match.ceil(-1.5) )；2，-1

产生【0,33）之间的随机数： Match.ceil(random()*100)%33

Match.ceil(random()*33)

3-9之间的整数 Math.floor(Math.random()*6+3)

c、案例

实现随机数的产生

function ranNum(min,max)

{

var random=Math.random();

var r=Math.floor(random*(max-min)+min);

alert(r);

}

4、Number对象

Number对象是原始数值的包装对象

a、创建

var myNum=new Number(value);

var myNum=Number(value);

var myNum=value;

b、属性

 最大值 :Number.MAX_VALUE

 最小值 :Number.MIN_VALUE

 如果超过这个范围，会返回Infinity,或者-Infinity

<head>

function test(){

var num=Number.MAX_VALUE;

alert(num);

num+=Number.MAX_VALUE;

alert(num);

}

</script>

</head>

c、方法

toString() 数值转换为字符串

toFixed() 数值转换为字符串，并保留小数点后一定位数。

sum.toFixed(2);对sum保留两位小数

5、RegExp对象

RegExp对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

g---global全局的全部符合正则表达式的都

i----忽略大小写ignource

m---multi多行文本中适合

a、创建

var rgExp=/pattern/flags ---> /表达式/gim

var rgExp=new RegExp(“pattern”,[“flags”]);

b、方法

rgExp.test(String);如果字符串string中包含与rgExp匹配的文本，则返回true，否则返回false。

c、应用

(1)结合 string 对象的方法，常用于对于字符串的处理

(2)使用正则表达式对象的 test方法，用于实现录入的验证

d、案例

验证用户名：3-5个大小写字母

用户名：<input type="text" name="username" οnblur="valiName();" id="username"/>

function valiName(){

var name=document.getElementById("username").value;

var reg=/^[a-zA-Z]{3,5}$/;//加^和$表示一整个字符串从开始到结束满足正则表达式。

if(!reg.test(name)){

alert("录入错误！");

}

6、Date对象

Date对象用于处理日期和时间

a、创建对象

var now=new Date();//当前日期和时间

var nowd2=new Date(“2013/3/20 11:12”);

b、方法

读取日期的相关信息

getDate() 返回一个月中某一天

getDay() 返回一周中的某一天

getYear() 返回年份

getMonth() 返回月份

修改日期

setDate(day_of_month)

setMonth( month ) 月份从0开始，年日从1开始

setHours()

转换为字符串

toString()

toLocaleTimeString() 返回时间部分

toLocaleDateString() 返回日期部分

c、案例

function getDateInfo()

{

var date=new Date();

//得到14天前的日期

date.setDate(date.getDate()-14);

alert(date.toLocaleDateString());//日期格式局限性

//自己定义输出格式

var year=date.getFullYear();

var month=date.getMonth()+1;

var d=date.getDate();

alert(year+":"+month+":"+d);

}

7、函数与Function对象

函数（方法）是一组可以随时随地运行的语句。Function对象可以表示开发者定义的任何函数。

（1）函数的定义：

函数不能有返回类型，但是可以有返回值。

a、function 函数名(参数){

函数体;

return 返回值;

}

b、匿名函数

var func = function(arg1,..,argN){

func_body;

return value;

}

对象的值(func)是方法对象，完全等价于function func(){}

c、可以使用Function对象直接创建函数

var functionName = new Function(arg1,...,argN,functionBody);

var add = new Function(“x”,”y”,”return (x+y);”);

var result = add(2,3);

alert(result); 5

alert(add); 弹出方法的文本

（2）函数的调用

M();

M(1,34);

var r = M(20);

（3）arguments对象

arguments是一种特殊对象，在函数代码中表示函数的参数数组。

函数默认是变长参数，可以使用arguments访问所有参数。

arguments.length 函数的参数个数

arguments[i] 第i+1个参数

函数没有重载。在javascript中，方法的名称相同，参数不同，前面的方法会被覆盖。

可以使用arguments模拟方法的重载

var val = 5; 全局变量

function functionTest(){

alert(val); 5

var val1 = 6; 局部变量

alert(val1); 6

//函数调用测试, 传递变长参数

alert(test()); 0

alert(test(1)); 1

alert(test(1,2,3,4)); 10

alert(test(1,"A",3,4)); "参数错误!"

}

//arguments对象, 是调用函数传递的参数数组

//test函数: 对变长参数进行累计处理

function test(){

if(arguments.length==0){

return 0;

}

var sum=0;

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

//检查参数 is Not a Number

if(isNaN(arguments[i])){

return "参数错误!";

}

sum+=arguments[i];

}

return sum;

}

</script>

8、object对象

object相当于java中的HashMap。主要用于封装

eg: var obj = new Object(); 相当于 new hashMap()

obj.name="小王"; 添加属性，后期动态绑定属性

obj.age =20; 相当于 map.put('age',20);

alert( typeof obj); 返回object类型

alert( obj.name ); 返回小王相当于Map.get( "name" );

3种方式创建对象(3种方式创建的对象没有任何区别)

1、使用object

var person1=new Object();

person1.name="马伊琍";

person1.age="32";

alert(typeof person1); 返回的是object类型

alert(person1.name); 相当于map.get("name");

alert(person1.age);

person1.whoau=function(){ alert(this.name)；}

2、JSON方法，时髦一些（很常用的写法）

var person2={

name：“文章”，

age：30，

whoau：function（）{ alert（this.name）}

}

3、利用方法（相当于构造器）来创建对象

function test(){

var person3 = new Person("爱玛", 3);

person3.whoau();

}

function Person(name, age){

this.name = name;

this.age = age;

this.whoau = function(){alert(this.name);};

}

</script>

双色球演示

<head>

<title> 双色球演示 </title>

function doubleBall(){

var pool = ['01','02','03','04','05','06','07',

'08','09','10','11','12','13','14','15',

'16','17','18','19','20','21','22','23','24',

'25','26','27','28','29','30','31','32','33'];

var used = new Array(pool.length);

var balls = new Array(6)；

var i=0;

while(true){

var index=Math.ceil(Math.random()*100)%pool.length;

if(used[index]){ continue; }

balls[i++] = pool[index];

used[index]=true;

if(balls.length==i){ break; }

}

balls.sort()；

balls[balls.length] = pool[Math.ceil(Math.random()*100)%16];

alert(balls);

}

</script>

</head>

<body>

</body>

六、全局函数

全局函数可用于所有内置的JavaScript对象

常用的全局函数有：

parseInt、parseFloat

isNaN

eval

decodeURI、encodeURI

（1）decodeURI、encodeURI

encodeURI()：把字符串作为URI进行编码

decodeURI()：对encodeURI()函数编码过的URI进行解码

encodeURI(str):服务器不认识url中的中文，对其进行编码，编成服务器认识的格式

var str="http://tts6.tarena.com.cn/index.html?name=张三";

var r1=encodeURI(str);//http://tts6.tarena.com.cn/index.html?name=%E5%BC%A0%E4%B8%89

alert(r1);

var r2=decodeURI(r1);//http://tts6.tarena.com.cn/index.html?name=张三

alert(r2);

（2）eval函数

eval函数用于计算某个字符串，以得到结果；或者用于执行其中的javascript代码。

只接受原始字符串作为参数

如果参数中没有合法的表达式和语句，则抛出异常。

var str=”2+3”;

alert(str); 2+3

alert(eval(str)); 5

简单计算器

参数this.value表示，点击该按钮时，把该按钮value属性对应的值传入方法中

function cal(s)

{

var str=document.getElementById("txtNumber").value;

if(s=="="){

var r=eval(str);

document.getElementById("txtResult").value=r;

}else{

document.getElementById("txtNumber").value=str+s;

}

七、DHTML

1、简介

DHTML是Dynamic HTML的简称，就是动态的，一种浏览器端的动态网页技术。

对大多数人来说，DHTML 意味着 HTML、样式表和 JavaScript 的组合。

DHTMl功能：动态改变页面元素

事件响应机制制作动态折叠的树形结构和菜单

与用户进行交互等。

DHTML对象模型包括浏览器对象模型和DOM对象模型。

2、浏览器对象模型

Window对象

|---History对象

|---Navigator对象

|---Location对象

|---Screen对象

|---Event对象

|---Document对象

|---Image对象

|---Table对象

|---Form对象等

3、Window对象

Window对象表示浏览器中打开的窗口，窗口实现交互的功能

（1）常用属性

window.document 窗口中显示的HTML文档

window.history 浏览过窗口的历史记录

window.location 窗口文件地址

window.name = name 窗口名称

window.operator 打开当前窗口的window对象

（2）弹出对话框

window.alert(str); 警告，提示对话框，显示str字符串的内容。

window.confirm(str);确认对话框，显示str字符串的内容。

确认返回true，其他操作返回false。

window.prompt(str,value);输入对话框，采用文本框输入信息。

str为提示信息，value为初始值。

按确定返回输入值，其他返回underfined.

小技巧：取消事件

onXXX = “return false;”用于取消事件。

<input type="submit" value="删除" οnclick="return true;"/>点完后肯定会提交

<input type="submit" value="删除" οnclick="return false;"/>点了白点，不提交

模拟删除时，弹出对话框，确定时提交删除请求，取消时不发送请求。

function delFunc()

{

//默认情况下，点击确定或者取消都会刷新页面

var r=window.confirm("真的要删除吗？");//true/false

var str=window.prompt("请输入3-5个字母");

alert(str);

return r;

}

（3）窗口的打开和关闭

类似于<a target=”_blank” href=””></a>

window.open(url,name,”width=500”);

<input type="button" value="打开新窗口" οnclick="window.open('http://tts6.tarena.com.cn',

'达内','width=500,height=300')">

（4）定时器

a、周期性定时器

var t = window.setInterval(exp ,time);每隔time毫秒，执行代码exp

exp 执行语句

time 时间周期，单位为毫秒

t 返回已经启动的定时器对象

window.clearInterval(t); 停止启动的定时器

b、一次性定时器

var t = window.setTimeout(exp,time);过time豪秒，执行代码exp

window.clearTimeout(t);停止启动的定时器

c、案例

(1)显示当前时间启动时钟停止时钟

function showTime(){

var d=new Date();

document.getElementById("time").value=d.toLocaleTimeString();

}

var t1;

function startClock(){

t1=window.setInterval(showTime,1000);

}

function stopClock(){

window.clearInterval(t1);

}

(2)撤销操作

如果想取消，请点击<a href="javascript:cancleFunc();">这里</a>

javascript表示，点击后不再跳转页面，而是执行javascript后面的脚本代码

<a>中没有onclick事件

var t2;

function timeoutFunc(){

t2=window.setTimeout("alert('hello')",5000);

}

function cancleFunc(){

window.clearTimeout(t2);

}

4、Screen对象

Screen对象包含有关客户端显示屏幕的信息。

常用于获取屏幕的分辨率和色彩。

常用属性：

width/height 返回显示器屏幕的宽/高

availWidth/availHeight 返回显示屏幕的宽/高(windows任务栏除外)

var r = screen.height； ok--read/get

screen.height = 500; error--不可设置

window.width = screen.availWidth/2;

5、History对象

history对象包含用户（在浏览器窗口）访问过的URL

length属性：返回浏览器历史列表中的URL数量

history.back() 加载history列表中的前一个URL （单击后退按钮）

history.forward() 加载history列表中的下一个URL

hostory.go(n) 加载history列表中某个具体页面

history.go(-2) 单击两次“后退按钮”

6、location对象

location对象包含有关当前URL的信息。常用于获取和改变当前浏览的网址。

href属性

var url = location.href; 获取当前页面的URL

location.href = “a.html”; 修改当前访问的URL，保留历史访问记录（可以后退到原来页面）

location.replace(url); 去往新url地址，没有历史（不能后退到原来页面）

location.reload() 重新加载当前网址，相当于按下刷新按钮

---可以实现页面跳转的方式（客户端）

静态方式：<a></a>

代码方式： window.open() 一定是在新窗口中

history.XXX() 必须有历史记录

location.href 是否需要保留

location.replace();

7、navigator对象

navigator对象包含有关浏览器的信息。常用于获取客户端浏览器和操作系统信息。

只提供了可读的属性

小技巧：查看某种对象的属性

function testnavi(){

var str = "";

for(var pName in navigator){

//js中访问对象的属性有两种方式

location.href

location["href(变量)"]

str +=pName+":"+navigator[pName]+"\n";

}

alert(str);

}

8、event对象与事件

（1）事件：响应机制，当发生某种动作时实现对代码的调用。

a、事件的分类

鼠标事件：

onclick 鼠标单击时发生

ondbclick 鼠标双击时发生

onmousedown 鼠标按下

onmouseup 鼠标按键松开

onmouseover 鼠标移到某元素之上

onmouseout 鼠标从某元素移开

键盘事件

onkeydown 键盘按下

onkeyup 键盘弹起

onkeypress 某个键盘按键被按下并松开

状态事件：

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

onunload 用户退出页面（关闭页面）发生

onchange 域的内容改变时发生

onfocus 元素获得焦点时发生

onblur 元素失去焦点时发生

onresize 窗口或者框架被调整大小时触发

onsubmit onsubmit事件会在表单中的确认按钮时发生

b、事件的定义

取消事件： onXXX = “return false;” 点了和没点一样

html静态方式：<元素 onXXX=” someJavascriptCode ”>

js代码的方式： obj.onXXX = function(){...}

c、事件的冒泡机制

当为层次关系的元素定义了相同的事件时，最底层的被触发，层层向上。

当大量子节点拥有相同事件时，考虑将事件定义在父元素。

（2）event对象

任何事件触发后将会产生一个evenet对象。

event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息。

常用属性：clientX/clientY 得到事件发生的位置点

a、获得event对象

IE/chrome等浏览器中，javascript和html都认识event

firefox浏览器中：javascript不认识event对象，在html页面上认识。

解决方案：在html中将event对象传入js

b、获取事件的源元素对象（触发对象）

IE/chrome等浏览器中，event.srcElement

firefox浏览器中：event.target

解决方案：二者用||连接起来

（3）浏览器兼容问题

怎么考虑浏览器的兼容问题？

a、写标准的代码（各个浏览器都支持的）

b、个别的特殊问题，特殊处理，特别问题比较多，可以举例：如事件

c、如果问到了某个特定的问题不会，可说：具体问题具体对待，遇到可以查询文档

（4）案例

a、冒泡机制

</p>

</div>

当点击button时，p和div里的onclick事件也被触发

b、改进版的简单计算器

<br />

</div>

function cal(eObj){

var obj=eObj.target||eObj.srcElement;;

if(obj.nodeName=="INPUT"&&obj.type=="button"){

if(obj.value=="="){

var str=document.getElementById("txt").value;

var result=eval(str);

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

}else{

document.getElementById("txt").value+=obj.value;

}

八、HTML DOM

1、HTML DOM简介

DOM 是Document Object Model(文档对象模型)的缩写，定义了如何将一个结构化的文档(比如xml, html)转换成一棵树，并且也定义了如何操作这棵树的方法或者属性。根据W3C DOM规范,DOM是一种与，平台，语言无关的接口。（一堆API）。

HTML DOM则是专门使用于html/xhtml的文档对象模型。可以理解为网页的API，它将网页中的各个元素都看作一个个对象。封装了元素的属性和对元素进行操作的方法。javascript可以利用HTML DOM动态的修改页面。（将html标记、属性、CSS样式都对象化）。

HTML也是讲一些常见的DOM操作（document的一些方法）进行封装。

我们要学习的就是这些对象的属性和方法。

这些对象主要有：

document对象

|---Button对象

|---Form对象

|---Input对象

|---Select对象

|---Textarea对象

|---Table对象

|---Style对象（样式）

2、HTML DOM模型

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树，都是节点）。

页面：

<html>

<head>

</head>

<body>

<div>

</div>

</body>

</html>

在浏览器中会生成如下结构的DOM对象（元素继承于节点元素是节点）

document

|--根元素html

|-- 元素head

| |-- 元素title

| |-- 文本节点 "DOM 演示"

|-- 元素body

|-- 元素div

|-- 注释节点

|-- 文本节点 "开始演示"

|-- 元素 a

|-- 属性节点 href="index.html"

|-- 文本节点 Home

|-- 元素 h1

|-- 属性 id="title"

|-- 文本节点 "Dom 演示页面"

跟元素: root Element

元素: Element

节点: Node

文本节点: text Node

属性: Attribute

注释: Comment

Node 根类型

|-- Element (Note Type = 1)

|-- Text Node (Note Type = 3)

|-- Attribute Node (Note Type = 2)

|-- Comment (Note Type = 8)

父节点：parent 孩子节点：child

兄弟（同辈）：sibling 祖先（父亲以上）

后代：孩子以下都是

九、Document对象(重点)

1、简介

每个载入浏览器的HTML文档都会成为document对象。

通过使用document对象，可以从脚本中对html页面中的所有元素进行访问。

（把所有元素都封装成对象，可以通过访问对象的属性和方法来访问元素）

document对象时window对象的一部分，可以通过window.document属性对其进行访问。

2、查找节点

（1）var obj = document.getElementById(“id值”)

根据id值返回对应的元素对象。返回只可能是1个

（2）var nodes = document.getElementsByTageName(“a”)

根据标签的名称查找，返回的时节点的数组。

如果标签名称错误，则返回长度为0的节点数组。

document.getElementsByTageName 查找范围是整个HTML文档中的所有元素。

node.getElementsBtTagName("a");在node的所有后代中查找所有元素“a”。

（3）使用节点导航（父子关系导航）：有些浏览器不兼容，不常用

所有节点包含的属性：

obj.parentNode 返回父节点

obj.childNodes 返回数组，包含所有子节点

obj.firstChild

obj.lastChild

obj.previousSibling 返回同级别，前一个兄弟

obj.nextSibling 返回同级别，后一个兄弟

3、查看节点信息

（1）适用于节点类型未知

var str=obj.nodeName 返回节点的名称，注意返回的str是全大写方式。

如果节点是input类型，返回INPUT

（2）适用于节点类型已知

a、标签对象化

文本框 <input value=”” />

查看value属性：var str = obj.value;//obj是文本框对象

修改vlaue属性：obj.value = str;

图像 <img src=”’>

查看src属性：var str = obj.src;

修改src属性：obj.src = str;

链接 <a href=””>XXX</a>

查看href属性：var str = obj.href;

修改href属性：obj.href = str;

b、标签中间的文本

查看：var str = obj.innerHTML

修改：obj.innnerHTML=str;

c、单个样式

obj.style.color = ”red”

obj.style.backgroundColor = ”silver”

obj.style.fontSize = 30;

d、样式比较复杂的

JS： h1Obj.className=”s1” 修改h1的class属性的值

CSS: h1.s1{XXX}

HTML <h1>text</h1>

4、创建新节点

（1）var obj=document.createElement(elementName);

elementName：要创建的元素标签名称。返回新创建的节点

var newNode = document.createElement(“input”);

newNode.type = “text”;

newNode.value = “mary”;

newNode.style.color = “red”;

（2）var newTextNode=document.createTextNode（text）；

创建文本节点

var para = document.createElement(p);

var node = document.createTextNode(“这是新段落”);

para.appendChild(node);

5、添加新节点

（1）parentNode.appendChild(newNode);

追加：新节点作为父节点的最后一个子节点存在

（2）parentNode.insertBefore(newNode,refNode);

refNode:参考节点，新节点位于此节点之前

（3）newElement替换refNode, node是父节点

node.replaceChild(newElement, refNode)

6、删除节点

parentNode.removeChild(childNode); 删除某个子节点

obj.parentNode.removeChild(obj); 删除obj

十、Table对象

属性：

var arry = table.rows; 返回所有行相当于table.getElementsByTagName("tr")

var arry = table.cells;

方法：

table.insertRow(index) 在index下标处插入一行

tableObject.deleteRow(index) 删除下标为index的行

TableRow对象

ableRow.deleteCell(index) 删除下标为index的td

tableRow.insertCell(index) 在下标index处添加一个单元格

案例：保存数据添加到表格中

产品名称：<input type="text" id="txtName"/><br/>

产品价格：<input type="text" id="txtPrice"><br/>

</table>

function saveData(){

var table=document.getElementById("t1");

var row=table.insertRow(table.rows.length);

var cell1=row.insertCell(0);

cell1.innerHTML=document.getElementById("txtName").value;

var cell2=row.insertCell(1);

cell2.innerHTML=document.getElementById("txtPrice").value;

}

十一、Select对象

Select对象代表HTML表单中的一个下拉列表。<select>标签即表示一个Select对象。

常用属性

var options = selectObj.options 返回包含下拉列表中的所有选项的一个数组

var index = selectObj.selectedIndex 返回下拉列表中被选项目的索引号

selectObj.selectedIndex = xxx 设置被选项目

var s = selectObj.size 设置或返回下拉列表中的可见行数。

var l = selectObj.length 返回下拉列表中的选项数目。

方法

selectObject.add(option,before) 向 <select> 添加一个 <option> 元素。

option 要添加的option对象

before 在该元素之前增加新的元素。如果是null，元素添加到选项数组的末尾。

selectObject.remove(index) 删除索引号为index的option对象

事件

selectObject.onchange = “someJavascriptCode”；

当用户选中一个选项，或者取消了对一个选项的选定时，就会调用该句柄。

Option对象

Option对象代表HTML表单中下拉列表中的一个选项。

<option>标签表示一个Option对象

创建对象

var o = new Option(text , value); 第一个参数是option的innerHTML，

第二个参数是option的value值。

属性

optionObject.index 返回下拉列表中选项的索引位置。

optionObject.text=sometext 可设置或返回选项的文本值。

optionObject.value=somevalue 可设置或返回选项的值

optionObject.selected=true|false 设置或返回选项的 selected 属性的值

selectObject.options[] 返回包含 <select> 元素中所有 <option> 的一个数组。

如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除

案例：联动菜单

方向：

</select>

课程：

</select>

</form>

var ary=new Array();

ary[0]=["--请选择--"];

ary[1]=["corejava","se","oracle"];

ary[2]=["c","c++"];

ary[3]=["html","css","php"];

function change(){

var s1Obj = document.getElementById("s1");

var s2Obj = document.getElementById("s2");

var index = s1Obj.selectedIndex;

var data = ary[index];

s2Obj.length = 0;

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

var optObj = new Option(data[i]);

s2Obj.add(optObj);

}

十二、DOM案例

1、查看节点信息，修改节点信息（节点类型已知）

html文件

<head>

.s{

border:1px solid red;

height:30px;

}

.h{

border:1px solid green;

width:300px;

}

</style>

</head>

<body>

<form>

<p id="p1">修改段落的字体颜色、背景颜色、文本</p>

<h1 id="h1" class="s">复杂的样式</h1>

</form>

</body>

js文件

function testDOM()

{

var pObj=document.getElementById("p1");

pObj.style.color="yellow";

pObj.style.backgroundColor="gray";

pObj.style.border="1px solid black";

pObj.style.height="30px";

pObj.style.width="500px";

var imgObj=document.getElementById("m1");

imgObj.src="images/admin_out.png";

var hObj=document.getElementById("h1");

hObj.className="h";

}

2、查看节点信息（节点类型未知）

统计option个数

</select>

function testNode()

{

var obj=document.getElementById("s1");

var nodes=obj.childNodes;

alert(nodes.length);//长度为7，空白文本也算一个节点。

var count=0;

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

if(nodes[i].nodeName=="OPTION"){

count++;

}

alert(count);

}

3、表单验证（查找节点）

姓名：<input type="text" id="txtName" οnblur="validName();">

<span id="nameInfo">3-5个大小写字母</span><br>

年龄：<input type="text" id="txtAge" οnblur="validAge();">

function validName()

{

var name=document.getElementById("txtName").value;

var reg=/^[a-zA-Z]{3,5}$/;

if(reg.test(name)){

document.getElementById("nameInfo").style.color="green";

}else{

document.getElementById("nameInfo").style.color="red";

}

return reg.test(name);

}

function validAge(){

var age=document.getElementById("txtAge").value;

var reg=/^[0-9]{2}$/;

if(reg.test(age)){

document.getElementById("ageInfo").style.color="green";

}else{

document.getElementById("ageInfo").style.color="red";

}

return reg.test(age);

}

点击保存时，要求所有表单都通过验证

function validData(){

var r1=validName();

var r2= validAge();

return r1&&r2;

}

4、增加节点

<form>

function addNewNode(){

var aObj=document.createElement("a");

aObj.href="http://tts6.tarena.com.cn";

aObj.innerHTML="click me";

var formObj=document.getElementById("form1");

formObj.appendChild(aObj);

var btnObj=document.createElement("input");

btnObj.type="button";

btnObj.value="new Button";

//onclick接受的是方法

btnObj.οnclick=function(){

alert("hello");

};

formObj.insertBefore(btnObj,formObj.firstChild);

}

5、联动菜单

方向：

</select>

课程：

</select>

</form>

var ary=new Array();

ary[0]=["--请选择--"];

ary[1]=["corejava","se","oracle"];

ary[2]=["c","c++"];

ary[3]=["html","css","php"];

function showOption(){

var obj=document.getElementById("s1");

var obj2=document.getElementById("s2");

var index=obj.selectedIndex;

var data=ary[index];

var nodes=obj2.childNodes;

//alert(nodes.length);

//for(var i=0;i<nodes.length;i++){//nodes.length会改变，for循环不可用

//alert(i);

//obj2.removeChild(nodes[0]);

//}

while(nodes.length>0){

obj2.removeChild(nodes[0]);

}

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

var opt=document.createElement("option");

opt.innerHTML=data[i];

obj2.appendChild(opt);

}

6、购物车

html

<body>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

总计：<span id="total">13.61</span>

</body>

Javascript

function add(btnObj){

var nodes=btnObj.parentNode.childNodes;

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

var child=nodes[i];

//先判断节点名，因为可能会有空白节点

if(child.nodeName=="INPUT"&&child.type=="text"){

var old=parseInt(child.value);//得到的值一定是字符串

old++;

child.value=old;

}

getPrice();

}

function decrease(btnObj){

var nodes=btnObj.parentNode.childNodes;

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

var child=nodes[i];

if(child.nodeName=="INPUT"&&child.type=="text"){

var old=child.value;

if(old > 0){

old--;

}

child.value=old;

}

getPrice();

}

function getPrice(){

var obj=document.getElementById("t1");

var rows=obj.getElementsByTagName("tr");

var total=0;

for(var i=1;i<rows.length;i++){

var currentRow=rows[i];

var cells=currentRow.getElementsByTagName("td");

var price=parseFloat(cells[1].innerHTML);

//第三个单元格

var inputs=cells[2].getElementsByTagName("input");

var qty=parseInt(inputs[1].value);

var sum=price*qty;

cells[cells.length-1].innerHTML=sum;

total+=sum;

}

document.getElementById("total").value=total;

}

转载于:https://www.cnblogs.com/qin-derella/p/6553680.html

你可能感兴趣的文章

语言基础（9）：static, extern 和 inline

查看>>

ES5_03_Object扩展

查看>>

bzoj 2600: [Ioi2011]ricehub

如何在键盘出现时滚动表格，以适应输入框的显示