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>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

flex的属性描述

2021-03-26 18:31:34