javascript是一种即时 javascript是一种基于

转载

mob64ca13f87273 2024-05-24 17:47:17

文章标签 javascript是一种即时 javascript 数组字符串 java 文章分类 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标签里面写js代码了，不会执行

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

* 代码

//不要在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方法

** 代码

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

** 代码

//第二种方式绑定事件

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

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

** 代码

document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");
};

4、js的常用的事件

（1）onload事件和onclick事件

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

** <body οnlοad="test1();">

* onclick：鼠标点击事件

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

（2）onfocus事件和onblur事件

* onfocus：获取焦点

* onblur：失去焦点

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

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

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

* <input type="text" id="textid1" οnkeypress="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标签里面

* 如何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)：替换节点
                      - 不能自己替换自己，通过父节点进行替换
                      - 两个参数：新节点、旧节点

** 代码：

** cloneChild()：复制节点

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标签
                   }

* 代码：

function copy1(){
var ul1 = document.getElementById("ul1");  //获取ul1节点
var ulcopy = ul1.cloneNode(true);  //复制节点
var div1 = document.getElementById("div1");  //获取div1
div1.appendChild(ulcopy);  //添加节点
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。