jQuery案例

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量6.4k 收藏 203
点赞数 13
分类专栏： 学习笔记 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52476758/article/details/123387709
版权

1. 开关灯(jquery与dom对象转换案例)

​ 点击按钮是网页屏幕变亮或变暗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img{
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <button>开灯</button>
  <button>关灯</button>
  <img src="./image/coder.jpg" alt="">
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function (){
    // 给按钮添加事件：设置body的背景色
    // 1. 获取按钮
    let btns = document.getElementsByTagName('button');

    // 2. 给关灯按钮设置点击事件
    btns[1].onclick=function (){
      $('body').css('backgroundColor','#ccc');
    }

    // 3. 给开灯按钮设置一个点击事件
    $(btns[0]).click(function (){
      $('body')[0].style.backgroundColor='white';
    })
  })
</script>

2. 下拉菜单(选择器案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-image: url(../image/bg.jpg);
    }
    .wrap li{
      background-image: url(../image/libg.jpg);
    }
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单1</a></li>
        <li><a href="javascript:void(0);">二级菜单2</a></li>
        <li><a href="javascript:void(0);">二级菜单3</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单1</a></li>
        <li><a href="javascript:void(0);">二级菜单2</a></li>
        <li><a href="javascript:void(0);">二级菜单3</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单1</a></li>
        <li><a href="javascript:void(0);">二级菜单2</a></li>
        <li><a href="javascript:void(0);">二级菜单3</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

    //获取一级菜单li的方式:
    //$('li');//不行
    //$('ul>li');//不行
    //$('.wrap li');//不行
    //$('.wrap>ul>li')//可行的.

    //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
    $(`.wrap>ul>li`).mouseover(function () {
      //console.log(this); //谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.
      // $(this).children('ul').css('display','block'); //显示就是更改display属性为block.
      $(this).children('ul').show(); //show()方法本质上还是更新display属性为block.
    });

    //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
    $('.wrap>ul>li').mouseout(function () {
      $(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none
    });

    //3.思考题:
    //为什么不给一级菜单a标签设置鼠标移入和离开事件?
    //因为这样的话,选不到二级菜单.
    // $('.wrap>ul>li>a').mouseover(function () {
    //   $(this).siblings('ul').show();
    // });
    // $('.wrap>ul>li>a').mouseout(function () {
    //   $(this).siblings('ul').hide();
    // });
  });
</script>

3. 突出展示(选择器案例)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    body {
      background: #000;
    }
    .wrap {
      margin: 100px auto 0;
      width: 630px;
      height: 394px;
      padding: 10px 0 0 10px;
      background: #000;
      overflow: hidden;
      border: 1px solid #fff;
    }
    .wrap li {
      float: left;
      margin: 0 10px 10px 0;
    }
    .wrap img {
      display: block;
      border: 0;
    }
  </style>
</head>
<body>
<div class="wrap">
  <ul>
    <li><a href="#"><img src="../image/01.jpg" alt=""/></a></li>
    <li><a href="#"><img src="../image/02.jpg" alt=""/></a></li>
    <li><a href="#"><img src="../image/03.jpg" alt=""/></a></li>
    <li><a href="#"><img src="../image/04.jpg" alt=""/></a></li>
    <li><a href="#"><img src="../image/05.jpg" alt=""/></a></li>
    <li><a href="#"><img src="../image/06.jpg" alt=""/></a></li>
  </ul>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //需求1:给小人物所在的li标签设置鼠标移入事件:当前li标签透明度为1,其他的兄弟li标签透明度为0.4
    //需求2:鼠标离开大盒子,所有的li标签的透明度改成1.

    //获取小人物们所在的li
    //$('.wrap li')//可以的
    //console.log($('.wrap').find('li'));//可以的

    //需求1:
    $(`.wrap`).find('li').mouseenter(function () {
      console.log($(this).css('opacity', 1)); //这个css方法有返回值,返回值就是设置这个方法的元素本身.
      console.log($(this).css('opacity', 1).siblings('li'));
      $(this).css('opacity', 1).siblings('li').css('opacity',0.4);
    });

    //需求2:
    $('.wrap').mouseleave(function () {
      //$('.wrap').find('li').css('opacity',1);
      //console.log($(this)); //在这个离开事件中,this是这整个大盒子.
      $(this).find('li').css('opacity',1);
    });

  });
