JavaScript

最新推荐文章于 2021-08-14 09:00:52 发布

OREO夹心

最新推荐文章于 2021-08-14 09:00:52 发布

阅读量336

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_51443782/article/details/113729179

版权

1.JavaScript介绍

1.1介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0X2WaHTi-1612607810839)(./asset/js介绍.png)]

JavaScript是一种面向对象思想的脚本语言，通过JavaScript可以实现用户与静态网页之间的交互，也称为动态网页技术（JavaScript+HTML+CSS）

1.2 JavaScript的结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aqBjyw9O-1612607810841)(./asset/js结构.png)]

2.JavaScript基础语法

ECMAScript是JS的语法标准规范，常用的是ES5语法，作为学习的基础语法，ES6语法的更新，只需要掌握let、const关键词定义变量及函数式表达式的用法即可；函数式表达式结合Java中的Lambda的用法，该学习过程中不涉及函数式写法。

2.1输出测试

JS中的输出方式分两种

1.console，使用console.log()可以在控制台输出测试结果，在网页中按F12即可查看，也可以直接在控制台中进行输出测试

2.document，使用document.write()将内容输出在页面中

2.2 数据类型

js作为脚本语言，虽然使用的是面向对象的思想，但其本身比较灵活，在数据类型的定义上并没有严格意义上的规范，不需要指定类型，语言会根据后面的值自行推断类型，定义的时候只需要给到关键词var、let(es6)、const(es6)

其中的数据类型

属性	描述
number	数字类型
string	字符串类型
boolean	true/false
object	对象(function、null)
undefined	未定义

变量定义

var count = 5;
console.log("count="+count);
// 在js中不区分单双引号
var name = "官小北";
console.log(name);
var bol = true;
// 未定义 没有给变量进行初始化操作
var unde;
console.log(unde);

类型判断

/* typeof 判断数据类型 */
console.log(typeof count,typeof name,typeof bool,typeof un,typeof obj);

2.3 运算符

JavaScript中的运算符和大多数编程语言中的运算符都接近，只有个别运算符因其灵活性而带来了些许不同

/* + */
let num = 1;
let numStr = num + "";
console.log(typeof num,typeof numStr);

/* - */
let str = "123";
let strNum = str - 0;
console.log(typeof str,str+1,typeof strNum,strNum+1);

/* / */
let a = 5;
console.log(a/2,a++);

/* 
== 只判断值是否相等
=== 先判断类型再判断值是否相等
*/
console.log("123" == 123);
console.log("123" === 123);

let strTest = "123";
let numTest = 123;
console.log(strTest == numTest);

2.4 控制语句

2.4.1 条件控制语句-if

JavaScript通过if进行条件的判断从而实现不同的业务流程，但变量在定义时没有严格的类型限定，所以在使用时会自动进行类型转换

/* if 字符串与数字在进行判断时会自动进行类型转换*/
let score = "98";
if(score>90){
  console.log("优秀");
}else{
  console.log("just so so");
}

2.4.2 条件控制语句-switch

switch语句在进行case匹配时没有具体的类型限定，常见的类型都可进行匹配使用；break省略后会有“穿透”效果，default默认匹配可以不写

/* if 字符串与数字在进行判断时会自动进行类型转换*/
let season = "冬季";
switch(season){
  case "冬季":
    console.log("有点冷");
    //break;
  case "夏季":
    console.log("比较热");
    break;
  default:
    console.log("啥也不是");
    break;
}
let bool = true;
switch(bool){
  case true:
    console.log(true);
    break;
}

2.4.3 循环控制语句-for

在面向对象的编程语言中（例如：java、JavaScript等）大括号代表作用域，变量只能在该作用域中使用，域外是无法访问的；ES5的语法中使用var进行变量定义时是没有块级作用域的，此时循环中的变量在循环外也可以使用，ES6中使用let定义时有块级作用域，循环外无法访问

