JavaScript的基本介绍

JavaScript

1、JavaScript的简介

（1）什么是JavaScript：是基于对象和事件驱动的语言，应用于客户端。

* 基于对象：

** java是面向对象，使用对象需要创建

** js里面提供好了一些对象，直接使用

* 事件驱动：每次滑动鼠标，变换一张图片

* 客户端：指的是浏览器

（2）JavaScript的特点（三个）

第一个：交互性

                ** 信息的动态交互

第二个：安全性

** JavaScript不能访问本地硬盘里面的文件

第三个：跨平台性

** 在java里面跨平台，通过虚拟机实现的

** JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript

（3）Java和JavaScript区别（雷锋和雷峰塔）

第一，java是sun公司，现在是oracle；JavaScript是网景公司

第二，java是面向对象的语言，javaScript是基于对象的语言

第三，java跨平台需要依靠虚拟机实现，JavaScript只需要浏览器可以运行

第四，JavaScript弱类型语言，java是强类型的语言

** 比如在java里面定义一个变量 int a = 10;   int b = "10";不正确

** 在JavaScript里面定义变量都是使用一个关键字 var a = 10;  var b = "10"; var c = true;

第五，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行

（4）JavaScript由三部分组成

第一部分：ECMAScript

** 由ECMA组织制定语句，语法

第二部分：BOM

** broswer object  model：浏览器对象模型

第三部分：DOM

** document object model：文档对象模型

2、js和html的结合方式

* 有两种结合方式

第一种：使用html中的标签 <script type="text/javascript"> js代码 </script>

** 代码

 <script type="text/javascript">

alert("aaa");

 </script>

** js的注释有两种

//单行注释

/*

多行注释

*/

第二种：使用html的标签，引入外部的js文件

<script type="text/javascript" src="js文件的路径"></script>

* 使用第二种方式的时候有两点注意

注意一：不要在script标签里面写js代码了，不会执行

注意二：结束script标签 </script>，不要在标签内结束

* 代码

 <script type="text/javascript" src="1.js">

//不要在script标签里面写js代码了，不会执行

alert("aaa");

</script>

3、js的变量声明和数据类型

（1）在js里面如何声明变量，都是使用一个关键字var

* var a = 10;

（2）js的原始类型

* 在java里面有基本的数据类型？八个

* js的原始类型有五个

第一，string：字符串类型

* var a = "abc";

第二，number：数字类型

* var b = 10;

第三，boolean：布尔类型 true false

* var c = true;

第四，null

* null是特殊的引用类型

* 表示对象引用为空，所有对象的引用也是object

* 比如 var date = null;

第五，undefined

* 表示定义了一个变量，但是没有赋值

* var a;没有赋值

（3）typeof(变量的名称): 查看当前变量的类型

* alert(typeof(a));

4、js的引用类型和类型转换

* 引用对象

** Object 对象：所有对象都由这个对象继承而来

** Boolean 对象：Boolean 原始类型的引用类型

** Number 对象： Number 原始类型的引用类型

* 类型转换

** 转换成字符串

** 转换成数字：parseInt() 和 parseFloat() 

** 强制类型转换

Boolean(value) - 把给定的值转换成 Boolean 型； 

Number(value) - 把给定的值转换成数字（可以是整数或浮点数）； 

String(value) - 把给定的值转换成字符串； 

5、js的语句

* 在java里面语句：if  、 switch 、while、 do-while、 for

* java里面的switch语句，数据类型要求：是否支持string类型？在jdk1.7开始支持的

（1）if 语句

* 代码

//if语句

var a = 10;

if(a==10) {

alert("10");

} else {

alert("other");

}

（2）switch语句

* 在java里面 

switch(a) {

case 10:

 break;

case 20:

 break;

default:

....

}

* 代码，JavaScript里面所有的类型都支持

var b = 5;

switch(b) {

case 4:

alert("4");

break;

case 5:

alert("5");

break;

default:

alert("other");

}

