精华内容
下载资源
问答
  • jquery项目案例
    千次阅读
    2022-03-09 21:15:13

    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>
    
    更多相关内容
  • jQuery项目案例

    2022-06-27 09:30:55
    2、微博发布 3、移动水果 4、上下拉切换 5、精品演示 6、tab标签切换 7、突出显示 总结 li:first li:last li:eq(2) li:odd --奇数 li:even --偶数 ul li --子代 ul

    1、动态添加和删除数据

    案例演示:
    在这里插入图片描述
    实现步骤:
    val()获取值,tr添加设置内容,append内部添加,slideDown向下滑动,val()清空

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>jQuery动态添加和删除数据</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="jquery.js"></script>
      </head>
      <body>
          <div>
            课程名称:<input type="text" id="tname">
            所属学院:<input type="text" id="tdep">
            <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd">
          </div>
          <table id="j_tb">
           
              <tr>
                <th>课程名称</th>
                <th>所属学院</th>
                <th>已学会</th>
              </tr>
              <tr>
                <td>JavaScript</td>
                <td>信息工程系</td>
                <td><a href="javascrip:;" class="del">删除</a></td>
              </tr>
              <tr>
                <td>css</td>
                <td>信息工程系</td>
                <td><a href="javascrip:;" class="del">删除</a></td>
              </tr>
              <tr>
                <td>html</td>
                <td>信息工程系</td>
                <td><a href="javascrip:;" class="del">删除</a></td>
              </tr>
              <tr>
                <td>jQuery</td>
                <td>信息工程系</td>
                <td><a href="javascrip:;" class="del">删除</a></td>
              </tr>
          </table>
    
        <script>
    	$(function(){
    		$("#j_btnAddData").click(function(){
    			var tname=$("#tname").val();
    			var tdep=$("#tdep").val();
    			// var tr=$("<tr></tr>");
    			// var td1=$("<td></td>");
    			// var td2=$("<td></td>");
    			// var td3=$("<td></td>");
    			// td1.html(tname);
    			// td2.html(tdep);
    			// td3.html('<a href="javascrip:;" class="del">删除</a>');
    			// tr.append(td1);
    			// tr.append(td2);
    			// tr.append(td3);
    			var all =$("<tr><td>"+tname+"</td><td>"+tdep+"</td><td><a href='javascrip:;' class='del'>删除</a><td></tr>")
    
    			$("#j_tb").append(all);
    			all.slideDown();
    			$("#tname").val("");
    			$("#tdep").val("");
    		})
    		$("#j_tb").on("click","a",function(){
    			$(this).parents("tr").remove();
    		})
    	})
        </script>
      </body>
    </html>
    

    2、微博发布

    案例演示:
    在这里插入图片描述
    实现步骤:

    <!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ul {
                list-style: none;
            }
            
            .box {
                width: 600px;
                margin: 100px auto;
                border: 1px solid #000;
                padding: 20px;
            }
            
            textarea {
                width: 450px;
                height: 160px;
                outline: none;
                resize: none;
            }
            
            ul {
                width: 450px;
                padding-left: 80px;
            }
            
            ul li {
                line-height: 25px;
                border-bottom: 1px dashed #cccccc;
                display: none;
            }
            
            input {
                float: right;
            }
            
            ul li a {
                float: right;
            }
        </style>
    	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
        <script>
    		$(function(){
    			$(".btn").click(function(){
    				var txt =$(".txt").val();
    				console.log(txt);
    				var li=$("<li></li>");
    				li.html(txt+"<a href='javascript:;'>删除</a>");
    				$("ul").prepend(li);
    				li.slideDown();
    				$(".txt").val("");
    			})
    			
    				$("ul").on("click","a",function(){
    					// $(this).parent().slideUp(function(){
    						$(this).parent().remove();
    					// })
    				})
    		})
        </script>
    </head>
    
    <body>
        <div class="box" id="weibo">
            <span>微博发布</span>
            <textarea name="" class="txt" cols="30" rows="10"></textarea>
            <button class="btn">发布</button>
            <ul>
            </ul>
        </div>
    </body>
    </html>
    

    3、移动水果

    案例演示:
    在这里插入图片描述

    实现步骤:

    
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            select {
                width: 200px;
                height: 300px;
                font-size: 22px;
                background-color: #80ff45;
            }
        </style>
    	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
        
    </head>
    <body>
    
        <select name="" id="sel1" class="sel1" size="4" multiple>
            <option value="">香蕉</option>
            <option value="">大鸭梨</option>
            <option value="">苹果</option>
            <option value="">大西瓜</option>
        </select>
    
        <button class="allright">&gt;&gt;&gt;</button>
        <button class="allleft">&lt;&lt;&lt;</button>
        <button class="right">&gt;</button>
        <button class="left">&lt;</button>
    
        <select name="" id="sel2" class="sel2" size="4" multiple>
    		
    	</select>
    
    <script type="text/javascript">
    
    $(function(){
    	$(".allright").click(function(){
    		$("#sel2").prepend($("#sel1 option"));
    	})
    	$(".allleft").click(function(){
    		$("#sel1").prepend($("#sel2 option"));
    		
    	})
    	$(".right").click(function(){
    		$("#sel2").prepend($("#sel1 option:selected"))
    	})
    	$(".left").click(function(){
    		$("#sel1").prepend($("#sel2 option:selected"))
    	})
    })
    	
    </script>
    </body>
    </html>
    

    4、上下拉切换

    案例演示:
    在这里插入图片描述

    实现步骤:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<script type="text/javascript" src="jquery.js">
    		
    	</script>
    	<style>
    		div{
    			width: 300px;
    			height: 500px;
    			background-color: #00FFFF;
    		}
    	</style>
    	<body>
    		<button type="button">下拉</button>
    		<button type="button">上拉</button>
    		<button type="button">切换</button>
    		<div></div>
    		
    		<script type="text/javascript">
    			$(function(){
    				$("button").eq(0).click(function(){
    					$("div").slideDown();
    				})
    				$("button").eq(1).click(function(){
    					$("div").slideUp();
    				})
    				$("button").eq(2).click(function(){
    					$("div").slideToggle();
    				})
    			})
    		</script>
    	</body>
    </html>
    
    

    5、精品演示

    案例演示:
    在这里插入图片描述

    实现步骤:
    获取下标,对应内容通过下标show,其他hide

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    </html>
    <!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 12px;
            }
            
            ul {
                list-style: none;
            }
            
            a {
                text-decoration: none;
            }
            
            .wrapper {
                width: 250px;
                height: 248px;
                margin: 100px auto 0;
                border: 1px solid pink;
                border-right: 0;
                overflow: hidden;
            }
            
            #left,
            #content {
                float: left;
            }
            
            #left li {
                background: url(images/lili.jpg) repeat-x;
            }
            
            #left 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 {
                background-image: url(images/abg.gif);
            }
            
            #content {
                border-left: 1px solid pink;
                border-right: 1px solid pink;
            }
        </style>
        <script src="jquery.js"></script>
        <script>
    	$(function(){
    		$("#left li").click(function(){
    			//获取点击的数组下标
    			var index=$(this).index();
    			$("#content div").eq(index).show().siblings().hide();
    		})
    	})
        </script>
    </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>
            <div id="content">
                <div>
                    <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
                </div>
            </div>
        </div>
    </body>
    
    </html>
    

    6、tab标签切换

    案例演示:
    在这里插入图片描述

    实现步骤:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    	<script type="text/javascript" src="jquery.js">
    		
    	</script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            .tab {
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list {
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
            
            .item_info {
                padding: 20px 0 0 20px;
            }
            
            .item {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(50000)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block;">
                    商品介绍模块内容
                </div>
                <div class="item">
                    规格与包装模块内容
                </div>
                <div class="item">
                    售后保障模块内容
                </div>
                <div class="item">
                    商品评价(50000)模块内容
                </div>
                <div class="item">
                    手机社区模块内容
                </div>
    
            </div>
        </div>
        <script>
    		$(function(){
    			$(" ul li").mouseover(function(){
    				var index = $(this).index()
    				$(".item").eq(index).show().siblings().hide();
    				$("ul li").eq(index).addClass("current").siblings().removeClass("current");
    			})
    		})
        </script>
    </body>
    </html>
    

    7、突出显示

    案例演示:
    在这里插入图片描述

    实现步骤:
    触碰透明度0.5 离开透明度 1 (opacity)

    <!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>
    <script type="text/javascript" src="../jquery.js">
    	
    </script>
        <script>
    		$(function(){
    			$("ul li").mouseover(function(){
    				var index=$(this).index();
    				$("li").eq(index).siblings().stop().animate({
    					opacity:0.5
    				})
    			})
    			$("ul li").mouseout(function(){
    				var index=$(this).index();
    				$("li").eq(index).stop().siblings().stop().animate({
    					opacity:1
    				})
    			})
    		})
        </script>
    </head>
    
    <body>
        <div class="wrap">
            <ul>
                <li>
                    <a href="#"><img src="images/01.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/02.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/03.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/04.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/05.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="images/06.jpg" alt="" /></a>
                </li>
            </ul>
        </div>
    </body>
    </html>
    

    8、下拉菜单

    案例演示:
    在这里插入图片描述

    实现步骤:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="jquery.js"></script>
    	</head>
    	<body>
    		<script>
    			$(function(){
    				$(".wrap>li").mouseover(function(){
    					$(this).children("ul").stop().slideDown();
    				})
    				$(".wrap>li").mouseout(function(){
    					$(this).children("ul").stop().slideUp();
    				})
    			})
    		</script>
    		<ul class="wrap">
    			<li class="cc">
    				微博
    				<ul>
    					<li><a href="">私信</a></li>
    					<li><a href="">评论</a></li>
    					<li><a href="">添加好友</a></li>
    				</ul>
    			</li>
    		</ul>
    	</body>
    </html>
    
    

    9、页面滚动

    案例演示:
    在这里插入图片描述

    实现步骤:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                height: 2000px;
            }
            
            .back {
                position: fixed;
                width: 50px;
                height: 50px;
                background-color: pink;
                right: 30px;
                bottom: 100px;
                display: block;
            }
            
            .container {
                width: 900px;
                height: 500px;
                background-color: skyblue;
                margin: 400px auto;
            }
        </style>
        <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
    </head>
    
    <body>
        <div class="back">返回顶部</div>
        <div class="container">
        </div>
        <script>
            $(function() {
    		   $(window).scroll(function(){
    			   var scrollTop=$(document).scrollTop();
    				var top=$(".container").offset().top;
    				if(scrollTop>=top){
    					$(".back").fadeIn();
    				}else{
    					$(".back").fadeOut();
    				}
    		   })
    
    		   $(".back").click(function(){
    			   // $(document).scrollTop(0);
    			   $("html,body").stop().animate({//动画效果只能是元素去做,不能是文档
    				   scrollTop:0
    			   })
    		   })  
            })
    		
    		
        </script>
    </body>
    
    </html>
    

    10、王者手风琴

    案例演示:
    在这里插入图片描述
    实现步骤:

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>手风琴案例</title>
    
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            img {
                display: block;
            }
            
            ul {
                list-style: none;
            }
            
            .king {
                width: 852px;
                margin: 100px auto;
                background: url(images/bg.png) no-repeat;
                overflow: hidden;
                padding: 10px;
            }
            
            .king ul {
                overflow: hidden;
            }
            
            .king li {
                position: relative;
                float: left;
                width: 69px;
                height: 69px;
                margin-right: 10px;
            }
            
            .king li.current {
                width: 224px;
            }
            
            .king li.current .big {
                display: block;
            }
            
            .king li.current .small {
                display: none;
            }
            
            .big {
                width: 224px;
                display: none;
            }
            
            .small {
                position: absolute;
                top: 0;
                left: 0;
                width: 69px;
                height: 69px;
                border-radius: 5px;
            }
        </style>
    
    </head>
    
    <body>
        <script type="text/javascript" src="../jquery.js"></script>
        <script type="text/javascript">
            $(function() {
    		$(".king li").mouseover(function(){
    			$(this).stop().animate({
    				width:224
    			}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
    			
    		})
    		$(".king li").mouseout(function(){
    			$(this).stop().animate({
    				width:69
    			}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()
    		})	
    		
            })
        </script>
        <div class="king">
            <ul>
                <li class="current">
                    <a href="#">
                        <img src="images/m1.jpg" alt="" class="small">
                        <img src="images/m.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/l1.jpg" alt="" class="small">
                        <img src="images/l.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/c1.jpg" alt="" class="small">
                        <img src="images/c.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/w1.jpg" alt="" class="small">
                        <img src="images/w.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/z1.jpg" alt="" class="small">
                        <img src="images/z.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/h1.jpg" alt="" class="small">
                        <img src="images/h.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/t1.jpg" alt="" class="small">
                        <img src="images/t.png" alt="" class="big">
                    </a>
                </li>
            </ul>
    
        </div>
    
    
    
    
    </body>
    
    </html>
    

    总结

    li:first li:last li:eq(2) li:odd --奇数 li:even --偶数
    ul li --子代
    ul<li --后代

    hide()
    show()

    siblings()
    $(this).index()
    .click
    .mouseover
    .mouseout

    addClass()
    removeClass()
    css(“background”,“red”)

    slideDown()
    slideUp()
    slideToggle()
    hover()

    animite()
    fadeIn()
    fadeOut()
    fadeTo(“show”,0.5)

    each(function(index,element))
    $.extend(a,b)
    $.extend(true,a,b)
    on({click:function(){}})
    on(“”,“”,function(){})

    append() repend() before() after() remove() after()
    val() text() html()
    offset().top offset().left postion() postion().top
    $(document).scrollTop()
    $(window).scroll()
    $(“body,html”).animate({})

    prop()
    prop(“”,“”) --固有属性
    attr()
    attr(“”,“”)–自定义属性
    checked --固有属性

    展开全文
  • 系统概述 用户可以浏览网站首页,查看图书信息 需要实现购物车功能 用户可以注册、登录 系统角色 网站浏览者、注册用户、购书用户 提交结果 网页文件、样式文件、脚本文件、图片素材
  • Jquery项目案例

    热门讨论 2012-05-12 10:00:15
    Jquery案例,里面有图片的自动切换,留言板,编辑框,都是用Jquery技术开发的,代码清晰,
  • jquery-3.6.0.js

    2021-05-10 13:14:18
    主要是博文——JavaScript综合练习中的那个文件,太长了,放不进去,就放到这里啦
  • jQuery项目案例(一):电影排行榜项目

    千次阅读 2019-08-02 11:37:38
    项目介绍 豆瓣电影/猫眼电影提供最新的电影介绍 及评论包括上映影片的影讯查询及购票服务。你可以记录想看、在看和看过的电影电视剧,顺便打分、写影评。根据你的口味,豆瓣电影会根据用户填写的信息显示电影排行榜...

    项目介绍

    豆瓣电影/猫眼电影提供最新的电影介绍 及评论包括上映影片的影讯查询及购票服务。你可以记录想看、在看和看过的电影电视剧,顺便打分、写影评。根据你的口味,豆瓣电影会根据用户填写的信息显示电影排行榜以供用户参考。 那么我们就开实现一下吧.

    项目效果图

    在这里插入图片描述

    项目核心知识点

    jQuery选择器

    $('li')
    

    jQuery事件类型

      $('li').mouseenter
      $('li').mouseleave
    

    jQuery标签操作

     $(this).addClass
     $(this).removeClass
    
    

    项目源代码

    HTML代码

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <link rel="stylesheet" type="text/css" href="css/movie.css">
        <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
        <script type="text/javascript" src="js/movie.js"></script>
    
    
    </head>
    <body>
    <div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li>
                <span>1</span> 哪吒之魔童降世
                <div class="content ">
                    <img src="img/movie01.jpg">
                    <p>
                        天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸, 灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。 元始天尊启动了天劫咒
                    </p>
                </div>
            </li>
    
            <li>
                <span>2</span>烈火英雄
                <div class="content ">
                    <img src="img/movie01.jpg">
                    <p>
                        滨港市海港码头发生管道爆炸,整个罐区的原油都顺着A01油罐往外流,
                        化成火海和阵阵爆炸,威胁全市、全省,甚至邻国的安全。慌乱的市民们四处奔逃,
                        一辆辆消防车却逆向冲进火海……
                    </p>
                </div>
            </li>
    
            <li>
                <span>3</span> 鼠胆英雄
                <div class="content">
                    <img src="img/movie03.jpg">
                    <p>
                        三十年代的上海滩,胆小如鼠的青龙帮小弟闫大海(岳云鹏 饰)发现自己身患绝症之际,竟阴差阳错当上了警察。
                        为了给梦中女神--飞乐门舞女杜卿(佟丽娅 饰)挣赎身钱,他计划在自己生命中所剩不多的时间里因公殉职,从而拿到
                        抚恤金拯救女神。然而,在他疯狂执行铲除“黑帮”、“毒枭”任务以身赴死期间,
                        却总是事与愿违求死不得死,反而得到屡屡升迁。然而,纸醉金迷的上海滩,还隐藏着更大的危机。
                    </p>
                </div>
            </li>
            <li>
                <span>4</span>
                战狼
                <div class="content">
                    <img src="img/movie04.jpg">
                    <p>
                        在南疆围捕贩毒分子的行动中,特种部队狙击手冷锋(吴京 饰)公然违抗上级的命令,开枪射杀伤害了战友的暴徒武吉(周晓鸥 饰)。
                        这一行动令冷锋遭到军方禁闭甚至强制退伍的处罚,不过各特种部队精英组成超级特种部队战狼中队的中队长龙小云(余男 饰),却十分
                        欣赏这个敢作敢为且业务过硬的血性男儿,于是将其召入自己的麾下。在新近的一次演习中,冷锋凭借冷静的判断力从老首长处拔得一城,
                        并且成功击退了突然出现的狼群。谁知在毫无准备的情况下,战狼遭到了一伙荷枪实弹分子的袭击。原来武吉的哥哥敏登(倪大红 饰)
                        是一个冷酷无情的国际通缉犯, 他手下豢养了一大批身怀绝技的雇佣兵。为了给弟弟报仇,敏登派出雇佣兵千里迢迢奔着冷锋而来……
                    </p>
                </div>
            </li>
    
    
        </ul>
    </div>
    
    
    </body>
    </html>
    

    CSS样式

    • 文件css/movie.css
    * {
        margin: 0;
        padding: 0;
    }
    
    
    .box {
        width: 300px;
        height: 450px;
        border: 1px solid gray;
        margin: 0 auto;
        margin-top: 50px;
    }
    
    .box h1 {
        color: green;
        font-size: 20px;
        line-height: 35px;
        font-weight: bold;
        border: 1px dashed gray;
        padding-left: 10px;
    }
    
    
    .box li {
        list-style: none;
        padding: 10px 15px;
        border: 1px dashed gray;
    
    }
    
    
    .box li span {
        background-color: gray;
        display: inline-block;
        width: 20px;
        height: 20px;
        color: white;
        text-align: center;
    }
    
    
    .box li:nth-child(-n+3) span {
        background-color: green;
        color: white;
    }
    
    .content {
        overflow: hidden;
        margin-top: 5px;
        display: none;
    }
    
    .content img {
        width: 80px;
        height: 120px;
        float: left;
    }
    
    .content p {
        width: 180px;
        height: 120px;
        float: right;
        font-size: 12px;
    
    }
    
    
    .current .content {
        display: block;
    }
    

    JS代码

    • 文件js/movie.js
    
    $(function () {
        $('li').mouseenter(function () {
            $(this).addClass('current');
    
        });
    
        $('li').mouseleave(function () {
            $(this).removeClass('current');
    
        });
    });
    
    展开全文
  • 15个独立的可以运行的jquery案例源代码,都是项目中经常用到的功能实现,如百度搜索下拉代码、表格增加删除行响应代码、表情评价打分代码、分类下拉搜索框代码、三级联动下拉框、砸金蛋抽奖活动代码等等
  • 首先引入JQuery文件库只需将文件导入页面中即可,即在<head></head>中,接下来详细介绍,感兴趣的朋友可以了解下
  • jQuery项目案例二:Tab选项卡切换项目介绍项目效果图项目核心知识点jQuery选择器jQuery事件类型jQuery标签操作项目源代码HTML代码CSS样式JS代码 项目介绍 网页页面中最流行常用的tab切换效果,包括滑动、点击切换等...

    项目介绍

    网页页面中最流行常用的tab切换效果,包括滑动、点击切换等多种效果。

    项目效果图

    在这里插入图片描述

    项目核心知识点

    jQuery选择器

    $(".nav li")
    

    jQuery事件类型

    
     $(".nav li").mouseenter
    

    jQuery标签操作

     /*对当前节点添加指定的类名*/
      $(this).addClass
     /*对当前节点删除指定的类名*/
      $(this).removeClass
      
      /*获取当前节点的兄弟节点, 实现添加类名*/
      $(this).siblings().removeClass
      
      /*获取当前节点的索引值*/
      var idx = $(this).index();
      
      /* 获取类名为content中的li标签, 并选择对应索引的某一个li标签*/
      $(".content>li").eq($idx);
      
    

    项目源代码

    HTML代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/tab.css">
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/tab.js"></script>
    </head>
    <body>
    <div class="box">
        <ul class="nav">
            <li class="current index">主页</li>
            <li>遇见好货</li>
            <li>年中狂欢</li>
            <li>夏日尚新</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="./img/img5.jpg" alt=""></li>
            <li><img src="./img/img1.jpg" alt=""></li>
            <li><img src="./img/img2.jpg" alt=""></li>
            <li><img src="./img/img3.jpg" alt=""></li>
    
        </ul>
    </div>
    </body>
    </html>
    

    CSS样式

    • 文件css/tab.css
    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 448px;
        height: 298px;
        border: 1px solid lightgray;
        margin: 50px auto;
    }
    
    .nav > li {
        list-style: none;
        width: 110px;
        height: 50px;
        background: darkseagreen;
        color: white;
        text-align: center;
        line-height: 50px;
        float: left;
        border: 1px solid white;
    }
    
    .nav > li:hover {
        background-color: green;
    }
    
    .nav > .current {
        background-color: green;
    }
    
    .content > li {
        list-style: none;
        display: none;
    }
    
    .content > .show {
        display: block;
    }
    
    .content > li > img {
        width: 448px;
        height: 248px;
    
    }
    

    JS代码

    • 文件js/tab.js
    $(function () {
        //    当页面加载完成时, 执行的内容;
        // 1. 监听选项卡的移入事件;
        $(".nav li").mouseenter(function () {
            // 2. 修改被移入选项卡的颜色;
            $(this).addClass("current");
            // 3. 还原其他兄弟节点的选项卡颜色
            $(this).siblings().removeClass('current');
    
            // 4. 获取被移入选项卡的索引;
            var $idx = $(this).index();
            //5. 根据索引找到对应的图片
            var $li = $(".content>li").eq($idx);
            // 6. 隐藏非当前的其他图片
            $li.siblings().removeClass("show");
            // 7. 隐藏对应的图片;
            $li.addClass("show");
        });
    
    
    });
    
    
    
    展开全文
  • jQuery经典小案例

    万次阅读 多人点赞 2019-03-29 01:01:47
    下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 ...
  • JQuery综合案例

    2013-09-29 13:25:30
    JQuery综合案例 非常完整齐全的关于jquery的使用 含有示例
  • Jquery项目实操练习

    千次阅读 多人点赞 2018-09-28 17:39:48
    Jquery项目实操练习项目练习网址1、项目一:tab选项卡html语句:css语句:html语句: 项目练习网址 在网络上搜集到的一个好网址:里边有39个实例,适合新手实操练习来掌握Jquery知识点。 ... 1、项目一:tab选项卡 ...
  • jquery50个经典案例

    2012-04-16 17:42:53
    jquery50个经典案例
  • jquery 106个 经典实例

    2016-12-10 11:01:31
    jQuery是一个十分轻巧方便的JS类库,有了这个强大的框架,我们的项目可以简化不少,今天给大家分享106个经典源码,WEB项目中很可能会用上的jQuery实例及源码,希望给大家带来便利。
  • jQuery实现留言板案例

    千次阅读 2022-03-17 23:49:30
    效果图: 源码如下: <!DOCTYPE html> <html lang="en"> <meta ...script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.js"></scri.
  • jQuery学习案例-购物车

    2022-03-08 19:37:38
    购物车案例主要涉及到localStorage存储和jQuery操作
  • 使用jQuery制作产品放大镜效果实现效果: 使用jQuery制作产品放大镜效果实现原理: 通过设置图像的 CSS 属性( left 和 top ),来实现图像的移动。 使用jQuery制作产品放大镜效果实现思路: (1)div+css...
  • 本文实例为大家分享了jQuery购物网页经典案例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>今日团购模块</title> <...
  • jQuery的几个经典案例

    万次阅读 多人点赞 2018-07-08 01:22:49
    案例一:使用jQuery完成下拉列表左右选择&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉列表左右选择&...
  • jquery案例

    2022-01-25 13:23:14
    jquery案例 1:开关灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开光灯</title> <style> </style> </head> <body&...
  • jquery与 ajax 简单例子

    2021-08-06 02:44:27
    jquery与 ajax 简单例子基于JQuery框架的AJAXPS:本人这篇始发于PHPCHINA,发现被很多人转了,但却未注明出处,...正好项目中准备使用thickbox,于是干脆抛弃prototype.js,看起jquery.js了。JQuery确实不错,体积比...
  • 轮播图实现效果: 轮播图实现原理: 通过设置图像的 src 属性,显示不同的图片,借助循环动画实现轮播图效果。 轮播图实现思路: (1... jQuery制作轮播的具体步骤: 第一步:制作网页内容(轮播图列表和轮播数字列表)
  • 项目案例:APP信息管理平台.rar项目案例:APP信息管理平台.rar项目案例:APP信息管理平台.rar
  • jquery练手小案例

    2021-06-21 08:54:14
    jQuery是-个快速、极简的JavaScript框架, 它是-个优秀的JavaScript代码库,设计的宗旨是“writeless,Do More”,即倡导写更少的代码,做更多的...本课程主要是jQuery实战,主要讲解jQuery的API的使用,以及项目实战。
  • jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript...
  • JQuery基础案例大全

    热门讨论 2013-01-02 00:50:06
    JQuery是现在最流行的Ajax框架;本案例是本人亲手总结的教学案例。基本包括的Jquery的各个方面的基础应用。包括:选择器;Dom操作;事件;动画;Ajax操作;是一个非常容易上手的代码案例。送给初学者。--邵老师
  • jquery实例源代码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,233
精华内容 9,293
关键字:

jquery项目案例

友情链接: MB90092_DEMO.rar