day55 jQuery 练习

2023-08-21 13:42:52

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $('#b1').on('click',function () {
      $('.c1').offset({left:200,top:200});
  });
      // 移动c1 的位置 按照本视口移动

  // 设置滚动图标返回顶部
  $(window).on('scroll',function () {
      // 注意window不能加上引号
    if($(window).scrollTop() >100){
        //. 当向下滚动超过100px, 就把右下角那个返回顶部的按钮显示出来
        // 窗口的顶部行数大于100 删除隐藏
        $('#b2').removeClass('hide');
    }
    else{
        // 否则添加隐藏
        $('#b2').addClass('hide');
    }
  });
  // 设置函数并触发
  $('#b2').on('click',function () {
    // 点击后回滚到0 顶部
      $(window).scrollTop(0);
  })
</script>
</body>
</html>

返回顶部示例

2
1怎么样新建一个tr 然后添加内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 怎么样新建一个tr 然后添加内容</title>
</head>
<body>
<script>
    // 1新建一个tr行的标签然后准备建td
    var trEle=document.createElement('tr');
    // console.log(trEle);
    // 2随意添加一些文档内容 0 1 2
    for(var i=0;i<3;i++){
        // 3 新建一个td
        var tdEle=document.createElement('td');
        // console.log(tdEle);
        //***** 4td文档的内容赋值就是td之间的内容等于i
        tdEle.innerText=i;
        // 5添加td 行元素标签添加td元素
        trEle.appendChild(tdEle);
        // 6查看tr 标签及其内容
        console.log(trEle.innerHTML);
    }
    // 查看行标签
    console.log(trEle)
</script>
</body>
</html>

day55 jQuery 练习

3

day55 jQuery 练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于菜单的全选，反选 取消</title>
</head>
<body>
<table border="1px" >
    <thead>
    <tr>
        <th>#</th>
        <th>name</th>
        <th>hobby</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>egon</td>
        <td>街舞</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>德胜</td>
        <td>睡觉</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>建超</td>
        <td>拍马</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>晓梅</td>
        <td>开车</td>
    </tr>
    </tbody>
</table>
 <div>
        <input type="button" id='all' value="全选">
        <input type="button" id='fan' value="反选">
        <input type="button" id='cancer' value="取消">
 </div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 1绑定事件全选 找到标签
        $('#all').on('click',function () {
        // 找到所有的多选框并利用属性prop（checked,true）的知识
        // 注意checked 是个默认已经选择选择 属性里面必须加上引号
        $(':checkbox').prop('checked',true);
    })
    // 2 绑定事件取消  先找到标签
         $('#cancer').on('click',function () {
         $(':checkbox').prop('checked',false);

    })
    // 3 反选 事件并找到标签
    // 新知识each
          $('#fan').on('click',function () {
             // $(':checkbox')是个数组 类似枚举循环 此时内容是[复选框1 复选框2 或者其他]
                $(':checkbox').each(function () {
                   var flag = $(this).prop('checked');
                   // this 可能就是复选框1 checked默认是选择了的
                   //  $(this)此时就是把dom包起来
                     $(this).prop('checked',!flag);
                })
          })
</script>
</html>

4 关于each 循环

day55 jQuery 练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>each循环</title>
</head>
<body>

</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    var a = [11, 22, 33, 44, 55];
    // //第一种 格式 $.each(数组，function ()
    //  $.each(a ,function (i,v) {
    //     console.log(i,v);
    //     if (v === 44){
    //          return false;
    //      }
    // })

    // //第二种$(数组).each(function () {
     $(a).each(function (i,v) {
        console.log(i,v);
         if (v === 44){
             return false;
         }
    })

4 登录注册聚焦时候为空 失去焦点报出内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录校验练习</title>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>
<!--form表单就是个网址可以为空-->
<form action=""></form>
<div>
    <!--用户名设置 注意 for 后边和id值是一样的-->
    <label for="input-name">用户名</label>
    <input type="text" id="input-name">
    <span class="error"></span>
</div>