（3）while循环语句

* 代码

//while语句

var i = 4;

while(i<6) {

alert(i);

i++;

}

（4）for循环语句

* 代码

//for语句

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

alert(i);

}

（5）使用document.write()向页面输出内容

* 可以向页面输出变量

* 可以向页面直接输出html代码

** document.write(i);

document.write("<br/>");

6、练习：向页面输出99乘法表

（1）document.write可以直接向页面输出html代码

（2）html中的属性和属性值之间可以使用双引号，也可以使用单引号

（3）代码

document.write("<table border='1' bordercolor='blue'>");

//循环9行

for(var i=1;i<=9;i++) {

document.write("<tr>");

//循环每行的部分

for(var j=1;j<=i;j++) {

document.write("<td>");

//向页面输出内容

document.write(j+"*"+i+"="+i*j);

document.write("</td>");

}

//document.write("<br/>");

document.write("</tr>");

}

document.write("</table>");

7、js的运算符

（1）算术运算符

+ - * /....

（2）赋值运算符

+=含义： x+=y 相当于 x=x+y 

（3）比较运算符

==：表示条件的判断，如果是=，表示赋值

（4）逻辑运算符

&&  ||  !

（5）js的运算符和java不同的内容

第一个：js里面不区分整数和小数

* 比如 var a = 123/1000*1000,如果在java里面结果是 0

* js里面的结果：123

第二个：字符串的相加和相减操作

* 字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN

* //字符串的相加和相减

var b = "10";

document.write(b+1); //字符串拼接

document.write("<hr/>");

document.write(b-1); //真正相减的运算

document.write("<hr/>");

var c = "a";

document.write(c-1); //NaN 

第三个：boolean类型相加和相减的操作

* 如果布尔类型值是true，把类型当成1运算；如果布尔类型值是false，把类型当成0运算

//布尔类型相加和相减操作

var flag = true;

document.write(flag+1); // 2,当boolean类型是true时候，把类型当成1运算

document.write("<hr/>");

var flag1 = false;

document.write(flag1+1); //1,当boolean类型是false时候，把类型当成0运算

第四个：==和===区别

* ==比较的是值

* === 比较的是值和类型

* 代码

var mm = "10";

if(mm==="10") {

alert("10");

} else {

alert("other");

}

8、js的数组

* 什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储

* js里面定义数组的方式

第一个：var arr1 = [];

第二个：var arr2 = ["10",10,true]; //可以写任意的类型

第三种：var arr3 = new Array(3); 

** 表示定义数组名称是arr3，数组的长度是3

第四种：var arr4 = new Array(4,5,6);

** 表示定义数组名称是arr4，数组里面的值4 5 6

* 数组里面的属性：查看数组的长度 length

* 获取数组里面的值

** 遍历数组得到里面的值

//遍历

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

var a = arr3[i];

document.write(a);

document.write("<br/>");

}

* 数组的长度：在js里面数组的长度可变的

** 数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串

9、js的string对象

（1）字符串对象

* 创建字符串：var a = "abc"; var b = new String("bb");

（2）属性 length 字符串的长度 

（3）方法

第一类：与html相关的方法（设置字符串的样式的方法）

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

** document.write(a.bold());

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

** document.write(a.fontcolor("red"));

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

** document.write(a.fontsize(7));

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

** document.write(a.link("04-练习99乘法表.html"));

第二类：与java相似的方法（在java里面也有类似的方法）

= charAt() 返回在指定位置的字符。 如果位置不存在字符，返回空字符串""

** var str = "abcdefg";

document.write(str.charAt(1));

= concat() 连接字符串 

** document.write(str.concat(str1));

= indexOf() 检索字符串，得到检索的字符的位置，如果没有找到返回-1 

** var str2 = "ABCD";

document.write(str2.indexOf("R"));

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

** var str3 = "a-b-c";

