JSON描述

json的两个方法

JSON.stringify(data):将js对象转为JSON字符串
JSON.stringify(data):将JSON字符串转为js对象

JSON实际上是一个字符串，是一个具有特殊格式的字符串文本。
JSON用在数组和对象中才有意义

基本数据类型除了undefined之外都可以运用JSON.stringify()转化为字符串

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<script type="text/javascript">
</script>
console.log(JSON.stringify(null))//"null"
console.log(JSON.stringify(3.1))//"3.1"
console.log(JSON.stringify("php"))//'php'
console.log(JSON.stringify(true))//'true'
console.log(JSON.stringify({x:"a",y:"i",z:"u"}))//{"x":"a","y":"i","z":"u"}
console.log(
JSON.stringify([
{id:1,name:"小红"},
{id:2,name:"admin"},
])
)//[
{"id":1,"name":"小红"},
{"id":2,"name":"admin"},
]
</body>
</html>

ajax的get和post

1.创建xhr对象
const xhr=new XMLHttpRequest();

配置xhr参数
xhr.open(“get”,”test1.php?id=2”)

处理xhr响应
xhr.onload=function(){
//xhr.response:响应返回值，是JSON字符串
console.log(typeof xhr.response)//string
//将JSON字符串转化为数组
console.log( typeod JSON.parse(xhr.response))//object
}
4.发送xhr请求：
xhr.send(null);

get案例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<button>Ajax-get请求</button>
<p>ajax</p>
<script type="text/javascript">
const btn=document.querySelector("button");
//创建xhr对象
const xhr=new XMLHttpRequest();
// 配置xhr参数
xhr.open("get","test1.php?id=2");
xhr.responseType="json";
3//处理xhr响应
xhr.onload=function(){
//xhr.response:响应返回值，是JSON字符串
console.log(typeof  xhr.response)//string
//将JSON字符串转化为数组
console.log( typeod JSON.parse(xhr.response))//objectlet
user=`${xhr.response.name}(${xhr.response.email})`;
document.querySelector("p").textContent=user;
};
</script>
</body>
</html>

post案例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<div class="login">
<h3>用户登陆</h3>
<form action="" onsubmit="return false">
<lable for="email">邮箱：</lable>
<input type="email" name="email" id="email"/>
<lable>密码：</lable>
<input type="password" name="password" id="password"/>
<button>提交</button>
<span class="tips"></span>
</form>
</div>
<script type="text/javascript">
const form=document.querySelector(".login form");
const btn=document.querySelector(".login button");
const tips=document.querySelector(".tips");
// FormData表单数据的序列化
let data=new FormData();
data.append("email");
btn.onclick=function(){
//阻止默认状态禁止提交
ev.preventDefault();
//创建xhr对象
const xhr=new XMLHttpRequest();
// 配置xhr参数
xhr.open("get","test1.php?id=2");
//处理xhr响应
xhr.onload=function(){
console.log(xhr.response);
}
//发送xhr请求
xhr.send(new FormData(form));
</script>
</body>
</html>

选项卡案例

1.原理：事件代理原理
2.e.target是指对象里的子对象，实际触发这个事件的对象。
3.ev.currentTarge是指注册了事件监听器的对象，事件的绑定者
4.forEach()回调函数遍历数组

filter()回调函数过滤

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>cards</title>
 <style type="text/css">
  .tab{
      height: 36px;
      display: flex;
      list-style: none;
    /*margin: 0 10px;*/
  }
  /*按钮*/
  .tab li{
      flex: auto;
      text-align: center;
      line-height: 36px;
      background-color: #fff;
  }
  .tab li.active{
      background-color: red;
  }
  .tab li:hover{
      cursor: pointer;
  }
  /*默认当前选项卡显示其他的隐藏*/
.item{
      padding: 20px;
      display: none;
      list-style: none;
      float:left;
    margin-left:450px;
    background-color: #ccc;
  }
  .item.active{
      display: block;
      list-style: none;
  }
  .tab li:first-of-type{
   background-color: red;
  }
 </style>
</head>
<body>
<div class="tabs">
<!-- 导航  -->
<ul class="tab">
<li  class=" active" data-index="1">省内新闻</li>
<li data-index="2">国际新闻</li>
<li data-index="3">国外新闻</li>
</ul>
<!-- 与导航页对应的详情页 -->
<ul data-index="1" class="item active" >
<li><a href="">省内新闻rewrwe</a></li>
<li><a href="">省内新闻dsfdsfdsf</a></li>
<li><a href="">省内新闻dsfdsfdsf</a></li>
</ul>
<ul data-index="2" class="item">
<li><a href="">国际新闻ewrwer</a></li>
<li><a href="">国际新闻ewrwer</a></li>
<li><a href="">国际新闻ewrwer</a></li>
</ul>
<ul data-index="3" class="item">
<li><a href="">国外新闻rfdsfgdsg</a></li>
<li><a href="">国外新闻jkljl</a></li>
<li><a href="">国外新闻fghfgh</a></li>
</ul>
</div>
 <script type="text/javascript">
 // 导航tab
 const tab=document.querySelector(".tab");
 //多个导航页
 const items=document.querySelectorAll('.item');
 // 事件代理原理
 tab.onclick=function(ev){
   //清空之前按钮的激活样式，并且将当前的导航设置为激活状态。
   //归并参数
   [...tab.children].forEach((item)=>
     item.style.backgroundColor='#fff');
   ev.target.style.backgroundColor="red";
   //判断详情
 items.forEach((item)=>item.style.display="none");
  [...items].filter((item)=>item.dataset.index===ev.target.dataset.index)[0].style.display="block";
 }
</script>
</body>
</html>

换肤案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>换肤</title>
<style type="text/css">
.container{
 width:300px;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 column-gap:10px;
}
.container>img{
 width:100%;
 border:3px solid #ccc;
 opacity: 0.6;
}
.container>img:active{
  opacity: 1;
}
.container>img:hover{
 opacity: 1;
 cursor: pointer;
 width:105%;
}
body{
 background-image: url();
 background-size: cover;
 background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container">
<img src="../images/1.jpg" alt=""/>
<img src="../images/2.jpg" alt=""/>
<img src="../images/3.jpg" alt=""/>
<img src="../images/7.jpg" alt=""/>
<img src="../images/4.jpg" alt=""/>
<img src="../images/5.jpg" alt=""/>
<img src="../images/6.jpg" alt=""/>
<img src="../images/8.jpg" alt=""/>
<img src="../images/9.jpg" alt=""/>
<img src="../images/10.jpg" alt=""/>
</div>
<script type="text/javascript">
const box=document.querySelector(".container");
//事件代理机制原理来做
box.onclick=function(ev){
   //body
const body=document.body;
   //新的背景图片
   let imgUrl=`url("${ev.target.src}")`;
   body.style.backgroundImage=imgUrl;
}
document.querySelector(.container).onclick=(ev)=>(document.body.style.backgroundImg=`url("$("ev.target.src")`);
</script>
</body>
</html>

换肤案例以及选项卡