<div> <!--用户名设置 注意 for 后边和id值是一样的-->
    <label for="input-password">密码</label>
    <input type="password" id="input-password">
     <span class="error"></span>
</div>
<div>
    <input type="button" id='btn' value="提交">
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 找标签并定义函数点击提注意没有on jQuery 此时可有可无
    // 1找到标签 定义函数 实现点击后为空时候 的规范文字不能为空
    // $('#btn').on('click',function () {
    //     // 找到用户名密码的第一次取得值
    //     var username= $("#input-name").val();
    //     var password= $("#input-password").val();
    //     if(username.length===0) {
    //         // 找到标签后的下一个next(标签)标签的错误类名并弹出文档text文本内容
    //         $('#input-name').next('.error').text('对不起 用户名 不能为空');
    //     }
    //     if(password.length===0) {
    //         $('#input-password').next('.error').text('对不起 密码 不能为空');
    //     }
    // });
     $('#input-name').on('blur',function () {
            var username= $('#input-name').val();
            if(username.length===0){
                $('#input-name').next('.error').text('你好密码不能为空哦');
            }
        });

    //   // 3聚焦用户名设置为空 先找到标签
    $("#input-name").on('focus',function () {
        $('#input-name').next('.error').text('');
    });

    // // //4聚焦密码设置为空 先找到标签
     $("#input-password").on('focus',function () {
        $("#input-password").next('.error').text('');
    });

        // 设置密码不能为空 非聚焦的时候
     $('#input-password').on('blur',function () {
            var password= $("#input-password").val();
            if(password.length===0){
                $("#input-password").next('.error').text('你好密码不能为空哦');
            }
        });

</script>
</body>

</html>

6关于return false 切断提交刷新的的示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>return false 切断提交的刷新</title>

</head>
<body>
<form action="">
    <input id='name' type="text">
    <input id='pwd' type="password">
    <input type="submit" value="提交">
</form>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 1先找到提交按钮所在的标签  注意input的属性格式  :submit
    $(':submit').on('click',function () {
        if ($('#name').val().length === 0||$('#pwd').val().length===0){
            // 加上return false后不能点击提交刷新了
       return false;
        }
    })
</script>

</body>

</html>
7
$(A).append(B)// 把B追加到A

$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A

$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面

$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面

$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。

empty()// 删除匹配的元素集合中所有的子节点。

例子：

点击按钮在表格添加一行数据。

点击每一行的删除按钮删除当前行数据。

替换

replaceWith()

replaceAll()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="u1">
    <l1>11</l1>
</ul>

<p id="p1">p1</p>

<div id="d1">
    <div>
        <span>1</span><span>2</span>
    </div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 1创建元素dom 和jQuery 是一样的 只是需要$包起来  需求在l1后边添加l2 内容是22
    //向后插 注意添加的后边不要加引号 否则成了字符串了
    // 针对于子标签的
    // var li2Ele=document.createElement('li');
     // $(li2Ele).text('22');
     // $('ul').append(li2Ele);
     // $(li2Ele).appendTo('ul');

     // 2往前插入
    //  $(li2Ele).text('00');
    //  // $('ul').prepend(li2Ele);
    // $(li2Ele).prependTo('ul');
    // 3 针对同级标签 外部插入
    var pEle=document.createElement('p');
      // $(pEle).text('p2')
      // $('#p1').after(pEle)
      //   $(pEle).insertAfter($('#p1'));

             $(pEle).text('p0');
        // $('#p1').before(pEle);
           $(pEle).insertBefore($('#p1'));
</script>

</body>
</html>
8 文档操作示例  删除 新增