var arr = str3.split("-");

document.write("length: "+arr.length);

= substr() 从起始索引号提取字符串中指定数目的字符。 

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

** var str4 = "MARYJACKLUCY";

document.write(str4.substr(2,3));  

//RYJ, 第一个参数表示从哪个位置开始，第二个参数表示向后取几个位置的值

document.write("<br/>");

document.write(str4.substring(2,3)); 

//R ，第一个参数表示从哪个位置开始，第二个参数到哪个位置结束（不包含这个位置） [2,3)

10、js的Array对象

（1）创建数组

（2）属性

* length 设置或返回数组中元素的数目 

** //length属性

var arr1 = new Array(4,5,6);

document.write(arr1.length);

（3）方法

= concat()：连接数组

** var arr2 = [6,7,8];

document.write(arr1.concat(arr2));

= join()：把数组根据指定字符进行分割

** var arr3 = new Array(3);

arr3[0] = "mary";

arr3[1] = "jack";

arr3[2] = "lucy";

document.write(arr3);

document.write("<br/>");

document.write(arr3.join("-"));

= pop() 删除并返回数组的最后一个元素 

** var arr4 = ["aa","bb","cc"];

//输出数组的原始的值

document.write("old: "+arr4);

//输出执行pop方法之后的返回值

document.write("<br/>");

document.write("return: "+arr4.pop());

//输出执行pop方法之后新的数组内容

document.write("<br/>");

document.write("new: "+arr4);

= push() 向数组的末尾添加元素，并返回新的长度 

** var arr5 = ["zhangsan","lisi","wangwu"];

        //输出数组的原始的值

document.write("old: "+arr5)

document.write("<br/>");

//输出执行push()方法之后的返回值

document.write("return: "+arr5.push("lucy"));

//输出执行push()方法之后新的数组内容

document.write("<br/>");

document.write("new: "+arr5);

** 向数组里面使用push方法添加一个数组

document.write("<hr/>");

var arr6 = ["AAA","BBB"];

var arr7 = ["CCC","DDD"];

//输出数组arr6的原始的值

document.write("old: "+arr6)

//输出执行push()方法之后的返回值

document.write("<br/>");

document.write("return: "+arr6.push(arr7));

//输出执行push()方法之后新的数组内容

document.write("<br/>");

document.write("new: "+arr6);

//遍历数组

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

alert(arr6[i]);

}

= reverse() 颠倒数组中元素的顺序 

** var arr8 = ["zhaoliu","wanger","niuqi"];

document.write(arr8);

document.write("<br/>");

document.write(arr8.reverse());

11、js的Math对象

（1）进行数学运算，在Math对象里面的方法，直接使用Math.方法名称进行调用

（2）方法

= ceil(x) 对一个数进行上舍入。

= floor(x) 对一个数进行下舍入。 

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

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

** 代码

var a = 10.2;

//ceil(x) 对一个数进行上舍入。

document.write(Math.ceil(a)); //11

document.write("<hr/>");

//floor(x) 对一个数进行下舍入。

document.write(Math.floor(a));

document.write("<hr/>");

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

document.write(Math.round(a));

document.write("<hr/>");

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

document.write(Math.random());

//生成0-9之间的随机数 0.0 -- 0.9之间的值

document.write("<hr/>");

document.write(Math.floor(Math.random()*10));

12、js的Date对象

（1）进行日期操作的对象

（2）使用Date对象，new Date();

（3）方法

= toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 

** //得到当前的时间

var date = new Date();

document.write(date.toLocaleString());

= 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份 

** document.write(date.getFullYear());

= 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11) 

** document.write(date.getMonth()+1);

= 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) 

** 如果当前的星期是星期日，返回的是0 

** document.write(date.getDay())

= 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) 

= 得到当前的小时  getHours()

= 得到当前的分   getMinutes()

= 得到当前的秒 getSeconds()

** document.write(date.getHours());