</script>

4. 手风琴(选择器案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    ul {
      list-style-type: none;
    }
    .parentWrap {
      width: 200px;
      text-align: center;

    }
    .menuGroup {
      border: 1px solid #999;
      background-color: #e0ecff;
    }
    .groupTitle {
      display: block;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
    }
    .menuGroup > div {
      height: 200px;
      background-color: #fff;
      display: none;
    }
  </style>
</head>
<body>
<ul class="parentWrap">
  <li class="menuGroup">
    <span class="groupTitle">标题1</span>
    <div>我是弹出来的div1</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题2</span>
    <div>我是弹出来的div2</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题3</span>
    <div>我是弹出来的div3</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题4</span>
    <div>我是弹出来的div4</div>
  </li>
</ul>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.
    $('.parentWrap>.menuGroup').click(function () {
      // console.log($('.menuGroup'))
      //jQuery特性:隐式迭代
      //jQuery特性:链式编程,在于一个方法返回的是一个jQuery对象,既然是jQuery对象就可以继续点出jQuery的方法来.
      $(this).children('div').show().parent().siblings('li').children('div').hide();
    });
  });
</script>

5. 淘宝服饰精品(选择器案例)


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }
    ul {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    .wrapper {
      width: 298px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      overflow: hidden;
    }
    #left,#center,#right{
      float: left;
    }
    #left li , #right li{
      background: url(../image/lili.jpg) repeat-x;
    }
    #left li a,#right li a{
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }
    #left li a:hover,#right li a:hover{
      background-image: url(../image/abg.gif);
    }
    #center {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }
  </style>
</head>
<body>
<div class="wrapper">

  <ul id="left">
    <li><a href="#">女靴</a></li>
    <li><a href="#">雪地靴</a></li>
    <li><a href="#">冬裙</a></li>
    <li><a href="#">呢大衣</a></li>
    <li><a href="#">毛衣</a></li>
    <li><a href="#">棉服</a></li>
    <li><a href="#">女裤</a></li>
    <li><a href="#">羽绒服</a></li>
    <li><a href="#">牛仔裤</a></li>
  </ul>
  <ul id="center">
    <li><a href="#"><img src="../image/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/雪地靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/冬裙.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/呢大衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/女裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/羽绒服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/牛仔裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/女包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/男包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/登山鞋.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/皮带.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/围巾.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/皮衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/男毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/男棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="../image/男靴.jpg" width="200" height="250" /></a></li>
  </ul>
  <ul id="right">
    <li><a href="#">女包</a></li>
    <li><a href="#">男包</a></li>
    <li><a href="#">登山鞋</a></li>
    <li><a href="#">皮带</a></li>
    <li><a href="#">围巾</a></li>
    <li><a href="#">皮衣</a></li>
    <li><a href="#">男毛衣</a></li>
    <li><a href="#">男棉服</a></li>
    <li><a href="#">男靴</a></li>
  </ul>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //需求1:给左边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.
    //需求2:给右边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.

    //需求1:
    $('#left>li').mouseenter(function () {
      //获取当前鼠标移入的这个li标签的索引.
      var idx = $(this).index(); //索引:表示的是这个元素在他兄弟元素间的排行.
      //console.log(idx);
      //让中间索引对应的li显示,其他的li隐藏.
      //$('#center>li:eq('+idx+')'); //字符串的拼接
      $('#center>li').eq(idx).show().siblings('li').hide();
    });

    //需求2:
    $('#right>li').mouseenter(function () {
      //获取当前鼠标移入的这个li标签的索引.
      var idx = $(this).index();
      idx += 9;//9不要写死,9是左边li标签的个数.
      //让中间索引对应的li显示,其他的li隐藏.
      $('#center>li').eq(idx).show().siblings('li').hide();
    });

    //因为age已经成为字符串的一部分了.不能拿到age变量的值.
    // var age = 18;
    // console.log("我的名字是age");

    //思考题:
    //为什么是给li标签设置鼠标移入事件,而不是给a标签设置鼠标移入事件?
    //因为给a标签设置的话,不能拿到正确的索引.
    // $('#left a').mouseenter(function () {
    //    var idx =  $(this).index();
    //     console.log(idx);
    // });
  });