for(var x=0;x<5;x++){
  console.log("var hello "+x);
}
console.log("循环外："+x); //循环外可访问
for(let i=0;i<5;i++){
  console.log("let hello "+i);
}
//console.log("循环外："+i) //报错，无法找到该变量i

2.5 弹框效果

JavaScript中提供了三种弹框效果，分别为警告框（提示框）、对话框、确认框

//警告框
//alert("haha");

//在前端中所有的输入框，输入的结果都是字符串类型，如果没有输入默认是空字符串
let result = prompt("请输入喜欢的颜色");
console.log(result,typeof result);

/* let result = confirm("确定要删除吗？");
console.log(result); */

3.JavaScript常见API

3.1 Math对象

Math对象提供了数学相关的运算方法，常用的场景是随机数的使用

//abs() 求绝对值
console.log(Math.abs(-1));
//ceil() 向上取整
console.log(Math.ceil(11.5));
//floor() 向下取整
console.log(Math.floor(11.5));
//random() 随机数 0~1
console.log(Math.random())

3.2 Date对象

JavaScript中的Date对象可以获取当前日期，同时提供了可以分别获取日期中的年月日时分秒的方法，具体的显示格式可通过拼接实现

//Date对象
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let seconds = date.getSeconds();
let millSeconds = date.getMilliseconds();
//拼接日期
let dateTime = year+"年"+month+"月"+day+"号 "+hour+":"+minute+":"+seconds;
document.write(dateTime)

3.3 Array对象

JavaScript中提供了数组容器，用于存放多个元素，其长度可变且没有类型的限制

//定义长度为3的数组对象 Array
let array = new Array(3);
array[0] = 1;
array[1] = "abc";
array[2] = null;
array[3] = "haha";
console.log(array,array[0]);
console.log("-----------------------");
//定义指定值的数组对象
let array2 = new Array(1,"呵呵","嘿嘿");
console.log(array2);
console.log("-----------------------");
//简写形式,[]代表数组 {}代表json对象
let array3 = ['石坤坤',"何沛文","杨晨玙"];
let index = Math.floor(Math.random()*array3.length);
console.log(array3[index]);

数组中提供的常见函数

函数名	描述
push()	添加元素
pop()	删除元素
sort()	数组排序

3.4 字符串对象

通过new关键词创建的字符串对象，是以数组的形式进行输出的，如果想要按完整的字符串输出需要调用toString()方法

//String对象
let str1 = "hehe";
console.log(str1);
let str2 = new String("haha");
//以数组的方式输出
console.log(str2);
//以字符串的方式输出
console.log(str2.toString());

函数名	描述
split()	分割
substring()	截取
lastIndexOf()	获取指定字符所在的下标

let url = "http://www.baidu.com";
let urlArr = url.split(".");
console.log(urlArr);

//获取上传的文件的后缀
let fileName = "sadij45sa6d4a56sd45.as6d.webp";
let index = fileName.lastIndexOf(".");
let suffix = fileName.substring(index);
console.log(suffix);

JavaScript中的所有输入框中获取到的数据都是以字符串形式存在

//需求：求两个数的较大值，这两个数让用户输入,中间用逗号隔开prompt
function maxMethod(x,y){
  return x>y?x:y;
}
//获取用户输入的结果
let userIn = prompt("请输入两个数字，中间逗号隔开，例如：3,4");
let numArray = userIn.split(",");

let max = maxMethod(parseInt(numArray[0]),parseInt(numArray[1]));
console.log(max);

4. 函数定义

函数是对某一个特定功能的封装，为了能更加方便、快捷的使用

4.1 系统函数

函数名	描述
parseInt()	转整数类型
parseFloat()	转浮点类型
isNaN()	判断是否是非数字

parseInt() 数字后面无论是小数或字符，都直接取整数

let num = '123a';
let parseResult = parseInt(num);
console.log(parseResult,typeof parseResult);//123,number