document.write("<br/>");

document.write(date.getMinutes());

document.write("<br/>");

document.write(date.getSeconds());

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

13、js的RegExp对象

 （1）RegExp 对象表示正则表达式

 （2）正则表达式：规定字符串出现的规范

 （3）使用：new RegExp("正则表达式")

    （4）方法：

 * test() 检索字符串中指定的值。如果存在匹配的字符返回 true,如果不存在匹配的字符返回 false。

 （5）代码

 //创建正则表达式对象

         var reg = new RegExp("[a]");

         //创建一个字符串

 var name = "lisi";

    //使用正则对象匹配字符串

   var flag = reg.test(name);

 document.write(flag);

14、js的bom对象

 （1）script标签放置位置

 * 建议放到</body>后面

 * html的解析是从上到下进行解析的，如果在head里面就获取输入项里面的值，因为还没有解析到

 输入项，所以肯定得不到值。

 （2）什么是bom:浏览器对象模型

 第一个：navigator

* 浏览器的信息

 第二个：screen

* 屏幕的信息

 第三个: history

* 访问地址的历史信息

 第四个: location

* 设置url

* href 设置或返回完整的 URL

 第五个: window（***）

 * window对象是窗口对象，是顶层对象

 * 方法

 setInterval("执行的js代码",毫秒数) 在指定的时间内，重复执行js代码

** 有两个参数

*** 第一个参数要执行的js代码（js的方法），第二个参数是时间（毫秒数）

** 代码

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

 setTimeout("执行的js代码",毫秒数) 在指定的时间之后，执行js代码，执行一次

** 有两个参数

*** 第一个参数要执行js代码（js的方法），第二个参数是时间（毫秒数）

** 代码

setTimeout("alert('settimeout');",3000);

 clearInterval(id) 取消由 setInterval() 设置的 timeout。

 clearTimeout(id) 取消由setTimeout() 方法设置的 timeout。

15、js的全局变量和局部变量

 * 回顾：在java里面成员变量

 （1）全局变量

 * 在js里面，如果在一个script标签里面定义变量，在页面中的其他script标签里面都可以使用

 （2）局部变量

 * 在js的方法里面定义一个变量，这个变量只能在方法里面使用。

 （3）浏览器里面自带的调试工具

 * ie浏览器：点击键盘上f12，在页面下面出现一个条，点击控制台，出现调试的信息。

 * 火狐浏览器：点击键盘上f12，在下面出现一个条，点击控制台，出现调试的信息。

 ** 火狐浏览器里面需要安装firebug插件

 * 谷歌浏览器：点击键盘上的f12,在下面出现一个条，点击console,出现调试的信息。

16、js的全局函数

 （1）不属于任何对象，可以使函数

 （2）主要的函数

 eval(): 把字符串当成js代码执行

 ** var str = "alert('123456');";

 //alert(str);

 eval(str);

 

 isNaN() 检查某个值是否不是数字

 ** 如果是数字返回 false,如果不是一个数字返回 true。

 parseInt() 解析一个字符串并返回一个整数

 ** var str1 = "123";

 alert(parseInt(str1)+1);

 encodeURI() 把字符串编码为 URI

 ** var str2 = "abc测试中文";

 var encodestr2 = encodeURI(str2);

 document.write(str2);

 document.write("<br/>");

 document.write(encodestr2);

 decodeURI() 解码某个编码的 URI

 ** var decodestr2 = decodeURI(encodestr2); 

JavaScript高级

1、js的函数

（1）在java里面定义方法

public void/int 方法名称(参数列表) {

方法体和返回值;

}

（2）在js里面定义函数有三种方式

第一种：使用关键字 function 方法名称(参数列表) { 方法体和返回值 }

* 注意一：参数列表，不需要写类型（var），直接写参数名称

* 注意二：返回值，根据实际需要可以有也可以没有

* 代码

function test1() {

alert("123456");

}