</script>

6. tab栏切换(class操作案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }
    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }
    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }
    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }
    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }
    .products .main {
      float: left;
      display: none;
    }
    .products .main.selected {
      display: block;
    }
    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <ul class="tab">
    <li class="tab-item active">国际大牌<span>◆</span></li>
    <li class="tab-item">国妆名牌<span>◆</span></li>
    <li class="tab-item">清洁用品<span>◆</span></li>
    <li class="tab-item">男士精品</li>
  </ul>
  <div class="products">
    <div class="main selected">
      <a href="###"><img src="../image/guojidapai.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="../image/guozhuangmingpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="../image/qingjieyongpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="../image/nanshijingpin.jpg" alt=""/></a>
    </div>
  </div>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类.
    //    找到当前tab栏索引一致的div,让他添加 selected类,其他的兄弟div移除selected类.

    //需求1
    $('.tab>.tab-item').mouseenter(function () {
      $(this).addClass('active').siblings('li').removeClass('active');
      //获取鼠标当前移入的这个li标签的索引
      var idx = $(this).index();

      //需求2:
      $('.products>.main').eq(idx).addClass('selected').siblings('div').removeClass('selected');
    });
  });
</script>

7. 下拉菜单(滑入与滑出案例)

// html与css代码与下拉菜单(选择器案例)相同
$(function () {
    //需求: 给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

    //鼠标移入事件.
    $(`.wrap>ul>li`).mouseenter(function () {
        //$(this).children('ul').css('display','block');
        //简写
        $(this).children('ul').stop(true,false).slideDown(300);
    });
    //鼠标移出事件.
    $('.wrap>ul>li').mouseleave(function () {
        //$(this).find('ul').css('display','none');
        //简写
        $(this).find('ul').stop(true,false).slideUp(150);
    });
});

8. 360开机动画(自定义动画案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box {
      width: 322px;
      position: fixed;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }
    span {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <span id="closeButton"></span>
  <div class="hd" id="headPart">
    <img src="../image/t.jpg" alt=""/>
  </div>
  <div class="bd" id="bottomPart">
    <img src="../image/b.jpg" alt=""/>
  </div>
</div>

</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //1.给关闭按钮一个点击事件.
    $('#closeButton').click(function () {
      //2.让下面那部分的高度动画变为0.
      $('#bottomPart').animate({
        height:0
      },500, function () {
        //3.让整个大盒子的宽度动画变为0
        $('#box').animate({
          width:0
        },1000);
      });
    });
  });
</script>

9. 生成表格(动态创建元素案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    th,td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    td {
      font: 14px "微软雅黑";
    }
    tbody tr {
      background-color: #f0f0f0;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
  <thead>
  <tr>
    <th>标题</th>
    <th>地址</th>
    <th>说明</th>
  </tr>
  </thead>
  <tbody id="j_tbData"></tbody>
</table>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //模拟从后端拿到的数据
    //data数组的每一个元素其实就是一个tr.
    var data = [{
      name: "传智播客",
      url: "http://www.itcast.cn",
      type: "IT最强培训机构"
    }, {
      name: "黑马程序员",
      url: "http://www.itheima.com",
      type: "大学生IT培训机构"
    }, {
      name: "传智前端学院",
      url: "http://web.itcast.cn",
      type: "前端的黄埔军校"
    }];

    //需求:点击获取数据按钮,根据data这个数组里面的数据来给tbody追加tr.
    //data这个数组,有多少个元素,就生成多少个tr, 每一个元素又是一个对象,所以对象有多少个键值对就有多少个td.

    //给获取数据按钮设置一个点击事件.
    $('#j_btnGetData').click(function () {
      //1.html();
      //设置内容,内容中有标签会解析; 会覆盖原来的内容的.
      var list = [];
      for(var i = 0 ; i < data.length; i++){
        //生成tr.
        list.push("<tr>");
        //生成td
        for(var key in data[i]){
          list.push('<td>');
          list.push(data[i][key]);
          list.push('</td>');
        }
        list.push("</tr>");
      }
      //console.log(list.join(""));
      $('#j_tbData').html(list.join(""));

      //2.$();
      // for(var i = 0 ; i < data.length; i++){
      // 	var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");
      //   //把创建出来的$tr追加到tbody中去.
      //   $('#j_tbData').append($tr);
      // }
    });
  });