parseFloat() 数字后面如果有小数则保留小数，如小数都为零，则直接取整

let price = '12.35a';
let parsePrice = parseFloat(price);
console.log(parsePrice,typeof parsePrice);//12.35,number
let icePrice = '12.00';
let parseIcePrice = parseFloat(icePrice);
console.log(parseIcePrice,typeof parseIcePrice);//12,number

isNaN() 判断值是否是非数字，true非数字，false数字

let numStr = "abc";
console.log(isNaN(numStr));//true
let num = "123";
console.log(isNaN(num));//false

4.2 自定义函数

为了完成某一个特定的功能，由程序员自己定义的函数

语法：function 函数名(参数1,…){}

无返回值函数

//打印九九乘法表
function print(){
  for(let x=1;x<10;x++){
    for(let y=1;y<=x;y++){
      document.write(y+"*"+x+"="+x*y+"&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br/>");
  }
}

带有返回值的函数

//定义求较大值的函数
function maxMethod(x,y){
  return x>y?x:y;
}
//调用
let max = maxMethod(5,6);
console.log(max);//6

5. JavaScript-BOM

BOM（Browser Object Module）主要以window对象、location对象、history对象、screen对象为主，本课程中只讲解location对象以及window对象中的定时器，其他对象可参考官方文档使用。

5.1 location对象

location对象主要用于控制地址栏中的地址信息

//location控制地址栏中的地址
let url = location.href;
console.log("当前网页中的地址："+url);

//改变地址栏中的地址
location.href = "http://www.baidu.com";

5.2 window对象-定时器

JavaScript中的定时器分两种

setInterval() 以周期的方式开启定时器

closeInterval() 关闭定时器

setTimeout() 以间隔时间定义定时器，结合递归使用

closTimeout() 关闭定时器

setInterval定时器

//setInterval()开启定时器 clearInterval()关闭定时器  指定周期时间
let timer = setInterval(print,1000);
let i = 1;
function print(){
  if(i==10){
    stop();
  }
  console.log(i++);
}
//关闭定时器
function stop(){
  clearInterval(timer);
}

setTimeout定时器

//setTimeout()开启定时器 clearTimeout()关闭定时器 指定间隔时间
let timer = null;
let i = 1;
function print(){
  if(i==5){
    stop();
    return;
  }
  console.log(i++);
  //递归调用
  timer = setTimeout(print,1000);
}
print();
//关闭定时器
function stop(){
  clearTimeout(timer);
}

6.JavaScript-DOM操作

DOM（Document Object Module）针对页面中的节点进行动态操作

6.1 元素获取

js中提供了四种根据基础选择器而来的获取元素的方式

获取方式	描述
document.getElementById()	根据id获取元素（唯一）
document.getElementsByClassName()	根据class名获取元素（一组）
document.getElementsByTagName()	根据标签名获取元素（一组）
document.getElementsName()	根据name属性值获取元素（一组）

<input type="text" id="uname" name="hobby">
<input type="text" class="money" name="hobby">
<button type="button" class="money">获取元素</button>

//根据标签名获取元素
let btns = document.getElementsByTagName("button");
console.log(btns);
//根据类名获取
let eles = document.getElementsByClassName("money");
console.log(eles);
//根据id获取
let idInput = document.getElementById("uname");
console.log(idInput);
//根据name属性值获取
let hobbys = document.getElementsByName("hobby");
console.log(hobbys);

6.2 获取及修改元素内容

HTML中的元素分单标签与双标签，单标签以表单中的input为主

双标签获取方式

let btn = document.getElementsByTagName("button")[0];
let divNode = document.getElementsByTagName("div")[0];
//对象.innerHTML
console.log(btn.innerHTML);
console.log(divNode.innerHTML);
//对象.innerHTML=值
divNode.innerHTML = "改变后的值";
console.log("------------");
//对象.outerHTML
console.log(divNode.outerHTML);

outerHTML和innerHTML的区别

innerHTML获取双标签中的内容（不论是该内容时标签还是文本）

outerHTML获取双标签中的内容（不论是该内容时标签还是文本），同时包含了自身的标签

单标签获取方式

//对象.value 这个只能用于获取单标签的元素值
console.log(hobbys[0].value,hobbys[0].id,hobbys[0].name);
//对象.value=值
hobbys[1].value = "嘿嘿";
console.log(hobbys[1].value);

6.3 获取及修改元素的样式

<div style="color: darkgoldenrod;font-size: 14px;">
  注意样式本身也是元素中的一个属性中的值
</div>

//1.先获取到对象
let divNode = document.getElementsByTagName("div")[0];
//2.对象.属性
console.log("颜色值：",divNode.style.color);
console.log("字体大小：",divNode.style.fontSize);
//3.对象.style.属性=值
divNode.style.fontSize = "20px";
divNode.style.color = "white";
divNode.style.backgroundColor = "rgb(155,255,255)";

案例：实现简易轮播图效果

<style type="text/css">
  div{
    width: 500px;
    height: 200px;
    margin: 100px auto;
    background-color: #6495ED;
  }
</style>
<div>
  <img src="./1.gif" alt="">
</div>

let pic = document.getElementsByTagName("img")[0];
let index = 1;
function changePicture(){
  if(index == 3){
    index = 1;
  }
  pic.src = "./"+(index++)+".gif";
  setTimeout(changePicture,1000);
}
changePicture();

案例2：使用第三方框架Swiper实现轮播效果

Swiper中文API文档

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!--引入第三方js-->
<script src="./js/swiper-bundle.js"></script>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal', // 切换选项
    loop: true, // 循环模式选项
    speed: 1000,
    autoplay: {
      delay:2000
    },
    effect:"flip",
    pagination: {
      el: '.swiper-pagination',
    },
    //如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  })        
</script>

6.4 事件绑定

事件即用户对浏览器中的HTML元素进行了某些操作，浏览器根据用户的操作给出响应的整个过程中的触发形式

常见事件

事件名	描述
onclick	单击事件
onchange	变化事件
onsubmit	表单提交事件
onload	页面加载事件

onclick单击事件

<input type="text">
<input type="text">
<button onclick="sumMethod()">计算</button>
<span>结果为：<strong></strong></span>

/* 
	操作流程
		1.在输入框中输入要计算的数字
		2.点击计算按钮进行计算
			a.先获取到两个输入框中的数字
			b.那两个结果进行运算
		3.将计算后的结果在strong标签显示出来
				将结果进行赋值操作
*/

//1.先获取到页面中需要用到的元素
let inNodes = document.getElementsByTagName('input');
let x = inNodes[0];
let y = inNodes[1];
let btn = document.getElementsByTagName("button")[0];
let strongNode = document.getElementsByTagName("strong")[0];

//2.定义任务
function sumMethod(){
  //3.获取到输入框中的值进行加法运算
  let result = parseFloat(x.value) + parseFloat(y.value);
  //4.将结果赋值到strong标签上
  strongNode.innerHTML = result;
}

onchange变化事件

<select name="pro" id="" onchange="changeMethod(this)">
  <option value="hunan">湖南省</option>
  <option value="shandong">山东省</option>
  <option value="henan">河南省</option>
</select>

/* 
	select标签中提供了一个属性-selectedIndex(获取当前选中的下拉框中的下标-0)
*/
function changeMethod(obj){
  console.log("---",obj.selectedIndex,obj.value);
}

onsubmit表单提交事件

<form action="" onsubmit="return check()">
  用户名：<input type="text" name="uname">
  密码：<input type="password" name="pwd">
  <input type="submit" value="登录">
</form>

/* 
	onsubmit事件需要一个boolean类型的返回值作为表单是否提交的依据
*/
let inNodes = document.getElementsByTagName("input");
function check(){
  let unameVal = inNodes[0].value;
  if(unameVal==""){
    return false;
  }
  return true;
}

onload页面加载事件

//onload函数是在页面加载完毕后才会执行其中的代码
window.onload = function(){
  let btnNodes = document.getElementsByTagName("button");
  btnNodes[0].onclick = show;
  btnNodes[1].onclick = show;
  function show(){
    alert("--");
  }
}

案例：实现购物车选择效果

*{
  margin: 0;
  padding: 0;
}
body{
  font-size: 14px;
}
#parent{
  width: 1200px;
  margin: 10px auto;
}
ul{
  list-style: none;
}
ul li{
  height: 70px;
  padding: 5px;
  border: 1px solid #b0b0b0;
}
ul li div{
  float: left;
  margin-right: 10px;
}
ul li div.pic,ul li div.check{
  line-height: 55px;
}
ul li div.pic{
  margin-top: 10px;
}
ul li div span{
  color: red;
}
ul li div .desc{
  font-size: 12px;
  color: #B0B0B0;
}
.clearfix:after{
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

<div id="parent">
  全选<input type="checkbox" id="checkAll" onclick="stateChange(this)" />
  <ul>
    <li class="clearfix">
      <div class="check">
        <input type="checkbox" class="item" onclick="checkState()">
      </div>
      <div class="pic">
        <img src="./3.jpg" width="50px" height="50px" alt="">
      </div>
      <div>
        <h4>小蜜蜂扩音器</h4>
        <p><span>￥9.9</span></p>
        <p class="desc">小蜜蜂扩音器，只要9.9，买不了吃亏买不了上当</p>
      </div>
    </li>
    <li class="clearfix">
      <div class="check">
        <input type="checkbox" class="item" onclick="checkState()">
      </div>
      <div class="pic">
        <img src="./3.jpg" width="50px" height="50px" alt="">
      </div>
      <div>
        <h4>星巴克马克杯</h4>
        <p><span>￥199.9</span></p>
        <p class="desc">星巴克马克杯，只要199.9，你值得拥有</p>
      </div>
    </li>
    <li class="clearfix">
      <div class="check">
        <input type="checkbox" class="item" onclick="checkState()">
      </div>
      <div class="pic">
        <img src="./3.jpg" width="50px" height="50px" alt="">
      </div>
      <div>
        <h4>金属哑铃全套</h4>
        <p><span>￥109.9</span></p>
        <p class="desc">金属哑铃全套，只要109.9，渣男的道路近在咫尺</p>
      </div>
    </li>
  </ul>
</div>

//每一个商品的选中状态要和全选按钮的选中状态保持一致，从而达到全选的效果
let checks = document.getElementsByTagName("input");
//全选全不选函数
function stateChange(obj){
  //1.先获取到全选按钮的选中状态
  let state = obj.checked;
  //2.将所有的商品的选中状态和全选的选中状态保持一致
  for(let i=1;i<checks.length;i++){
    checks[i].checked = state;
  }
}
//反选关联函数
function checkState(){
  //当商品的复选框中有任意一个或多个处于未选中的状态，那全选复选框的状态就为未选中
  for(let i=1;i<checks.length;i++){
    //判断是否有未选中的复选框
    if(!checks[i].checked){
      //将全选框状态变为未选中状态
      checks[0].checked = false;
      return;	
    }
  }
  checks[0].checked = true;
}

案例2：随机点名效果

*{
  margin: 0;
  padding: 0;
}
h3{
  height: 45px;
  color: white;
  text-align: center;
  line-height: 45px;
  background-color: #6495ED;
  box-shadow: 3px 3px 5px #007AFF;
}
div{
  width: 500px;
  height: 400px;
  margin: 100px auto;
  box-shadow: 3px 3px 5px #ccc;
}
div h4{
  height: 50px;
  padding: 10px;
  text-align: center;
}
div p{
  width: 70%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  margin: 40px auto;
}
div p input{
  display: block;
  width: 100%;
  height: 100%;
  font-size: 20px;
  text-align: center;
}
div p button{
  width: 120px;
  height: 35px;
  color: white;
  border: none;
  outline: none;
  background-color: #008B8B;
}
div p input,div p button{
  border-radius: 5px;
  box-shadow: 2px 2px 2px #ccc;
}

<h3>TongBaiShan's name-list</h3>
<div>
  <h4>name-list</h4>
  <p><input type="text"></p>
  <p><button onclick="show()">Start</button></p>
</div>

//获取元素
let nameNode = document.getElementsByTagName("input")[0];
let btnNode = document.getElementsByTagName("button")[0];
let nameArray = ['石坤坤',"何沛文","杨晨玙","王晨阳","张小豪","李鑫","丁铭扬","谢一飞"];
//定时器变量
let timer = null;
//设置默认值
nameNode.value = nameArray[0];
//显示姓名
function show(){
  if(timer == null){
    btnNode.innerHTML = "Stop";
    btnNode.style.color = "red";
    start();
    return;
  }
  btnNode.style.color = "white";
  btnNode.innerHTML = "Start";
  stop();
}
//开启点名器
function start(){
  //生成随机下标
  let index = Math.floor(Math.random()*nameArray.length);
  //根据下标拿到对应的名字
  let name = nameArray[index];
  //将名字在页面显示出来
  nameNode.value = name;
  //重复上述动作
  timer = setTimeout(start,15);
}
//关闭定时器
function stop(){
  clearTimeout(timer);
  timer = null;
}

6.5 元素动态增删

//获取元素
let btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
  //添加元素 document.createElement("标签名");
  let aNode = document.createElement("a");
  //给创建好的元素添加内容及相关的属性
  aNode.innerHTML = "百度新闻";
  aNode.href = "http://news.baidu.com";
  //将创建好的元素放到指定的页面位置中 appendChild()
  let divNode = document.getElementsByTagName("div")[0];
  divNode.appendChild(aNode);
}