//test1();

//实现两个数的相加

function add1(a,b) {

var sum = a+b;

return sum;

}

alert(add1(2,3));

第二种：匿名函数，使用关键字function(参数列表) { 方法体和返回值; } 

* 代码

//第二种定义方式

var test1 = function(a,b) {

return a+b;

}

//调用函数

alert(test1(3,4));

第三种：动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）

* 使用js里面的内置对象 new Function("参数列表","方法体和返回值")

* 代码

//第三种定义方式

var param = "a,b";

var method = "var sum;sum=a+b;return sum;";

var test2 = new Function(param,method);

//调用函数

alert(test2(5,6));

2、js的函数的重载

（1）在java里面存在重载，方法名称相同，参数列表不同

（2）js里面是否存在函数的重载？

第一，在js不存在重载

第二，可以使用js函数里面arguments数组模拟重载的效果

（3）模拟重载的效果

* 在js里面有一个数组arguments，保存传递进来的参数，使用这个数组模拟重载的效果

* 代码

//模拟重载的效果

//在js函数里面有一个数组 arguments，保存传递进来的参数的

function add1() {

//alert(arguments.length);

//遍历数组

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

alert(arguments[i]);

}*/

//模拟重载的效果（有几个参数，实现这几个参数的相加）

var sum = 0;

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

sum += arguments[i];

}

return sum;

}

//调用

alert(add1(1,2));      

alert(add1(1,2,3));    

alert(add1(1,2,3,4)); 

3、js的事件

（1）什么是事件：在html的元素里面可以触发事件调用js里面的函数

（2）在html的标签上面如何使用事件

* 有三种方式

* 第一种：使用事件属性调用js方法

** 代码

<input type="button" value="第一种方式" onclick="add1();"/>

* 第二种：首先得到要绑定的标签，在使用事件的属性

** 代码

//第二种方式绑定事件

document.getElementById("buttonid").onclick = add1;

* 第三种：首先得到要绑定的标签，写js的代码

** 代码

document.getElementById("buttonid1").onclick = function() {

alert("aaaaa");

};

4、js的常用的事件

（1）onload事件和onclick事件

* onload：html页面在加载时候触发事件，调用响应的js方法

**  <body onload="test1();">

* onclick：鼠标点击事件

** <input type="text" onclick="test2();"/>

（2）onfocus事件和onblur事件

* onfocus：获取焦点

* onblur：失去焦点

（3）onmouseover 鼠标被移到某元素之上 

（4）onmouseout 鼠标从某元素移开 

（5）onkeypress：点击键盘上面的某个键，调用方法

* <input type="text" id="textid1" onkeypress="key1(event);"/>

* function key1(obj) {

//alert(obj.keyCode);

//如果点击键盘上面的回车键 ，调用方法  13

if(obj.keyCode==13) {

alert("key1");

}

}

5、js的dom对象

（1）什么dom：document  object  model：文档对象模型

* 文档：指的是标记型文档（html、xml）

* 对象：在对象里面有属性和方法

** 使用dom里面提供的对象里面的属性和方法，对标记型文档进行操作

* 要想使用dom对象标记型文档进行操作，首先需要解析标记型文档（html为例）

** html中包含 标签、属性、文本内容

（2）使用dom解析html

* 解析过程：根据html的层级结构在内存中分配一个树形结构

* document对象，代表整个文档

* element对象，代表标签

* 属性对象

* 文本对象

* Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找

（3）DHTML的简介

* 不是一种技术，是很多技术的简称。

* 包含的技术：

** html：封装数据

** css：使用属性和属性值修改数据的样式

** ECMAScript：语句和语法

** DOM：对标记型文档进行操作

6、document对象

（1）document对象代表整个文档

（2）方法

第一个：write()，向页面输出内容，可以输出html代码

* document.write("aa");

document.write("<hr/>");

第二个：getElementById(): 获取标签对象，通过标签的id值进行获取