</script>

10. 城市选择(节点创建案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    select {
      width: 200px;
      background-color: teal;
      height: 200px;
      font-size: 20px;
    }
    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
    }
  </style>
<body>
  <h1>城市选择：</h1>
  <select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
  </select>
  <div class="btn-box">
    <!--实体字符-->
    <button id="btn-sel-all"> &gt;&gt; </button>
    <button id="btn-sel-none"> &lt;&lt; </button>
    <button id="btn-sel"> &gt;</button>
    <button id="btn-back"> &lt; </button>
  </div>
  <select id="tar-city" name="tar-city" multiple>
  </select>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //1.全部到右边
    $('#btn-sel-all').click(function () {
      //找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去.
      $('#src-city>option').appendTo($('#tar-city'));
    });

    //2.全部到左边
    $('#btn-sel-none').click(function () {
      //找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去.
      $('#tar-city>option').appendTo($('#src-city'));
    });

    //3.选中的到右边.
    $('#btn-sel').click(function () {
      //找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中.
      $('#src-city>option:selected').appendTo($('#tar-city'));
    });

    //4.选中的到左边.
    $('#btn-back').click(function () {
      //找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中.
      $('#tar-city>option:selected').appendTo($('#src-city'));
    });
  });
</script>

11. 表格删除(清空和移除节点案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .wrap {
      width: 410px;
      margin: 100px auto 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    th, td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 16px "΢ÈíÑźÚ";
      color: #fff;
    }
    td {
      font: 14px "΢ÈíÑźÚ";
    }
    td a.get {
      text-decoration: none;
    }
    a.del:hover {
      text-decoration: underline;
    }
    tbody tr {
      background-color: #f0f0f0;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
    .form-item > .lb {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100px;
      text-align: right;
    }
    .form-item > .txt {
      width: 300px;
      height: 32px;
    }
    .form-add-title span {
      width: auto;
      height: 18px;
      font-size: 16px;
      font-family: ËÎÌå;
      font-weight: bold;
      color: rgb(102, 102, 102);
      text-indent: 12px;
      padding: 8px 0px 10px;
      margin-right: 10px;
      display: block;
      overflow: hidden;
      text-align: left;
    }
    .form-add-title div {
      width: 16px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 6px;
      font-size: 30px;
      line-height: 16px;
      cursor: pointer;
    }
    .form-submit input {
      width: 170px;
      height: 32px;
    }
  </style>
</head>
<body>
<div class="wrap">
  <input type="button" value="清空内容" id="btn">
  <table>
    <thead>
      <tr>
        <th>课程名称</th>
        <th>所属学院</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="j_tb">
      <tr>
        <td>JavaScript</td>
        <td>传智播客-前端与移动开发学院</td>
        <td><a href="javascrip:;" class="get">DELETE</a></td>
      </tr>
      <tr>
        <td>css</td>
        <td>传智播客-前端与移动开发学院</td>
        <td><a href="javascrip:;" class="get">DELETE</a></td>
      </tr>
      <tr>
        <td>html</td>
        <td>传智播客-前端与移动开发学院</td>
        <td><a href="javascrip:;" class="get">DELETE</a></td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>传智播客-前端与移动开发学院</td>
        <td><a href="javascrip:;" class="get">DELETE</a></td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //1.清空内容
    $('#btn').click(function () {
      //找到tbody,清空他的内容.
      $('#j_tb').empty();
    });

    //2.删除对应的行.
    $('#j_tb .get').click(function () {
      //点击a标签,删除a标签对应的那一行.
      $(this).parent().parent().remove();
    });
  });
</script>