day55 jQuery 练习



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="b1">新增</button>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>egon</td>
        <td>杠娘</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>晓梅</td>
        <td>开车</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>德胜</td>
        <td>睡觉</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr><tr>
        <td>4</td>
        <td>建超</td>
        <td>拍马</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>

    </tbody>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 1查找标签 并定义函数
    $('#b1').on('click',function () {
        // 创建一个行
    var trEle=document.createElement('tr');
    $(trEle).html("<td>5</td> <td>Gold</td> <td>开车</td> <td> <input type='button' value='编辑'> <input class='delete' type='button' value='删除'> </td>");
    $(trEle).appendTo($('tbody'));
    // $('tbody').append(trEle);
});
    // 2普通绑定事件 绑定删除
    $('.delete').on('click',function () {
        // //利用删除标签remove()
        // //this 此时就是现在的delete 所在的标签
        // //此时的标签上一级 是td 再上一级是tr
        $(this).parent().parent().remove();
    });
    // 3 以上出现一个问题 新增的不能删除 因为新增的没有被绑定、
    // 事件委托 利用tr的上级标签去删除
    //   此时注意 .delete 的位置
     $('tbody').on('click','.delete',function () {
        // 利用删除标签remove()
        // this 此时就是现在的delete 所在的标签
        // 此时的标签上一级 是td 再上一级是tr
        $(this).parent().parent().remove();
    });

</script>
</html>

9 关于替换演示




　　1找到div标签然后用pEle 替换
//  $('div').replaceWith(pEle);
//  2 可以理解pEle覆盖div 标签
    $(pEle).replaceAll($('div'));


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换示例</title>
</head>
<body>

<div>div1</div>
<div>div2</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // var pEle = document.createElement("p");
    var pEle= document.createElement('p');
    $(pEle).text('p替换div');
    // 1找到div标签然后用pEle 替换
    // $('div').replaceWith(pEle);
    //     2 可以理解pEle覆盖div 标签
        $(pEle).replaceAll($('div'));

    // $(pEle).text("p标签");
//    $("div").replaceWith(pEle);

    // $(pEle).replaceAll($("div"));
</script>
</body>
</html


10 关于克隆 .clone() 默认是(true)


day55 jQuery 练习




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .c1 {
            background-color: deeppink;
            padding: 10px;
            color: white;
            margin: 5px;
            border: none;
        }
         .c2 {
            background-color: dodgerblue;
            padding: 10px;
            color: white;
            margin: 5px;
            border: none;
        }
    </style>
</head>
<body>
<button class="c1">屠龙宝刀，点击就送11</button>
<hr>
<button class="c2">屠龙宝刀，点击就送22</button>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 1克隆.clone()  insertAfter($('.c1')); 这种情况会迭代的克隆
    $('.c1').on('click',function () {
    //$(this).clone().insertAfter($('.c1'));
    //     2 克隆本个 一个一个的克隆
       $(this).clone(true).insertAfter(this);
    })

</script>
</html>


11  关于事件的  click  hover change keydown  键盘码 event.keyCode



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<button id="b1">点我</button>

<select name="" id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // // 1 选择标签后定义函数 点击触发
    // $('#b1').click(function () {
    //     alert(123);
    // });
    //  // 2 选择标签后定义函数 点击触发 on和1的效果是样  比较推荐的
    //   $('#b1').on('click',function () {
    //     alert(456);
    // });

    // // 3 鼠标移上去 触发 hover事件 按钮会变色
    //  $('#b1').hover('click',function () {
    //     alert(789);
    //     });
    // 4 change 改变下拉选项并选择会显示alert
    //   $("#s1").change(function () {
    //     alert("大王小王");
    // });
    // 按键事件
    // keydown  按下
    // keyup    抬起
    // keypress 按一下
    //     5 按下键盘会显示键盘相对应的键盘码
    //         引用桌面的window的标签  键盘码 keyCode
    $(window).keydown(function () {
        alert(event.keyCode);

    });

</script>

</html>
11 利用shift 键 操作


day55 jQuery 练习


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>键盘事件示例</title>
</head>
<body>

<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Egon</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Alex</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Yuan</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>EvaJ</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Gold</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">