* var input1 = document.getElementById("textid");

document.write(input1.value);

第三个：getElementsByName(): 根据标签里面name属性的值得到标签对象，返回数组

* //getElementsByName()

var inputs1 = document.getElementsByName("name1");

//alert(inputs1.length);

//获取每个input里面的value值

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

var input1 = inputs1[i];

//得到value值

alert(input1.value);

}

* 如果只有一个标签，使用getElementsByName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值

* var inputs2 = document.getElementsByName("name2");

//alert(inputs2.length);

alert(inputs2[0].value);

第四个：getElementsByTagName()：根据标签的名称获取标签对象，返回数组

* var inputs3 = document.getElementsByTagName("input");

//alert(inputs3.length);

//遍历数组

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

var input3 = inputs3[i];

//得到标签的value

alert(input3.value);

}

* 如果只有一个标签，使用getElementsByTagName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值

var arr = document.getElementsByTagName("input");

alert(arr[0].value);

7、innerHTML属性

（1）innerHTML属性不是dom里面属性

（2）实现什么功能

第一，获取标签里面的文本内容

** var span1 = document.getElementById("spanid");

alert(span1.innerHTML);

第二，向标签里面设置内容（可以写html代码）

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

div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";

8、练习：动态生成表格

（1）实现的步骤

* 首先创建页面，在页面中有两个普通输入项和按钮（有事件）

* 点击生成按钮，生成对应的表格

** 首先得到输入的行和列

** 根据行和列生成表格

*** 循环行 <tr>

*** 在行里面循环单元格 <td>

（2）代码

//实现生成表格

function add1() {

//得到输入的行和列

var hang = document.getElementById("hid").value;

var lie = document.getElementById("lid").value;

//alert(hang+" :: "+lie);

var tab = "<table border='1' cellpadding='10'>";

//生成行

for(var i=1;i<=hang;i++) {

tab += "<tr>";

//生成单元格

for(var j=1;j<=lie;j++) {

tab += "<td>aaaaa</td>";

}

tab += "</tr>";

}

tab += "</table>";

//alert(tab);

//获取div标签

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

//向div里面写html代码

div1.innerHTML = tab;

}

9、表单的提交

（1）在html中写form标签，提交方式

提交表单有三种方式

第一种方式：在form标签里面，写提交按钮 <input type="submit"/>

= 代码

<form method="get">

username: <input type="text" name="username"/>

<br/>

password: <input type="password" name="password"/>

<br/>

<input type="submit" value="提交"/>

</form>

第二种方式：在form标签里面，写普通按钮 <input type="button"/>

= 代码

//使用button进行表单的提交

function form01() {

//得到form标签

var form01 = document.getElementById("form01");

//提交form表单

form01.submit();

}

第三种方式：使用超链接提交数据

* <a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>

* <a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>

10、表单校验

（1）规范数据的输入的格式

（2）如何进行表单的校验

第一，使用submit进行表单提交，进行表单校验

* 使用事件 onsubmit事件，写在form标签里面

<form method="get" onsubmit="return checkForm();">

* 如何return返回的值true可以提交表单，如果返回false不会提交表单

= 代码

//submit表单的校验

function checkForm() {

//判断用户名不能为空

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

var password = document.getElementById("passwordid").value;

if(username == "") {

alert("用户名不能为空");

return false;

}

if(password == "") {

alert("密码不能为空");

return false;

}

return true;

}

第二，使用button进行表单校验

= 代码

//使用button提交表单，进行校验

function form01() {

//得到输入项里面的值，判断值是否为空，如果为空不进行提交

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

var password = document.getElementById("passwordid").value;

//如果值为空，不进行提交

if(username == "") {

alert("用户名不能为空");

} else if(password == "") {

alert("密码不能为空");

} else {

//得到form标签

var form01 = document.getElementById("form01");

form01.submit();

}

}

11、json的简介