12. 动态数据添加和删除(val()方法案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .wrap {
      width: 410px;
      margin: 100px auto 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    th, td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    td {
      font: 14px "微软雅黑";
    }
    td a.get {
      text-decoration: none;
    }
    a.del:hover {
      text-decoration: underline;
    }
    tbody tr {
      background-color: #f0f0f0;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
    .btnAdd {
      width: 110px;
      height: 30px;
      font-size: 20px;
      font-weight: bold;
    }
    .form-item {
      height: 100%;
      position: relative;
      padding-left: 100px;
      padding-right: 20px;
      margin-bottom: 34px;
      line-height: 36px;
    }
    .form-item > .lb {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100px;
      text-align: right;
    }
    .form-item > .txt {
      width: 300px;
      height: 32px;
    }
    .mask {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.6;
      display: none;
    }
    #j_hideFormAdd {
      width: 22px;
      height: 22px;
      cursor: pointer;
      text-align: center;
      line-height: 22px;
      font-size: 18px;
    }
    #j_hideFormAdd:hover {
      background-color: skyblue;
    }
    .form-add {
      position: fixed;
      top: 30%;
      left: 50%;
      margin-left: -197px;
      padding-bottom: 20px;
      background: #fff;
      display: none;
    }
    .form-add-title {
      background-color: #f7f7f7;
      border-width: 1px 1px 0 1px;
      border-bottom: 0;
      margin-bottom: 15px;
      position: relative;
    }
    .form-add-title span {
      width: auto;
      height: 18px;
      font-size: 16px;
      font-family: 宋体;
      font-weight: bold;
      color: rgb(102, 102, 102);
      text-indent: 12px;
      padding: 8px 0px 10px;
      margin-right: 10px;
      display: block;
      overflow: hidden;
      text-align: left;
    }
    .form-add-title div {
      width: 16px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 6px;
      font-size: 30px;
      line-height: 16px;
      cursor: pointer;
    }
    .form-submit {
      text-align: center;
    }
    .form-submit input {
      width: 170px;
      height: 32px;
    }
  </style>
</head>
<body>
<!--按钮和表单-->
<div class="wrap">
  <div>
    <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
  </div>
  <table>
    <thead>
    <tr>
      <th>课程名称</th>
      <th>所属学院</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>JavaScript</td>
      <td>传智播客-前端与移动开发学院</td>
      <td><a href="javascript:;" class="get">delete</a></td>
    </tr>
    <tr>
      <td>css</td>
      <td>传智播客-前端与移动开发学院</td>
      <td><a href="javascript:;" class="get">delete</a></td>
    </tr>
    <tr>
      <td>html</td>
      <td>传智播客-前端与移动开发学院</td>
      <td><a href="javascript:;" class="get">delete</a></td>
    </tr>
    <tr>
      <td>jQuery</td>
      <td>传智播客-前端与移动开发学院</td>
      <td><a href="javascript:;" class="get">delete</a></td>
    </tr>
    </tbody>
  </table>
</div>
<!--遮罩层-->
<div id="j_mask" class="mask"></div>
<!--添加数据的表单-->
<div id="j_formAdd" class="form-add">
  <div class="form-add-title">
    <span>添加数据</span>
    <div id="j_hideFormAdd">×</div>
  </div>
  <div class="form-item">
    <label class="lb" for="j_txtLesson">课程名称：</label>
    <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
  </div>
  <div class="form-item">
    <label class="lb" for="j_txtBelSch">所属学院：</label>
    <input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
  </div>
  <div class="form-submit">
    <input type="button" value="添加" id="j_btnAdd">
  </div>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //需求1:点击 添加数据 按钮,显示添加面板和遮罩层.
    //需求2:点击添加面板里的关闭按钮,隐藏添加面板和遮罩层.
    //需求3:点击添加面板里的添加按钮,会把输入的内容生成一个tr,这个tr添加到tbody中
    //需求4:点击delete这些a标签,删除对应的tr.

    //需求1:
    $('#j_btnAddData').click(function () {
      $('#j_formAdd').show();
      $('#j_mask').show();
    });

    //需求2:
    $('#j_hideFormAdd').click(function () {
      $('#j_formAdd').hide();
      $('#j_mask').hide();
    });

    //需求3:
    $('#j_btnAdd').click(function () {
      //3.1 获取到用户输入的所属学院和课程名称.
      var txtLesson = $('#j_txtLesson').val(); //获取用户输入的课程名称
      var txtBelSch = $('#j_txtBelSch').val(); //获取用户输入的所属学院
      //3.2 把用户输入的课程名称和所属学院 ,创建出一个tr.
      var $trNew =$( '<tr>' +
          '<td>'+txtLesson+'</td>'+
          '<td>'+txtBelSch+'</td>' +
          '<td><a href="javascript:;" class="get">delete</a></td>' +
          '</tr>' );

      //给新创建的这个$trNew里面的a标签添加一个事件.
      $trNew.find('.get').click(function () {
        //$(this).parent().parent().remove();
        $trNew.remove();
      });

      //3.3 把新创建的tr标签添加到tbody中.
      $('#j_tb').append($trNew);
      //3.4 把添加数据面板和遮罩层影藏起来.
      $('#j_hideFormAdd').click();
    });

    //4.需求
    $('#j_tb .get').click(function () {
      $(this).parent().parent().remove();
    });

    //页面出现了哈哈二字,说明上面的代码,包括需求4这个注册事件,都已经完成了.
    //说明原来的那4个tr已经注册了事件了.
    console.log("哈哈");
  });