案例：表格动态增删

p{
  text-align: center;
}
button{
  width: 120px;
}
td{
  height: 35px;
  text-align: center;
}
span{
  color: white;
  font-size: 14px;
  cursor: pointer;
  padding: 5px;
  margin-left: 15px;
}
span:nth-of-type(1){
  background-color: darkcyan;
}
span:nth-of-type(2){
  background-color: darkorange;
}
span:hover{
  opacity: 0.7;
}

<p>
  <button>create Element</button>
  <button>delete Element</button>
</p>
<table id="test" border="1" cellpadding="0" cellspacing="0" width="50%" align="center">
  <thead>
    <tr>
      <th>用户编号</th>
      <th>用户姓名</th>
      <th>联系方式</th>
      <th>操作方式</th>
    </tr>
  </thead>
</table>

let tabNode = document.getElementsByTagName("table")[0];
//找到两个按钮绑定事件
let btns = document.getElementsByTagName("button");
//添加元素
let index = 10000;
btns[0].onclick = function(){
  //创建行元素及列元素
  let trNode = document.createElement("tr");
  let tdNode01 = document.createElement("td");
  let tdNode02 = document.createElement("td");
  let tdNode03 = document.createElement("td");
  let tdNode04 = document.createElement("td");
  //给列元素赋值
  tdNode01.innerHTML = ++index;
  tdNode02.innerHTML = '蔡文姬';
  tdNode03.innerHTML = "120";
  //创建操作栏中的标签
  let spanNode = document.createElement("span");
  let spanNode02 = document.createElement("span");
  spanNode.innerHTML = "编辑";
  spanNode02.innerHTML = "删除";
  //将操作用的两个标签添加到操作栏中
  tdNode04.appendChild(spanNode);
  tdNode04.appendChild(spanNode02);
  //将列添加到行中
  trNode.appendChild(tdNode01);
  trNode.appendChild(tdNode02);
  trNode.appendChild(tdNode03);
  trNode.appendChild(tdNode04);
  //将行元素添加到表格中
  tabNode.appendChild(trNode);
}
//删除元素
btns[1].onclick = function(){
  //删除 remove()  removeChild()
  //找到全部的tr节点
  let trNodes = document.getElementsByTagName("tr");
  //找到最后一个tr节点
  let lastTrNode = trNodes[trNodes.length-1];
  //lastTrNode.remove();
  tabNode.removeChild(lastTrNode);
}

