JS笔记
JavaScript
一.简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言，是可插入 HTML 页面的编程代码，JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
二.用法
1.代码规范
1.所有JavaScript代码必须写在< script> 与 < /script>之间
2.< script> 标签可被放置在 HTML 页面的 < body> 和 < head> 部分或者是由.js结尾的外部文件中
<script>
alert("我的第一个 JavaScript");
script>
2.输出
(1)使用 window.alert() 弹出警告框
<script>
window.alert("你好");
script>
(2)使用 document.write() 方法将内容写到 HTML 文档中
注意：请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
<script>
document.write("你好");
script>
(3)使用 innerHTML 写入到 HTML 元素。
<body>
<div id="666">可恶div>
body>
<script type="text/javascript">
document.getElementById("666").innerHTML="不好";
script>
//输出结果是不好
二.语法
大致语法与java相同
1.JavaScript 变量
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值
<script>
var x,y
x=5
y="qwe"
script>
2.JavaScript 数据类型
在 JavaScript 中有 5 种不同的数据类型：
string、number、boolean、object、function
3 种对象类型：
Object、Date、Array
2 个不包含任何值的数据类型：
null、undefined
(1).值类型(基本类型)：
字符串(String):
字符串是存储字符（比如 “1234”）的变量。
字符串可以是引号中的任意文本。可以使用单引号或双引号
定义方式
<script>
String str=new String("12345"); //定义方式1
var str="123456"; //定义方式2
script>
属性
<script>
var st = "123456";
var l = str.length; //字符串的长度
script>
方法：
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
数字(Number)
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
定义方法
<script>
var num=new Number(666.666);//方法一
var num1=Number(666);//方法二
script>
方法
| 方法 | 描述 |
|---|---|
| toString() | 把数字类型转成字符串类型 |
| toPrecision() | 把数字格式化为指定的长度。也就是小数后面保留几位 |
布尔(Boolean)
布尔（逻辑）只能有两个值：true 或 false。
对空（Null）
可以通过将变量的值设置为 null 来清空变量
未定义（Undefined）
Undefined 这个值表示变量不含有值。
Symbol
Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
(2)引用数据类型：
对象(Object)、数组(Array)、函数(Function)。
(3)声明变量类型
可以使用new来声明类型
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象
<script>
var x=new Number;
var y=new Boolean;
script>
(4)检测变量类型
typeof 操作符
<script>
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
script>
注意：
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
(5)类型转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值
<script>
var x=12;
var x1=String(x); // 将变量 x 转换为字符串并返回
x.toString() // 将变量 x 转换为字符串并返回
var x2=Number(x1); // 将变量 x1 转换为数字并返回
Number(false) // 返回 0
Number(true) // 返回 1
//自动类型转换
"5" + 1 // 返回 "51" 1 转换为 "1" 运算符是+自动转换成字符串
"5" - 1 // 返回 4 "5" 转换为 5
script>
代码总结
<script>
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];// Array通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};
// Object 通过对象字面量赋值
script>
3.JavaScript对象
在 JavaScript中，几乎所有的事物都是对象。
(1)对象的定义
<script>
var student = {
name:"张三",
age:23,
sex:"男"
};
script>
(2)对象的访问
<script>
student.name; //方式一
student["name"]; //方式二
script>
(3)对象的方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
//访问 student 对象的 fullName() 方法:
<script>
var student = {
firstName: "张",
lastName : "三",
age:23,
fullName : function()
{
return this.firstName+ this.lastName;
}
};
document.write(student.fullName());
script>
(3)几种常见对象
Date 对象
定义方式：
<script>
var myDate=new Date();
script>
方法
| 方法 | 描述 |
|---|---|
| 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) 的分钟差。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 |
| 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)。 |
| setTime() | setTime() 方法以毫秒设置 Date 对象。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
| toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
| toJSON() | 以 JSON 数据格式返回日期字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleString() | 据本地时间格式，把 Date 对象转换为字符串。 |
| toString() | 把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
| valueOf() | 返回 Date 对象的原始值。 |
Math 对象
特点： 该对象不需要创建 直接对象名点上方法
<script>
Math.random()；随机产生0----1 之间的随机数
var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数
var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整
script>
Array数组对象
JS中的数组元素可以是任意类型
JS中的数组长度是可变的
创建数组对象的方式
<script>
//方式一：
var arr=new Array();
arr[0]=20;
arr[1]="你好";
arr[2]="true";
//方式二：
var arr2=new Array(10,20,30,40,50,60);
//方式三：可以规定数组长度
var arr3=new Array(3);
arr3[3]=10;//数组越界也可以存进去,所以JS中的数组长度是可变的
//方式四：简写
var arr4=[20,10,30,40,5,60];
script>
遍历数组
<script>
//一维数组
for(var i=0;i<arr4.length;i++){
document.write(arr4[i]);
document.write(< br>)
}
//二维数组
var arr5=[[2,3],[1,43],[12,33]];
for(var i=0;i<arry5.length;i++){
for(var j=0;j<arry5[i].lebgth;j++){
document.write(arr5[i] [j]);
document.write(< br>)
}
}
script>
方法
| 方法 | 描述 |
|---|---|
| concat() | 连接俩个或更多个数组，并返回结果 |
| copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
| entries() | 返回数组的可迭代对象。 |
| arr3.join("-") | 把数组元素转换成字符串，可以指定拼接符号 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组末尾添加多个元素并返回新的数组长度 |
| unshift() | 向数组的开头添加一个或多个元素，并返回新的元素 |
| reverse() | 颠倒数组中元素的数据 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从已有的数组返回选定的元素 |
| arr4.slice(0,2) | 从0索引处截取俩个元素放在新数组中 |
| sort() | 排序，如果不传参，默认按照字典顺序排列；如果需要按照大小排序，则需要传入一个比较器 |
| splice() | 删除元素，并向数组添加新的元素 |
| arr6.splice(1,3,1,2,3) | 从1索引处删除3个元素，然后添加若1,2,3元素 |
| filter() | 检测数值元素，并返回符合条件所有的元素的数组 |
| every() | 检测数值元素的每个元素是否都符合条件。 |
| isArray() | 判断对象是否为数组 |
| fill() | 使用一个固定值来填充数组 |
| keys() | 返回数组的可迭代对象，包含原始数组的键(key)。 |
| find() | 返回符合传入测试（函数）条件的数组元素。 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| from() | 通过给定的对象中创建一个数组。 |
| includes() | 判断一个数组是否包含一个指定的值。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| lastIndexOf() | 搜索数组中的元素，并返回它最后出现的位置。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左）。 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| valueOf() | 返回数组对象的原始值。 |
排序演示
<script>
var arr6=[1,4,6,8,2,5,3,99,86,22,11];
arr6.sort(function(a,6){
return a-b;
});//排序
arr6.sort((a,b)=>a-b);//Es6提供的新语法=>
alert(arr6);
script>
filter演示
<script>
aar=[100,23,44,55,77,22,90,65];
var newArr=arr.filter((ele)=>ele>50);
forEach：遍历
arr.forEach(function(ele){
alert(ele);
});
script>
全局方法对象
特点:该对象中的方法调用，不需要对象的引用，可直接使用
<script>
isNaN：==号判断不出来俩个NaN是否相等，所以可以使用isNaN来判断一个数是不是NaN
var v=NaN; var v1="abc"; var v2=123;
var b=isNaN(v);
var b1=isNaN(v1);
var b2=isNaN(v2);
script>
parseInt() 解析一个字符串并返回一个整数。
从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
<script>
var v=“152abc”
var v="123";
var z=parseInt(v)+1;
script>
<script>
parseInt()把字符串转换为数字
parseFloat()//把字符串转换为浮点数
decodeURI(“sdaf$af”);//解码
encodeURI(“啊啊”);//编码
script>
4.JavaScript函数
函数声明后不会立即执行，会在我们需要的时候调用到。
用函数计算来个数的乘积
(1)void运算符
拦截返回值，一般结合a标签一起使用
注销a标签跳转功能，保留可被点击的功能
<a href="javascript:void(0);" onclick="exit();">退出a>
(2)函数的用法
<script>
方式一：
function cj(a,b)
{
return a*b;
//return cj.length; 返回函数调用过程接收到的参数个数
}
document.write(cj(4,3));
var f = cj(4, 3);//JavaScript 函数作为一个值使用
var t = cj.toString(); //toString() 方法将函数作为一个字符串返回:
方式二：
var x=function(a,b)
{
return a*b;
}
document.write(x(4,3));
//函数的自调用
(function () {
var x = "Hello!!"; // 我将调用自己
})();
script>
5.正则表达式
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
(1)创建正则对象
<script>
方式一：
var v=new RegExp(‘^[a-z]{6,16}$',i);
方式二：
var rgex=/^[a-z]{6,16}$/i;
//i代表不区分大小写
script>
(2)用法
| 方法 | 描述 |
|---|---|
| search() | 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。 |
| replace() | 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 |
| exec() | 截取符合正则的数据 |
| test() | 判断字符串s是否符合正则 |
<script>
regex.test(s)//判断字符串s是否符合正则
var str = "ni hao";
var n = str.search(/hao/i);
var str1 = "ni hao";
var n1 = str1.search(/ni/i,"wo");
//用wo代替ni
/e/.exec("The best things in life are free!");
//输出e
//查找出三个字符组成的单词
var rgex=/\b[a-z]{3}\b/g; //g为全文匹配，不加只能匹配第一个
script>
正则表达式表单验证实例
<script>
/*是否带有小数*/
function isDecimal(strValue ) {
var objRegExp= /^\d+\.\d+$/;
return objRegExp.test(strValue);
}
/*校验是否中文名称组成 */
function ischina(str) {
var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验是否全由8位数字组成 */
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验电话码格式 */
function isTelCode(str) {
var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
return reg.test(str);
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
script>
6.JavaScript 表单
(1)表单验证
以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交,可以通过 HTML 代码来调用：
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
script>
(2)验证输入的数字
输入1-10的数字表单演示
<body>
<h1>JavaScript 验证输入h1>
<p>请输入 1 到 10 之间的数字：p>
<input id="numb">
<button type="button" onclick="myFunction()">提交button>
<p id="demo">p>
<script>
function myFunction() {
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
script>
body>
(3)HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
<body>
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
form>
<body>
7.事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
| 事件 | 描述 |
|---|---|
| onchange | 元素发生改变 |
| onclick | 用户点击 元素 |
| onmouseover | 用户在一个元素上移动鼠标 |
| onmouseout | 用户从一个元素上移开鼠标 |
| onmousedown | 用户按下鼠标按键 |
| onmouseup | 用户抬起鼠标按键 |
| which | 获取鼠标按键 左1 右3 中2 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| function show(e){alert(e.keyCode)} | 监听按的是什么键 |
| onblur | 元素失去焦点时触发 |
| onfocus | 元素获取焦点时触发 |
| onfocusin | 元素即将获取焦点时触发 |
| onfocusout | 元素即将失去焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本时触发 ( < input=“search”>) |
| onselect | 用户选取文本时触发 ( < input> 和 < textarea>) |
| onsubmit | 监听表单是否可以被提交到后台，return true;表单会被提交，false则不提交 |
| preventDefault() | 阻止表单提交 |
| currentTarget | 绑定了事件的元素 |
| target | 触发了事件的元素 |
<script>
绑定事件的方式1:将事件写到标签内部
function show(){
alert(this);
alert("谈了");
}
show();
方式2:使用代码来绑定
document.getElementById("btn1").onclick=function(){
alert("谈了");
}
var bts=document.getElementsByTagName("button");
for(var i=0;i<bts.length;i++){
bts[i].ondblclick=function(){
this.style.background="red";
}
}
script>
三.BOM浏览器对象模型
把浏览器的各个组成部分看作对象
1.Window()窗口对象
window对象中的属性
| 属性 | 描述 |
|---|---|
| window.document | 获取html文档对象 |
| window.location | 获取地址栏对象 |
| window.history | 获取历史记录对象 |
| window.screen | 获取屏幕对象 |
| window.navigator | 获取整个浏览器对象 |
window对象中的方法
window对象可以省略不写
| 方法 | 描述 |
|---|---|
| window.confirm(“确定吗？”) | 弹出一个确认取消框 |
| window.prompt(“请输入地址”) | 弹出一个输入框 |
| var v=window.open(“链接”) | 打开一个新窗口对象 |
| window.close() | 关闭一个窗口 |
定时器
<script>
var id=window.setTimeout(function(){
alert("执行了");
},3000);//执行一次，间隔3s
clearTimeout(id);//取消定时器
//循环定时器
var id=window.setInterval(function(){
alert("执行了");
},3000);
clearInterval(id);//取消定时器
script>
2.Location()地址栏对象
<script>
var loc=window.location;//获取地址栏对象
//href:跳转页面
var text=loc.href;//获取地址栏里面的内容
alert(text);
loc.href="链接";
//设置地址栏里面的内容可以跳转页面
location.reload();//刷新页面
script>
3.history()历史记录对象
| 方法 | 描述 |
|---|---|
| window.history.back() | 回到上个页面 |
| window.history.go(-1) | 回到上个页面 |
| window.history.go(1) | 进入下一个页面 |
四.DOM
文档对象模型:Document Object Model
将HTML文档的各个组成部分封装为对象
HTML组成成分：
Element 标签对象
Text 文本对象
Attribute 属性对象
Comment 注释对象
Document 整个文档对象
Node 节点对象
1.标签对象
(1)通过id获取标签对象
<script>
var doc=window.document; //获取整个HTML文档对象
var myDIV=doc.getElementById("div1");
alert(myDIV);
//标签对象中的属性 innerText 可以设置或者获取标签之间的文本
myDIV.innerText+="abc"; //+= 追加
/*innerHTML 获取标签之间的HTML内容 */
var text = document.getElementById("div1").innerHTML;
alert(text);
script>
(2)通过class属性值,获取多个标签对象
<script>
var arr=document.getElementsByClassName("mydiv");
for(var i=0;i<arr.length;i++){
if(i%2==0){
arr[i].style.color="red";
}else{
arr[i].style.color="blue";
}
}
script>
(3)通过标签名获取多个表签对象,返回的是数组
<script>
var arr=document.getElementsByTagName("div");
arr[0].style.color="red";//返回的是数组
script>
(4)针对表单标签,
可以通过表单标签的name值来获取多个标签对象,返回的是数组
<script>
var arr=document.getElementsByName("username");
arr[0].style.color="red";
var arr2=document.getElementsByName("xueli");
for(var i=0;i<arr2.length;i++){
alert(arr2[i]);
}
script>
(5)有关创建的方法
<script>
//创建一个注释对象
var myComment=document.createComment("这是一行注释");
//创建标签对象
var bd=document.body;
var mydiv=document.createElement("div");
bd.appendChild(myComment);
//创建文本对象
var myText=document.createTextNode("这是一行文本");
bd.appendChild(mydiv);//给标签添加子元素
mydiv.appendChild(myText);
//给标签对象设置属性
mydiv.setAttribute("style","color:red;");
//创建属性对象
var attr=document.createAttribute("class");
attr.value="mydiv";
//给标签对象设置一个属性对象
mydiv.setAttributeNode(attr);
//设置或获取网页标题
document.title="这是网页标题";
script>
(6)通过标签属性设置css样式
<script>
var bd=document.body;
//给标签对象设置css属性
//标签对象.style.css属性名="值"
//如果说你用JS代码来给标签对象设置CSS属性,如果css属性名称带有 - 横杠 那么你将横杠去掉 横杠后第一个字母变大写
bd.style.backgroundColor="red";
bd.style.backgroundImage="url(img/17.jpg)";
var mydiv=document.getElementById("div1");
mydiv.style.width="100px";
mydiv.style.height="200px"
mydiv.style.background="red";
mydiv.style.border="1px black solid";
//设置css属性的方式2
mydiv.style.cssText="width: 100px;height: 100px;background: red;border: 1px black solid;"
script>
五.JSON对象
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
1.JSON对象的创建
<script >
//student 是一个json对象
var student = {
name: "zhangsan",
age: 30,
sex: true,
eat: function() {
alert("吃饭");
},
arr:[100,200,300]
};
//键找值
var name = student.name;
var age = student.age;
var sex = student.sex;
alert(name);
alert(age);
alert(sex);
student.eat();
var arr=student.arr;
alert(arr);
script>
2.JSON对象的遍历
代码实例
<script >
var json={"name":"Runoob", "url":"www.runoob.com",age:100};
//键找值
var age=json.age;
var name=json['name'];
alert(age);
alert(name);
//遍历json 采用for in 循环
for(key in json){
alert(json[key]);
}
// for in 遍历数组
var arr=[10,20,30,50];
for(index in arr){
alert(arr[index]);
}
script>
3.JSON嵌套
<script >
var json = {
msg: {
aa:100,
bb:200,
cc:{
haha:10000
}
},
age: 100,
hehe: [20,30,60]
};
var v=json.msg.cc.haha;
alert(v);
script >
4.JSON数组
<script>
var arr=[{name:"张三",age:100},{name:"李四",age:200},{name:"王五 ",age:400}];
for(index in arr){
var jsonArr=arr[index];
for(key in jsonArr){
var v=jsonArr[key];
alert(v);
}
}
script >
4.JSON字符串与JSON对象的转换
//我们给后台提交数据,有可能用的是JSON格式 提交的就是JSON字符串
就需要前台把JSON对象变成JSON字符串提交
JSON 在JS中看作的是对象
Java 把JSON格式看成是字符串
stringfy：把json对象准换成json对象
parse：把json字符串转换成json对象
<script>
//JSON 对象
var json={"username":"张三","age":100};
//JSON字符串语法:外面必须是单引号,键是双引号
var json2='{"username":"李四","age":100}';
//JSON字符串转换成JSON对象
var jsonObj=JSON.parse(json2);
alert(jsonObj.username);
var json3={"username":"王五","age":100};
//把JSON对象转换成JSON字符串
var jsonStr=JSON.stringify(json3);
alert(jsonStr);
alert(typeof jsonStr);
script>
注意:JSON字符串的格式,外面是单引号,键是双引号
JSON字符串的格式必须是紧凑格式,不能美化
```