</script>

13. 美女相册(操作属性案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      font-family: "Helvetica","Arial",serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }
    h1 {
      color: #333;
      background-color: transparent;
    }
    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }
    ul {
      padding: 0;
    }
    li {
      float: left;
      padding: 1em;
      list-style: none;
    }
    #imagegallery {
      list-style: none;
    }
    #imagegallery li {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }
    #imagegallery li a img {
      border: 0;
    }
  </style>
</head>
<body>
<h2>美女画廊</h2>
<ul id="imagegallery">
  <li><a href="../image/meinv/1.jpg" title="美女A">
    <img src="../image/meinv/1-small.jpg" width="100" alt="美女1" />
  </a></li>
  <li><a href="../image/meinv/2.jpg" title="美女B">
    <img src="../image/meinv/2-small.jpg" width="100" alt="美女2" />
  </a></li>
  <li><a href="../image/meinv/3.jpg" title="美女C">
    <img src="../image/meinv/3-small.jpg" width="100" alt="美女3" />
  </a></li>
  <li><a href="../image/meinv/4.jpg" title="美女D">
    <img src="../image/meinv/4-small.jpg" width="100" alt="美女4" />
  </a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="../image/meinv/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //1.需求
    //给小图片a标签设置一个单击事件.
    //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
    //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.

    $('#imagegallery>li>a').click(function () {
      //获取当前点击的a标签的href属性的值和title属性的值。
      var srcValue = $(this).attr('href');
      var contentValue = $(this).attr('title');
      //给img标签的src属性赋值，以及给p标签的内容赋值。
      $('#image').attr('src',srcValue);
      $('#des').text(contentValue);
      //阻止a标签的跳转
      return false;
    });
  });
</script>

14. 表格全选反选(prop()方法案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    th, td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    td {
      font: 14px "微软雅黑";
    }
    tbody tr {
      background-color: #f0f0f0;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
      <tr>
        <th>
          <input type="checkbox" id="j_cbAll"/>
        </th>
        <th>课程名称</th>
        <th>所属学院</th>
      </tr>
    </thead>
    <tbody id="j_tb">
      <tr>
        <td>
          <input type="checkbox"/>
        </td>
        <td>JavaScript</td>
        <td>前端与移动开发学院</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox"/>
        </td>
        <td>css</td>
        <td>前端与移动开发学院</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox"/>
        </td>
        <td>html</td>
        <td>前端与移动开发学院</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox"/>
        </td>
        <td>jQuery</td>
        <td>前端与移动开发学院</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="one"></div>
</body>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //需求1：上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
    $('#j_cbAll').click(function () {
      //获取这多选框的checked值。
      var checkedValue = $(this).prop('checked');
      //console.log(checkedValue);
      //让下面的多选框们的checked跟随这个checkedValue
      $('#j_tb input').prop('checked',checkedValue);
    });

    //需求2：下面的多选框们,都有单击事件:
    // 如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.
    $('#j_tb input').click(function () {
      //判断下面的那四个多选框是否都被选中了。
      var numOfAll = $('#j_tb input').length; //获取到下面所有多选框的个数。
      var numOfSelect = $('#j_tb input:checked').length; //获取到下面被选中的多选框的个数。
      console.log(numOfAll + ":" + numOfSelect);
      //判断
      // if(numOfAll == numOfSelect){
      //     //全部被选中。
      //     $('#j_cbAll').prop('checked',true);
      // }else {
      //     //有的有没选中。
      //     $('#j_cbAll').prop('checked',false);
      // }

      //上面这个判断其实可以优化。
      $('#j_cbAll').prop('checked',numOfAll === numOfSelect);
    });
  });