<script src="jquery-3.2.1.min.js"></script>
<script>
  // 全选
  $("#b1").on("click", function () {
    $(":checkbox").prop("checked", true);
  });
  // 取消
  $("#b2").on("click", function () {
    $(":checkbox").prop("checked", false);
  });
  // 反选
  $("#b3").on("click", function () {
    $(":checkbox").each(function () {
      var flag = $(this).prop("checked");
      $(this).prop("checked", !flag);
    })
  });
  var flag=false;
  // 1 按键shift 按下时候 event.keyCode===16
    $(window).on('keydown',function () {
    if (event.keyCode===16) {
        flag=true;
    }
    });
    // 2 按键shift 抬起时候
    $(window).on('keyup',function () {
    if (event.keyCode===16) {
        flag=false;
    }
    });
    // 3 找到select标签 利用change 定义函数
    $('select').on('change',function () {
        // 找到select选中的标签 this此时是select标签内的  上级td 在上一级是tr
        var ischecked= $(this).parent().parent().find('input:checkbox').prop('checked');
        // 如果flag是true 并且找到选中的
        if (flag && ischecked){
            // // $(this).val()指的是在select 中找到的的那个选中的值 例如 下线
            var opptionvalue= $(this).val();
        }
        $('input:checked').parent().parent().find('select').val(opptionvalue);
    })

</script>
</body>
</html>


13 关于$(document).ready(function)  可以预先把加载的内容显示出来前提位置放在body 前面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载完绑定事件 （页面加载之前要想看看内容加上此话）</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        // 传统的找不到
   // var d1Ele = document.getElementById("d1");
   // console.log(d1Ele.innerText);
        // 传统的找不到

    $(document).ready(function () {
        var d1Ele = document.getElementById("d1");
        console.log(d1Ele.innerText);
        // 把绑定事件的操作都放在这里面

    });

</script>

</head>
<body>

<div id="d1">我是div标签</div>

</body>
</html>


13 关于动画的


// 基本

show([s,[e],[fn]])

hide([s,[e],[fn]])

toggle([s],[e],[fn])

// 滑动

slideDown([s],[e],[fn])

slideUp([s,[e],[fn]])

slideToggle([s],[e],[fn])

// 淡入淡出

fadeIn([s],[e],[fn])

fadeOut([s],[e],[fn])

fadeTo([[s],o,[e],[fn]])

fadeToggle([s,[e],[fn]])

// 自定义

animate(p,[s],[e],[fn])


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果示例</title>
</head>
<body>

<img style="position: relative" id="i1" width="300" src="http://www.iyi8.com/uploadfile/2015/1024/20151024114500805.jpg" alt="我前女友">
<button id="b1">再见</button>
<button id="b2">再见x2</button>
<button id="b3">往左</button>
<button id="b4">往右</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // <!--1toggle 有的话点击就删除 没有的话点击就出现 3秒时间-->
    $("#b1").on("click", function () {
        !--$("#i1").toggle(3000);
    });

        // 2fadetoggle 浅入浅出有的话点击就删除 没有的话点击就出现 3秒时间
    $("#b2").on("click", function () {
        $("#i1").fadeToggle(3000);
    });

        // 3 自定义向左向右移动 animated({}) 
     $("#b3").on("click", function () {
        $("#i1").animate({
            "right": "+50px"
        }, 3000)
    });
     $("#b4").on("click", function () {
        $("#i1").animate({
            "right": "-50px"
        }, 3000)
    })
</script>
</body>
</html>


16


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate() 自定义动画 </title>
    <style>
        .c1{
            width: 100px;
            height: 50px;
            background-color: red;
        }
    </style>

</head>
<body>
<div class="c1"></div>
<button class="c2">变长</button>
<script src="jquery-3.2.1.min.js"></script>
    <script>
    // 绑定点击事件 并定义函数
        $('.c2').on('click',function () {
            // 找到要变化的标签 animated( )
            $('.c1').animate({
                'width': '+=50px','height': '+=50px'
            },1000);
    })
    </script>

</body>
</html>


上一篇：[转帖] 一文看懂："边缘计算"究竟是什么？为何潜力无限？

下一篇：spring cloud深入学习(一)-----什么是微服务？什么是rpc？spring cloud简介