7.JavaScript-JSON对象

JavaScript中提供了用于存储键值对的对象-JSON

使用方案一：单个json对象的使用

//语法：{key:value,key2:value2,...}
let user = {"id":1,"uname":"haha","password":"12345","sex":"男"};
console.log(user.id,user.uname,user.sex);

使用方案二：当有多个json对象需要存储时结合数组使用

//一个json对象相当于一个用户对象，如果是有多个用户对象就意味着有多个json对象，问题是多个json对象如何存储
let userJsonsArr = [
  {"id":1,"uname":"haha","password":"12345","sex":"男"},
  {"id":2,"uname":"xixi","password":"admin","sex":"女"},
  {"id":3,"uname":"heihei","password":"root","sex":"男"}
];
for(let i=0;i<userJsonsArr.length;i++){
  console.log(userJsonsArr[i].uname)
}

使用方案三：返回的数据中有多个对象且类型不同

let userOrdersJson = {
  "code":200,
  "msg":"success",
  "data":[
    {
      "user":{"id":2,"username":"王晨阳","sex":"男"},
      "order":[
        {"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-19"},
        {"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-20"}
      ]
    },
    {
      "user":{"id":1,"username":"何沛文","sex":"男"},
      "order":[
        {"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-17"},
        {"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-18"}
      ]
    }
  ]
}
console.log(userOrdersJson.data[1].order[0].orderId)