</script>
</html>

15. 固定导航栏(scrollTop与scrollLeft案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .top, .nav {
      width: 1423px;
      margin: 0 auto;
    }
    .main {
      width: 1000px;
      margin: 10px auto;
    }
    img {
      display: block;
      vertical-align: middle;
    }
  </style>
</head>
<body>
<div class="top">
  <img src="../image/top.png"/>
</div>
<div class="nav">
  <img src="../image/nav.png"/>
</div>
<div class="main">
  <img src="../image/main.png"/>
</div>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,
    // 如果这个值大于第一部分的高度,就设置第二部分为固定定位.
    // 如果这个值小于第一部分的高度,就设置第二部分的定位还原.

    //计算第一部分的高度.
    var topHeight = $('.top').height();
    //计算第二部分的高度.
    var navHeight = $('.nav').height();

    //给页面设置一个滚动事件.
    $(window).scroll(function () {
      //1.获取页面滚出去的距离(被卷曲出去的距离);
      var scrollTopValue =  $(window).scrollTop();
      //2.判断,看scrollTopValue的值是不是大于第一部分的高度.
      if(scrollTopValue >= topHeight){
        //让第二部分固定定位.
        $('.nav').css({
          position:'fixed',
          top:0,
          left:0
        });
        //设置第三部分的margin-top的值为第二部分的高度.
        $('.main').css({
          marginTop:navHeight+10
        });
      }else {
        //让第二部分定位还原.
        $('.nav').css({
          position:'static',
          top:0,
          left:0
        });
        //设置第三部分的margin-top的值为原来的值.
        $('.main').css({
          marginTop:10
        });
      }
    });
  });
</script>
</body>
</html>

16. 动态数据添加和删除(使用on委托注册事件)

// html与css、部分js与案例12相同
// 修改需求4
 //使用on委托注册的方式来添加删除方法.
//支持动态注册的.
$('#j_tb').on('click','.get', function () {
    //jQuery为了使用方便,把this给修改了.
    //console.log($(this));
    $(this).parent().parent().remove();
});

17. 按键变色(jquery事件对象案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<<style>
  .wrap {
    width: 400px;
    height: 400px;
    margin: 100px auto 0;
  }
  .wrap h1 {
    text-align: center;
  }
  .wrap div {
    width: 400px;
    height: 300px;
    background: pink;
    font-size: 30px;
    text-align: center;
    line-height: 300px;
  }
</style>
</head>
<body>

<div class="wrap">
  <h1>按键改变颜色</h1>
  <div id="bgChange">
    keyCode为：
    <span id="keyCodeSpan"></span>
  </div>
</div>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //获取div
    var $div = $('#bgChange');
    //获取显示按键的span
    var $showCode = $('#keyCodeSpan');

    //给页面注册一个键盘按下事件.
    $(document).on('keydown', function (e) {
      //console.log(e.keyCode); //r 82   g 71   b 66   p 80   y 89
      switch (e.keyCode){
        case 82:
          $div.css('backgroundColor','red');
          $showCode.text(82);
          break;
        case 71:
          $div.css('backgroundColor','green');
          $showCode.text(71);
          break;
        case 66:
          $div.css('backgroundColor','blue');
          $showCode.text(66);
          break;
        case 80:
          $div.css('backgroundColor','purple');
          $showCode.text(80);
          break;
        case 89:
          $div.css('backgroundColor','yellow');
          $showCode.text(89);
          break;
        default :
          $div.css('backgroundColor','pink');
          $showCode.text("查无此键");
          break;
      }
    });
  });
</script>
</body>
</html>

18. 五角星评分(jquery事件对象案例)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .comment {
      font-size: 40px;
      color: red;
    }
    .comment li {
      float: left;
      cursor: pointer;
    }
    ul {
      list-style: none;
    }
  </style>