（1）JavaScript Object  Notation，JavaScript 对象表示法。json是数据的交换格式，比xml更加轻巧。

json是js的原生的格式，通过js操作json不需要依赖其他东西，直接对json格式进行操作。

（2）json数据格式

* json有两种数据格式

第一种：json的对象的格式

* 写法 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}

** 类似于key-value形式

** 名称和值之间使用冒号隔开，多个值之间使用逗号隔开

** json数据的名称是字符串的类型，json数据的值 string, number, object, array, true, false, null

** 具体数据的格式 {"name":"zhangsan","age":20,"addr":"nanjing"}

第二种：json的数组的格式

* 写法 [json对象1,json对象2........]

** 在数组里面有多个json对象，多个json对象之间使用逗号进行隔开

** 具体数据的格式 [{"name":"lucy","age":20},{"name":"mary","age":30}]

（3）可以使用json的这两种格式组成更加复杂json的格式

* 复杂的格式 {"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}

12、js解析json

（1）js解析json的对象的数据格式

* 通过json对象数据格式里面的name的名称得到name对应的值

* 代码

//js解析json的对象格式的数据

var json1 = {"username":"lucy","age":20,"addr":"nanjing"};

//对json的对象格式数据进行操作

document.write(json1.username);

document.write("<br/>");

document.write(json1.age);

document.write("<br/>");

document.write(json1.addr);

（2）js解析json的数组的数据格式

* 根据数组的下标得到json对象，解析json对象，根据数据的名称得到值

* 遍历json数组，得到json数组里面每个json对象，解析每个json对象，根据json对象的数据

的名称得到值

* 代码

//js解析json数组格式的数据

var json2 = [{"username":"zhangsan","age":20,"addr":"beijing"},

{"username":"lisi","age":30,"addr":"tianjin"},

{"username":"wangnwu","age":40,"addr":"nanjing"}];

//js操作数组，遍历数组，根据数组的下标得到值

//遍历json数组格式，得到的是一个json对象，解析json对象（根据名称得到值）

//得到第二个json对象里面的age的值  数组下标从0开始的

document.write(json2[1].age);

//得到第一个json对象里面的addr的值

document.write("<br/>");

document.write(json2[0].addr);

//遍历json数组的格式

document.write("<hr/>");

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

//得到数组里面的每一个json对象

var person = json2[i];

//得到每个对象里面的值

var username = person.username;

var age = person.age;

var addr = person.addr;

document.write("username:"+username+" ; age:"+age+" ; addr:"+addr);

document.write("<br/>");

}

13、json练习：人员信息的显示

（1）把多个人员的信息存到json的数据格式里面，通过js解析json的数据格式，把所有的人员显示到页面的表格里面。

（2）[{"name":"zhangsan","age":20,"addr":"beijing"},

{"name":"lisi","age":30,"addr":"tinajin"},

{"name":"wangwu","age":40,"addr":"nanjing"}]

（3）代码

//创建json的数据的格式，用于存储人员的信息

var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},

{"name":"lisi","age":30,"addr":"tinajin"},

{"name":"wangwu","age":40,"addr":"nanjing"}];

//使用js解析persons格式，把这些人员信息显示到页面上

//遍历json的数组，得到每个人员的信息

//生成表格 ，把数据放到表格里面，把表格显示到页面上

function showData() {

var tab = "<table border='1' cellpadding='10'>";

//添加表头

tab += "<tr><th>姓名</th><th>年龄</th><th>地址</th></tr>";

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

//得到数组里面的每个json对象

var person = persons[i];

//得到每个json对象里面值

var name = person.name;

var age = person.age;

var addr = person.addr;

//生成表格

tab += "<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>";

}

tab += "</table>";

//alert(tab);

//把table表格的代码显示到页面上，使用innerHTML属性

//得到div标签

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

//向div里面写table代码

div1.innerHTML = tab;

}