案例：json结合元素动态增删实现表格数据展示

let tabNode = document.getElementsByTagName("table")[0];
//找到两个按钮绑定事件
let btns = document.getElementsByTagName("button");
//模拟后台返回的数据
let userOrders = {
  "code":200,
  "msg":"success",
  "data":[
    {"id":2,"username":"王晨阳","sex":"男"},
    {"id":1,"username":"何沛文","sex":"男"}
  ]
}
//添加元素
btns[0].onclick = function(){
  for(let i=0;i<userOrders.data.length;i++){
    //创建行元素及列元素
    let trNode = document.createElement("tr");
    let tdNode01 = document.createElement("td");
    let tdNode02 = document.createElement("td");
    let tdNode03 = document.createElement("td");
    let tdNode04 = document.createElement("td");
    //给列元素赋值
    tdNode01.innerHTML = userOrders.data[i].id;
    tdNode02.innerHTML = userOrders.data[i].username;
    tdNode03.innerHTML = userOrders.data[i].sex;
    //创建操作栏中的标签
    let spanNode = document.createElement("span");
    let spanNode02 = document.createElement("span");
    spanNode.innerHTML = "编辑";
    spanNode02.innerHTML = "删除";
    //将操作用的两个标签添加到操作栏中
    tdNode04.appendChild(spanNode);
    tdNode04.appendChild(spanNode02);
    //将列添加到行中
    trNode.appendChild(tdNode01);
    trNode.appendChild(tdNode02);
    trNode.appendChild(tdNode03);
    trNode.appendChild(tdNode04);
    //将行元素添加到表格中
    tabNode.appendChild(trNode);
  }
}
//删除元素
btns[1].onclick = function(){
  //删除 remove()  removeChild()
  //找到全部的tr节点
  let trNodes = document.getElementsByTagName("tr");
  //找到最后一个tr节点
  let lastTrNode = trNodes[trNodes.length-1];
  //lastTrNode.remove();
  tabNode.removeChild(lastTrNode);
}