</head>
<body>
<ul class="comment">
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
</ul>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  $(function () {
    //prev(); 上一个兄弟;prevAll(); 之前所有的兄弟 ;next(); 下一个兄弟  ;nextAll(); 之后所有的兄弟

    //声明两个个变量,分别记录这个实心/空心五角心.
    var sx_wjx = '★';
    var kx_wjx = '☆';

    $('.comment>li').on('mouseenter', function () {
      //需求1:
      // //当前鼠标移入的li和他之前的兄弟li都显示实心五角心.
      // $(this).text(sx_wjx).prevAll().text(sx_wjx);
      // //当前鼠标移入的li之后的兄弟li都显示空心五角心.
      // $(this).nextAll().text(kx_wjx);

      //这样不行.
      //$(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);
      //这样又可行, 加了一个end();
      $(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
    }).on('mouseleave', function () {
      //需求2:鼠标离开li,所有的li都变成空心.
      $('.comment>li').text(kx_wjx);
      //获取刚才点击的那个li.
      $('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);
    }).on('click', function () {
      //需求3:点击li,鼠标离开后,刚才点击的那个li和之前的li都变成实心五角心,后面空心五角心.
      //给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li.
      //给当前鼠标点击的这个li添加一个独一无二的属性.
      $(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');
    });
  });
</script>
</body>
</html>
栀虞子
关注
  • 13
    点赞
  • 踩
  • 203
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端三级联动代码（处理了谷歌浏览器兼容性问题）
01-24
前端三级联动简介美化版代码（处理了谷歌浏览器兼容性问题）
jQuery经典小案例
热门推荐
娃娃的博客
03-29 1万+
目录 下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 效果图： 源代码： 鼠标进入事件mouseenter 鼠标离开事件mouseleave 下拉动画slideDown /slid...
jquerycasecader一个jquery级联下拉组件
08-12
jquery-casecader一个jquery级联下拉组件
常用的jquery案例
09-21
充分讲解了jquery的实战场景，帮助你快速掌握jquery技术啊
jquery案例
10-21
jquery案例，单行文本框内部文字提示，注册页面的提示效果
jquery 小例子
03-21
NULL 博文链接：https://hb-keepmoving.iteye.com/blog/937908
jQuery 的第一个例子
冯瑞涛的博客
01-18 348
  通过这个例子可以对jQuery的使用有个基本的认识，jQuery的事件句柄、选择器、基本语法结构，你可以复制这些代码运行感受一下。 在做第一个例子之前，你需要先到jQuery 1.3 正式版 下载 jQuery库，他是一个js的文件非常的小巧只有那么几十KB，然后就是把这个文件Copy到你的项目，用Script附加这个文件就可以了。   Code&lt;!--&lt;br /&gt...
JQuery案例
01-20
JQuery综合案例，适合于学习初级JQuery的的开发者,这是一个不错的案例,对你们有很多大的帮助请多多支持
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
经典jquery案例 经典jquery
08-29
经典jquery例子，这里包含可编辑表格、div制作弹出窗口、模拟动态股票、动态菜单例子、自动补全还有div实现jquery动态滑动效果。
Jquery实例汇总
10-15
30个jquery实例，覆盖了jquery的各个用法，通过这些实例对jquery选择器、jquery事件处理、jquery应用的各个场景会更加熟悉。如果你不懂jquery基础知识，请参看我的jquery知识点汇总，那里用思维导图的形式总结了jquery的基本知识点，配合每个知识点的代码实现，一定会对你使用和学习jquery起到很大帮助。
50个Jquery经典实例 50个Jquery经典实例
03-23
50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例
jQuery全部案例
03-31
包含了博客里面的所有案例 相关博客查看https://blog.csdn.net/qq_41243737/article/details/105116006
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 618
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1059
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 357
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
jQuery 遍历案例
07-27
jQuery Mobile是一个基于jQuery的JavaScript库，用于开发移动设备上的网页应用。它具有跨平台和跨浏览器的能力，可以让您使用统一的代码开发多种类型的移动设备。jQuery Mobile提供了丰富的UI组件，如导航栏、按钮、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值