PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 换肤案例以及选项卡

换肤案例以及选项卡

冰雪琉璃
冰雪琉璃 原创
2021年04月25日 17:51:38 434浏览

JSON描述

  1. json的两个方法
  • JSON.stringify(data):将js对象转为JSON字符串
  • JSON.stringify(data):将JSON字符串转为js对象
  1. JSON实际上是一个字符串,是一个具有特殊格式的字符串文本。
  2. JSON用在数组和对象中才有意义
  3. 基本数据类型除了undefined之外都可以运用JSON.stringify()转化为字符串

    实例演示

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. </script>
    10. console.log(JSON.stringify(null))//"null"
    11. console.log(JSON.stringify(3.1))//"3.1"
    12. console.log(JSON.stringify("php"))//'php'
    13. console.log(JSON.stringify(true))//'true'
    14. console.log(JSON.stringify({x:"a",y:"i",z:"u"}))//{"x":"a","y":"i","z":"u"}
    15. console.log(
    16. JSON.stringify([
    17. {id:1,name:"小红"},
    18. {id:2,name:"admin"},
    19. ])
    20. )//[
    21. {"id":1,"name":"小红"},
    22. {"id":2,"name":"admin"},
    23. ]
    24. </body>
    25. </html>

    ajax的get和post

    1.创建xhr对象
    const xhr=new XMLHttpRequest();
  4. 配置xhr参数
    xhr.open(“get”,”test1.php?id=2”)
  5. 处理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案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. </head>
    7. <body>
    8. <button>Ajax-get请求</button>
    9. <p>ajax</p>
    10. <script type="text/javascript">
    11. const btn=document.querySelector("button");
    12. //创建xhr对象
    13. const xhr=new XMLHttpRequest();
    14. // 配置xhr参数
    15. xhr.open("get","test1.php?id=2");
    16. xhr.responseType="json";
    17. 3//处理xhr响应
    18. xhr.onload=function(){
    19. //xhr.response:响应返回值,是JSON字符串
    20. console.log(typeof xhr.response)//string
    21. //将JSON字符串转化为数组
    22. console.log( typeod JSON.parse(xhr.response))//objectlet
    23. user=`${xhr.response.name}(${xhr.response.email})`;
    24. document.querySelector("p").textContent=user;
    25. };
    26. </script>
    27. </body>
    28. </html>

    post案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. </head>
    7. <body>
    8. <div class="login">
    9. <h3>用户登陆</h3>
    10. <form action="" onsubmit="return false">
    11. <lable for="email">邮箱:</lable>
    12. <input type="email" name="email" id="email"/>
    13. <lable>密码:</lable>
    14. <input type="password" name="password" id="password"/>
    15. <button>提交</button>
    16. <span class="tips"></span>
    17. </form>
    18. </div>
    19. <script type="text/javascript">
    20. const form=document.querySelector(".login form");
    21. const btn=document.querySelector(".login button");
    22. const tips=document.querySelector(".tips");
    23. // FormData表单数据的序列化
    24. let data=new FormData();
    25. data.append("email");
    26. btn.onclick=function(){
    27. //阻止默认状态禁止提交
    28. ev.preventDefault();
    29. //创建xhr对象
    30. const xhr=new XMLHttpRequest();
    31. // 配置xhr参数
    32. xhr.open("get","test1.php?id=2");
    33. //处理xhr响应
    34. xhr.onload=function(){
    35. console.log(xhr.response);
    36. }
    37. //发送xhr请求
    38. xhr.send(new FormData(form));
    39. </script>
    40. </body>
    41. </html>

    选项卡案例

    1.原理:事件代理原理
    2.e.target是指对象里的子对象,实际触发这个事件的对象。
    3.ev.currentTarge是指注册了事件监听器的对象,事件的绑定者
    4.forEach()回调函数遍历数组
  6. filter()回调函数过滤
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>cards</title>
    6. <style type="text/css">
    7. .tab{
    8. height: 36px;
    9. display: flex;
    10. list-style: none;
    11. /*margin: 0 10px;*/
    12. }
    13. /*按钮*/
    14. .tab li{
    15. flex: auto;
    16. text-align: center;
    17. line-height: 36px;
    18. background-color: #fff;
    19. }
    20. .tab li.active{
    21. background-color: red;
    22. }
    23. .tab li:hover{
    24. cursor: pointer;
    25. }
    26. /*默认当前选项卡显示其他的隐藏*/
    27. .item{
    28. padding: 20px;
    29. display: none;
    30. list-style: none;
    31. float:left;
    32. margin-left:450px;
    33. background-color: #ccc;
    34. }
    35. .item.active{
    36. display: block;
    37. list-style: none;
    38. }
    39. .tab li:first-of-type{
    40. background-color: red;
    41. }
    42. </style>
    43. </head>
    44. <body>
    45. <div class="tabs">
    46. <!-- 导航 -->
    47. <ul class="tab">
    48. <li class=" active" data-index="1">省内新闻</li>
    49. <li data-index="2">国际新闻</li>
    50. <li data-index="3">国外新闻</li>
    51. </ul>
    52. <!-- 与导航页对应的详情页 -->
    53. <ul data-index="1" class="item active" >
    54. <li><a href="">省内新闻rewrwe</a></li>
    55. <li><a href="">省内新闻dsfdsfdsf</a></li>
    56. <li><a href="">省内新闻dsfdsfdsf</a></li>
    57. </ul>
    58. <ul data-index="2" class="item">
    59. <li><a href="">国际新闻ewrwer</a></li>
    60. <li><a href="">国际新闻ewrwer</a></li>
    61. <li><a href="">国际新闻ewrwer</a></li>
    62. </ul>
    63. <ul data-index="3" class="item">
    64. <li><a href="">国外新闻rfdsfgdsg</a></li>
    65. <li><a href="">国外新闻jkljl</a></li>
    66. <li><a href="">国外新闻fghfgh</a></li>
    67. </ul>
    68. </div>
    69. <script type="text/javascript">
    70. // 导航tab
    71. const tab=document.querySelector(".tab");
    72. //多个导航页
    73. const items=document.querySelectorAll('.item');
    74. // 事件代理原理
    75. tab.onclick=function(ev){
    76. //清空之前按钮的激活样式,并且将当前的导航设置为激活状态。
    77. //归并参数
    78. [...tab.children].forEach((item)=>
    79. item.style.backgroundColor='#fff');
    80. ev.target.style.backgroundColor="red";
    81. //判断详情
    82. items.forEach((item)=>item.style.display="none");
    83. [...items].filter((item)=>item.dataset.index===ev.target.dataset.index)[0].style.display="block";
    84. }
    85. </script>
    86. </body>
    87. </html>

    换肤案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>换肤</title>
    6. <style type="text/css">
    7. .container{
    8. width:300px;
    9. display:grid;
    10. grid-template-columns:repeat(3,1fr);
    11. column-gap:10px;
    12. }
    13. .container>img{
    14. width:100%;
    15. border:3px solid #ccc;
    16. opacity: 0.6;
    17. }
    18. .container>img:active{
    19. opacity: 1;
    20. }
    21. .container>img:hover{
    22. opacity: 1;
    23. cursor: pointer;
    24. width:105%;
    25. }
    26. body{
    27. background-image: url();
    28. background-size: cover;
    29. background-repeat: no-repeat;
    30. }
    31. </style>
    32. </head>
    33. <body>
    34. <div class="container">
    35. <img src="../images/1.jpg" alt=""/>
    36. <img src="../images/2.jpg" alt=""/>
    37. <img src="../images/3.jpg" alt=""/>
    38. <img src="../images/7.jpg" alt=""/>
    39. <img src="../images/4.jpg" alt=""/>
    40. <img src="../images/5.jpg" alt=""/>
    41. <img src="../images/6.jpg" alt=""/>
    42. <img src="../images/8.jpg" alt=""/>
    43. <img src="../images/9.jpg" alt=""/>
    44. <img src="../images/10.jpg" alt=""/>
    45. </div>
    46. <script type="text/javascript">
    47. const box=document.querySelector(".container");
    48. //事件代理机制原理来做
    49. box.onclick=function(ev){
    50. //body
    51. const body=document.body;
    52. //新的背景图片
    53. let imgUrl=`url("${ev.target.src}")`;
    54. body.style.backgroundImage=imgUrl;
    55. }
    56. document.querySelector(.container).onclick=(ev)=>(document.body.style.backgroundImg=`url("$("ev.target.src")`);
    57. </script>
    58. </body>
    59. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议