14、element对象

    ** 要操作element对象，必须先获取到element，使用document里面相应的方法获取

    ** 方法

            * 获取属性里面的值  getAttribute("属性的名称");

                    *** var input1 = document.getElementById("inputid");

                          // alert(input1.value);

                          alert(input1.getAttribute("value"));

            * 设置属性的值  setAttribute();

                    *** input1.setAttribute("class","haha");

            * 删除属性 removeAttribute("属性名称");

                    *** input1.removeAttribute("name");

    ** 想要获取标签下面的子标签

                * 使用属性childNodes，但是这个属性的兼容性很差

                * 获取标签下面子标签的唯一有效办法，就是使用getElementsByTagName()方法

15、Node对象

    * nodeName

    * nodeType

    * nodeValue

    

    * 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

    * 标签节点对应的值

                nodeType：    1

                nodeName：    大写标签名称    比如SPAN

                nodeValue：    null

    * 属性节点对应的值

                nodeType：    2

                nodeName：    属性名称

                nodeValue：    属性的值

    * 标签节点对应的值

                nodeType：    3

                nodeName：    #text

                nodeValue：    文本内容

   

    <ul>

            <li>aaaaaaaa</li>

            <li>bbbbbbbb</li>

    </ul>

    * 父节点

            - ul是li的父节点

            - parentNode

    * 子节点

            - li是ul的子节点

            - childNodes: 得到所有的子节点，但是兼容性很差

            - firstChild：获取第一个子节点

            - lastChild： 获取最后一个子节点

    * 同辈节点

            - li之间关系是同辈节点

            - nextSibling： 返回一个给定节点的下一个兄弟节点

            - previousSibling： 返回一个给定节点的上一个兄弟节点

16、操作dom树

        ** appendChild方法

                    - 添加子节点到末尾

                    - 特点：类似于剪切粘贴的效果

        ** insertBefore（newNode, oldNode）方法

                    - 在某个节点之前插入一个新的节点

                    - 两个参数：要插入的节点、在谁之前插入

                    - 插入一个节点，节点不存在，需要创建

                                1、创建标签

                                2、创建文本

                                3、把文本添加到标签下面

                        **代码：

                            function insert1(){

var li5 = document.createElement("li");//创建节点li

var text5 = document.createTextNode("niuba");//创建文本

var li3 = document.getElementById("li3");//获取li3节点

var ul1 = document.getElementById("ul1");//获取ul1标签

li5.appendChild(text5);//将text5文本添加到li5标签里

ul1.insertBefore(li5,li3);//将li5节点插入到li3节点之前    

                 }

            *** 不存在insertAfter()方法

    

      ** removeChild方法：删除节点

                   - 通过父节点删除，不能自己删除自己

                 ** 代码：                     

               function remove1(){

var ul1 = document.getElementById("ul1");//获取父节点

var li4 = document.getElementById("li4");//获取子节点

ul1.removeChild(li4);//删除子节点

}

       ** replaceChild(newNode, oldNode)：替换节点

                      - 不能自己替换自己，通过父节点进行替换

                      - 两个参数：新节点、旧节点

                ** 代码：

                   function replace1(){

                          var li3 = document.getElementById("li3");                          //获取li3标签

                          var li5 = document.createElement("li");                              //创建li5标签

                          var text5 = document.createTextNode("zhangsanfeng");  //创建文本内容

                          li5.appendChild(text5);                                                        //将文本内容写到li5标签里面去

                          var ul1 = document.getElementById("ul1");                        //获取ul1标签

                          ul1.replaceChild(li5,li3);                                                       //将li5标签替换li3标签

                   } 

          ** cloneChild()：复制节点

                 * 代码：                     

              function copy1(){

var ul1 = document.getElementById("ul1");//获取ul1节点

var ulcopy = ul1.cloneNode(true);//复制节点

var div1 = document.getElementById("div1");//获取div1

div1.appendChild(ulcopy);//添加节点

}