8. 增强for循环

es5语法中提供了for…in循环用于增强普通循环的使用

/* 
	for-in循环，通常用于带有下标的集合数据的遍历，例如：数组
*/
let array = ["蔡文姬","澜","大鲨鱼","司马懿"];
/*for(let i=0;i<array.length;i++){
	console.log(array[i]);
}*/
for (let index in array) {
  console.log(array[index]);
}

es6中对for再次进行了优化

let array = ["蔡文姬","澜","大鲨鱼","司马懿"];
//遍历出来的val是对象
for (let val of array) {
  console.log(val);
}

案例：省市联动

<select onchange="getIndex(this)">
  <option>--请选择省份--</option>
</select>
<select onchange="getCityIndex(this)">
  <option>--请选择城市--</option>
</select>
<select>
  <option>--请选择区县--</option>
</select>

/*
显示所有的省份
1.从后台获取到所有的省份数据容器--省份数组
		a、定义省份数组
2.将数组中的省份信息添加到省份的下拉框中
		a、遍历省份数组，获取到每一个省份的信息
		b、将每一个省份信息添加到下拉框中
			创建一个option标签，进行赋值
*/
let selNodes = document.getElementsByTagName("select");
let proArr = ["河南省","湖南省"];
createMethod(proArr,0);
//城市下拉框操作
let cityArr = [
  ["--请选择城市--"],
  ["郑州市","开封市","洛阳市"],
  ["长沙市","湘潭市"]
];
let areaArr = [
  [
    ["--请选择区县--"]
  ],
  [
    ["二七区","高新区"],
    ["金明区","鼓楼区"],
    ["老城区","西厂区"]
  ],
  [
    ["芙蓉区","天心区"],
    ["雨湖区","月塘区"]
  ]
];
//省份下标
let proIndex = 0;
//遍历城市数组，将城市信息添加到城市下拉框中（根据选择的省份确定要添加的城市数组）
function getIndex(obj){
  //先清空之前的数据
  selNodes[1].length = 0;
  //先获取到用户选择的省份--通过下标来获取
  proIndex = obj.selectedIndex;
  //对应的具体城市数组
  let citys = cityArr[proIndex];
  createMethod(citys,1);
  defaultArea(areaArr[proIndex][0],2)
}
//城市改变的函数
function getCityIndex(obj){
  selNodes[2].length = 0;
  //获取城市下标
  let cityIndex = obj.selectedIndex;
  //获取城市对应的区县数组
  let areas = areaArr[proIndex][cityIndex];
  createMethod(areas,2);
}
function defaultArea(areas,index){
  selNodes[index].length = 0;
  createMethod(areas,index);
}
//创建元素方法封装
function createMethod(arr,index){
  for(let x=0;x<arr.length;x++){
    //创建option标签
    let optNode = document.createElement("option");
    //给option标签赋值
    optNode.innerHTML = arr[x];
    //将创建好的option标签添加到省份的下拉框
    selNodes[index].appendChild(optNode);
  }
}

9.JavaScript-正则表达式

$('button').click(function(){
  /* //先获取输入框中的值
		let phone = $('input:eq(0)').val();
		//定义验证规则
		//let phoneVerify = /^1[0-9]{10}$/;
		let phoneVerify = /^1\d{10}$/;
		//进行验证
		console.log(phoneVerify.test(phone));
		let name = $('input:eq(1)').val();
		let nameVerify = /^[0-9A-z]{6,12}$/i;
		console.log(nameVerify.test(name)); */
  let email = $('input:eq(0)').val();
  //let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.[0-9A-z]{1,}/;
  let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
  console.log(emailVerify.test(email)); 
})