精华内容
下载资源
问答
  • 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
    文章目录 1、动态添加和删除数据 2、微博发布 3、移动水果 4、上下拉切换 5、精品演示 6、tab标签切换 7、突出显示 8、下拉菜单 9、页面滚动 10、王者手风琴 总结 1、动态添加和删除数据 案例演示: 实现步骤: val...

    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实例源代码
  • Web前端JQuery入门实战案例

    千次阅读 2019-02-24 20:14:45
    前端jquery入门到实战 为什么要学习Jquery?因为生活。 案例: &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset = "UTF-8"&...

    标题图

    前端jquery入门到实战

    为什么要学习Jquery?因为生活。

    案例:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
     <meta charset = "UTF-8">
     <title>dashu</title>
     <style>
      div {
       height: 100px;
       background-color: yellow;
      }
     </style>
     <script>
      window.function(){
       //js注册事件会被覆盖
       //addEventListener
      }
     </script>
    </head>
    <body>
    <input type="button" value="展示" id="btn1">
    <input type="button" value="设置内容" id="btn2">
    
    <div></div>
    <div></div>
    
    <script>
     var btn1 = document.getElementById("btn1");
     var btn2 = document.getElementById("btn2");
     var divs = document.getElementsByName("div");
    
     btn1.onclick = function() {
      for(var i=0; i<divs.length;i++){
       divs[i].style.display = "block";
      }
     };
    
     btn2.onclick = function(){
      for(var i=0; i<divs.length;i++){
       divs[i].innerText = "输入文本内容";
      }
     }
    </script>
    </body>
    </html>
    

    使用jquery案例:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
     <meta charset = "UTF-8">
     <title>dashu</title>
     <style>
      div {
       height: 100px;
       background-color: yellow;
       display: none;
      }
     </style>
     <script src="jquery-xxx.js"></script>
     <script>
      // 入口,文档准备好了才执行
      $(document).ready(function(){
       console.log("dashu");
       // 要等文档加载完才执行
       // 注册事件 click()
       // 重复注册事件不会覆盖
       $("#btn1").click(function(){
          // alert("dashu");
         $("div").show();
         // $("div").show(300);
         // $("div").slideDown(300);
         // $("div").fadeIn(300);
        });
    
       $("#btn2").click(function(){
        $("div").text("我是内容");
       });
       
      });
     </script>
     
    </head>
    <body>
    <input type="button" value="展示" id="btn1">
    <input type="button" value="设置内容" id="btn2">
    
    <div></div>
    <div></div>
    
    </body>
    </html>
    

    jquery

    快速的,轻量级的,功能丰富的 js 库。动画(animation),ajaxDOM,更简单,容易使用的api

    jquery api 文档

    开发环境,测试环境,生产环境

    git svn

    $(function(){
     // 写jquery入口函数的第二种方法
    });
    

    jq对象和Dom对象

    <ul>
     <li></li>
     <li></li>
    </ul>
    
     <script src="xxx.js"></script>
    <script>
    // 什么是DOM对象
    $(function(){
      // js对象,使用js方式获取到的元素就是js对象,Dom对象
     // var clo = document.getElementById("clo");
     // clo.style.backgroundColor = "yellow";
    
      // var $li = $("li");
      // $li.text("我是达叔");
      // console.log("dashu");
      // jq对象与js对象
    
     });
    <script>
    

    jq对象其实就是js对象的一个集合,伪数组,里面放着大量的js对象。

    var arr = [
     {name:"dashu", say: function(){
      console.log("dashu");
     }}
    ];
    arr[0].say();
    
    // arr.say();错误
    
    // jquery 伪数组
    var $li = $("li");
    $li[0].setAttribute("name","dashu");
    // 创建数组索引为0设置属性
    
    // dom对象变jq对象
    var clo = document.getElementById("clo");
    $(cloth).text("达叔");
    
    // jq对象变dom对象
    var $li = $("li");
    $li[0].style.backgroundColor = "yellow";
    // $li.get(0).style.backgroundColor="yellow";
    

    隔行变色

    <ul>
     <li>dashu</li>
    </ul>
    
    // shift + 回车
    <script>
     $(function(){
      // var lis=$("li");
      var lis = document.getElementsByTagName("li");
     for(var i=0; i<lis.length; i++){
     if(i%2==0){
     lis[i].style.backgroundColor = "yellow";
     }
     }else{
     lis[i].style.backgroundColor = "red";
     }
     })
    
    </script>
    
    $ 其实就是一个函数 function
    
    typeof $
    
    $();
    

    参数不同,功能不同

    $(function(){
    
    });
    // 入口函数
    
    $(domobj);
    
    $(document).read(function(){
    
    });
    
    $("div") $("#btn") $(".class")
    

    基本选择器

    jquery选择器是jquery提供的一组方法,用来方便我们找页面中的元素,jquery选择器返回的是jquery对象。

    :first 获取第一个元素
    示例: 获取匹配的第一个元素
    
    <ul>
     <li>1</li>
     <li>2</li>
    </ul>
    
    $('li:first');
    

    基本选择器:

    <ul>
     <li>1<li>
     <li>2<li>
     <li id="sb">3</li>
    </ul>
    
    $(function(){
      // 样式
     $("#sb").css("backgroundColor", "yellow");
     // $("#sb").css("backgroundColor", "green");
    });
    
    // 交集,并集
    $("#id, .green").css("color","red");
    
    $("li.green").css();
    
    jquery的样式
    css(name, value)
    name: 样式名 value: 样式值
    
    基本选择器
    
    id选择器
    类选择器
    标签选择器
    并集选择器 $("#id, .green").css("color","red");
    交集选择器 $("li.green").css();
    

    层级选择器

    子代选择器 $("ul>li");
    后代选择器 $("ul li");
    
    <div id="father">
     <div>1</div>
     <div> 2 
      <p>1</p>
     </div>
     <p>3</p>
    </div>
    
    // 获取3 子代元素
    <script>
     $(function(){
      $("#father>p").css("backgroundColor", "red");
      });
     });
    
    // 后代都有 123
      $(function(){
      $("#father p").css("backgroundColor", "red");
      });
     });
    </script>
    

    mouseentermouseover

    <script>
     $(function(){
      var $li=$(".w>ul>li");
     
      $li.mouseover(function(){
       $(this).children("ul").show();
      });
     
      $li.mouseout(function(){
        $(this).children("ul").hide();
       });
     });
    </script>
    

    下拉菜单

    <div class="wrap">
     <ul>
      <li>
       <a href="javascript:void(0);">一级菜单</a>
       <ul class="ul">
        <li><a href="javascript:void(0);">二级菜单</a></li>
        <li><a href="javascript:void(0);">二级菜单</a></li>
       </ul>
      </li>
     </ul>
    </div>
    
    $(function(){
     $(".wrap>ul>li").mouseover(function(){
       // console.log("哈哈");
      });
    });
    

    高亮

    <div class="wrap">
     <ul>
      <li><a href="#"><img src="" alt=""/></a></li>
      <li><a href="#"><img src="" alt=""/></a></li>
     </ul>
    </div>
    
    $(".wrap>ul>li").mouseenter(function(){
     $(this).css("opacity","1").siblings().css("opacity","0.5");
    });
    

    选择器:

    children(selector); 子代
    find(selector); 后代
    siblings(selector);  查找兄弟不包括自己
    parent(); 查找父亲
    

    手风琴

    $(function(){
     $(".groupTitle").click(function(){
       $(this).next().show();
      });
    });
    
    <span class="groupTitle">标题</span>
    <div>标题</div>
    
    $(this).next().slideDown(1000).parent().siblings().children("div").slideUp(1000);
    
    <script>
     $(function(){
      $("#left>li").mouseenter(function(){
       var idx=$(this).index();
       $("#center>li:eq("+idx+")").show().siblings().hide();
      });
     });
    </script>
    

    基本,层次,过滤,表单选择器

    jquery操作样式

    css(name, value);
    $("#day").css("background","gray");
    $("#day").css({
     backgroundColor:"pink",
     color:"red"
    });
    

    轮播图

    .slider{
     height: 300px;
     width: 700px;
     margin: 100px auto;
     position: relative;
    }
    
    .slider li {
     position: absolute;
     display: none;
    }
    
    .slider li:first-child {
     display: block;
    }
    
    <div class="arrow">
     <span class="arrow-left"> < </span>
     <span class="arrow-right"> > </span>
    </div>
    
    <script>
     $(function(){
      var count = 0; 
      $(".arrow-right").click(function(){
       count++;
       if(count == $(".slider li").length){
        count = 0;
        }
       $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
      });
       
      $(".arrow-left").click(function(){
       count--;
       if(count == -1){
        count = $(".slider li").length-1;
       }
        $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
       });
     });
    </script>
    

    动画效果

    show()显示,hide()隐藏

    slideDown()滑入,slideUp()滑出,slideToggle()切换

    fadeIn()淡入和fadeOut()淡出和fadeToggle切换

    <style>
     div {
      width: 200px;
      height: 200px;
      background-color: red;
     }
    </style>
    
    <body>
    <input type="button" value="开始">
    <input type="button" value="结束">
    <div></div>
    <script>
     $(function(){
      $("input").eq(0).click(function(){
       $("div").animate({left:200});
    
       $("#div1").animate({left:200}, 4000, "swing");
       $("#div2").animate({left:200}, 4000, "linear");
      })
     })
    </script>
    
    </body>
    

    swing是秋千的效果速度,到最上慢,下来就变快了,而linear是线性匀速的效果动画。

    手风琴效果

    <div id="box">
     <ul>
      <li></li>
      <li></li>
     </ul>
    </div>
    
    <script>
     $(function(){
      //$("#box li").css("backgroundImage", "url(images/1.jpg)");
      var $li = $("#box li");
      for(var i=0; i < $li.length; i++){
       $li.eq(i).css("backgroundImage", "url(images/" + (i+1) + ".jpg)");
      }
     
       $li.mouseenter(function(){
         $(this).animate({width: 400}).siblings().animate({width: 100});
       }).mouseleave(function(){
        $li.animate({width:200});
       });
     });
    </script>
    
    <script>
     $(function(){
      $("#btn").click(function(){
       $("div").animate({left: 400}).animate({top: 400}).animate({width: 400}).animate({ left: 0});
      })
     });
    </script>
    
    var $li = $("ul>li");
    $li.mouseenter(function(){
     $(this).children("ul").stop().slideDown();
    });
    $li.mouseleave(function(){
     $(this).children("ul").stop().slideUp();
    });
    

    音乐导航条

    <div class="nav">
     <ul>
     <li>
      <a href="javascript:void(0);">导航条</a>
      <span style="top: 60px;"></span>
     </li>
     </ul>
    </div>
    
    <script>
     $(function(){
      $(".nav li").mouseenter(function(){
       $(this).children("span").animate({top:0});
       var id = $(this).index();
       $("audio").get(id).load();
       $("audio").get(id).paly();
      }).mouseleave(function(){
       $(this).childern("span").stop().animate({top:60});
       });
     });
    </script>
    
    <div class="nav">
     <ul>
      <li>
       <a href="javascript:void(0);">导航1</a>
       <span></span>
      </li>
      <li><a href="javascript:void(0);">导航2</a><span></span></li>
     </ul>
     
     <div>
      <audio src=""></audio>
      <audio src=""></audio>
     </div> 
    </div>
    

    创建节点,与添加

    append appendTo
    prepend prependTo
    before 作为兄弟元素前
    after 作为兄弟元素后
    
    <script>
     $(function(){
      var box = document.getElementById("box");
      var a = document.createElement("a");
      box.appendChild(a);
      a.setAttribute("href","#");
     });
    </script>
    
    <script>
     $(function(){
      $("#box").append();
     });
    </script>
    

    城市选择

    $(function(){
     $("#btn1").click(function(){
      $("#city > option").appendTo("#citys");
     });
    
     $("#btn2").click(function(){
       $("#citys").append($("#city>option"));
     });
    
     $("#btn3").click(function(){
       $("#citys:selected").appendTo("#city");
      });
    
    });
    

    清空和删除节点

    <script>
     $(function(){
      //$("div").html("");
      $("div").empty(); // 清空内容
      // $("div").remove(); 移除,自己也没了
     });
    </script>
    

    内存泄漏的是一块内存被占用,别人用不了。

    发布内容

    </div class="box" id="fabu">
     <span>发布</span>
     <textarea name="" id="txt" cols="30" rows="20"> </textarea>
     <buttoon id="btn">发布</button>
     <ul id="ul">
     
     </ul>
    </div>
    
    <script>
     $(function(){
      $("#btn").click(function(){
        $("<li></li>").text($("#txt").val()).prependTo("#ul");
        
    
      });
     }); 
    </script>
    

    弹幕

    <script>
     $(function(){
      var colors = ["red","green"];
      $("#btn").click(function(){
       var randomColor = parseInt(Math.random() * colors.length);
       var randomY = paseInt(Math.random() * 400);
       $("<span></span").text($("#text").val()).css("color",colors[randomColor]).css("left","2000px").css
      }).css("top",randomY).animate({left: -500}, 3000, "linear", function(){
        $(this).remove();
      }).appendTo("#box");
     });
    </script>
    

    操作节点:

    创建节点:

    $("<span></span>")
    

    添加节点:

    append appendTo 
    prepend prependTo 
    after before
    

    清空内容:

    empty();
    

    删除节点:

    remove();
    

    克隆节点:

    clone();
    

    动画效果

    show() hide()
    slideDown() slideUp() slideToggle()
    fadeIn() fadeOut() fadeToggle()
    stop()
    animate()
    

    class操作:

    addClass(name)添加类
    removeClass(name)移除类
    hasClass(name)判断类
    toggleClass(name)切换
    
    css(name,value)设置单个样式
    css(obj)设置多个样式
    css(name)获取样式
    

    val()方法

    val方法用于获取和设置表单元素的值

    //设置值
    $("#name").val("dashucoding");
    //获取值
    $("#name").val();
    
    // html == innerHTML获取内容和标签
    // text == innerText获取内容
    //设置内容
    $("div").html("<span>内容</span>");
    //获取内容
    $("div").html()
    //设置内容
    $("div").text("<span>内容</span>");
    //获取内容
    $("div").text();
    
    // 获取页面可视化的宽度和高度
    $(window).width();
    $(window).height();
    
    $(window).resize(function(){
     console.log($(window).width());
    });
    
    console.log($("div").width()); // width
    console.log($("div").innerWidth()); // padding +width
    console.log($("div").outerWidth()); // padding+width+border
    console.log($("div").outerWidth(true)); // padding + width + border + margin
    

    scrollTopscrollLeft的方法

    设置或者获取垂直滚动条的位置

    // 获取页面被卷曲的高度
    $(window).scrollTop();
    // 获取页面被卷曲的宽度
    $(windwo).scrollLeft();
    
    $(window).scroll(function(){
     console.log($(window).scrollTop());
     console.log($(window).scrollLeft());
    });
    

    固定导航

    <script>
     $(function(){
      $(window).scroll(function(){
       if($(windwo).scrollTop() >= $(".top").height() ){
       $(".nav").addClass("fixed");
       $(".main").css("marginTop", $(".nav").height() );
       }
      });
     });
    </script>
    

    小火箭返回顶部

    <style>
     .up a:hover{
      width: 150px;
      height: 190px;
      background: url(images/up.gif) no-repeat;
      outline: none;
     }
    </style>
    
    <div class="up"><a href="javascript:void(0);" title="Top"></a></div>
    
    <script>
     $(function(){
      $(window).scroll(function(){
       if($(window).scrollTop() >= 1000){
        $(".up").fadeIn(1000);
       }else{
        $(".up").fadeOut(1000);
       }
      });
     });
    
     function getScroll(){
      return {
       left: window.getXOffset || document.documentElement.scrollLeft || document.body.scollLeft || 0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      }
     }
    
    
    </script>
    
    offset()方法获取元素的相对于document的位置,position()方法获取相对于定义的父元素的位置。
    

    简单的事件绑定,bind事件绑定,delegate事件绑定,on事件绑定

    click(handler)
    mouseenter(handler)
    mouseleave(handler)
    
    $("#btn").click();
    $("#btn").trigger("click");
    

    delegate委托事件

    $("div").delegate("p", "click", function(){
     
    });
    
    $("p").on("click",function(){
     alert("呵呵");
    });
    
    $("#btn").on("click",function(){
     $("<p>我是</p>").appendTo("div");
    });
    
    $(selector).on("click",function(){});
    
    $(selector).on("click","span", function(){});
    
    $(selector).on(events[,selector][,data],handler);
    

    事件解绑

    $(selector).unbind(); //解绑所有的事件
    $(selector).unbind("click"); // 解绑指定的事件
    
    $(selector).undelegate(); // 解绑所有的delegate事件
    $(selector).undelegate("click"); //解绑所有的click事件
    
    on // off
    $("p").on("click", function(){
     alert("dashu");
    });
    
    //$("p").off();
    $("p").off("mouseenter");
    
    // toggle:切换 trigger:触发
    

    jquery事件对象

    $(document).on("click",function(e){
    
    })
    
    on(types, selector, data, callback)
    

    钢琴例子

    <script>
     $(function(){
       $(".nav li").mouseenter(function(){
        $(this).children("span").stop().animate({top:0});
     var idx=$(this).index();
     $(".nav audio").get(idx).load();
     $(".nav audio").get(idx).play();
       }).mouseleave(function(){
        $(this).children("span").stop().animate({top: 60 });
       });
      });
    </script>
    
    $(document).on("keydown", function(e){
     // console.log(e.keyCode);
    });
    

    节流阀,按下的时候,触发,如果没弹起,不让触发。

    delay(duration,[queueName]);
    设置一个延时效果
    duration, [queueName]
    duration:延时时间
    queueName:队列名词
    

    延时

    <style>
     div{
      width: 400px;
      height: 60px;
      background-color: red;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      margin: 100px auto;
      display: none;
     }
    </style>
    
    <script>
     $(function(){
      $("div").fadeIn(1000).delay(2000).fadeOut(1000);
     });
    </script>
    

    五角星

    * {
     padding: 0;
     margin: 0;
    }
    
    .comment li {
     float: left;
    }
    
    .comment{
     font-size: 30px;
     color: #ff22cf;
    }
    
    <ul class="comment">
     <li>☆<li>
    </ul>
    
    var k = "☆";
    var s = "★";
    $(".comment>li").on("mouseenter",function(){
     $(this).text(s).preAll().text(s);
     $(this).nextAll().text(k);
    });
    
    $(".comment").on("mouseleave",function(){
     $(this).children().text(k);
     $("li.current").text(s).prevAll().text(s);
    
    });
    
    $(".comment>li").on("click", function(){
     $(this).addClass("current").siblings().removeClass("current");
    });
    
    $(this).text(s).preAll().text(s).end().nextAll().text(k);
    

    each方法

    $(selector).each(function(index,element){});
    

    $控制权:

    $.noConflict();
    
    jQuery(function(){
    
    });
    
    只有jquery拿到控制权,才能释放
    
    val()
    text() 和 html()
    width height
    scrollTop scrollLeft
    offset position
    
    on("click", function(){})
    on("click", "p", function(){})
    
    off() off("click")
    click() trigger("click");
    
    e.stopPropagation()
    e.preventDefault()
    $.noConflict();
    

    插件

    插件支持颜色 jquery.color.js
    animate不支持颜色
    
    懒加载
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>
    
    <img class="lazy" data-original="img/example.jpg" width="640" height="400">
    
    $("img.lazy").lazyload();
    

    自定义插件

    Array.prototype.say = function() {
     console.log("dashu");
    }
    var arr = new Array();
    arr.say();
    
    jQuery.prototype.say = function(){
     console.log("dashu");
    }
    $(document).say();
    
    $.fn == jQuery.prototype
    $.fn.say = function(){
     console.log("dashu");
    }
    $(document).say();
    
    // 链式编程
    $.fn.say = function(){
     console.log("dashu");
     return this;
    }
    

    结言

    好了,欢迎在留言区留言,与大家分享你的经验和心得。

    感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

    达叔小生:往后余生,唯独有你
    You and me, we are family !
    90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
    简书博客: 达叔小生
    https://www.jianshu.com/u/c785ece603d1

    结语

    • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
    展开全文
  • 前端项目实战

    2018-02-10 14:21:10
    前端项目实战.zip,第八章节例子,images,theme.gif,star-matrix.gif,right.gif,img_3.jpg,zoom.gif,zoomlens.gif,left.gif,btn_cart.png,treeview-collapsed.gif,img_1.jpg,img_2.jpg,treeview-item.gif,loading...
  • jQuery案例实战&BootStrap 内容介绍 1. BootStrap概述; (了解) 2. BootStrap使用; (掌握) 3. jQuery案例实战; (掌握) 1.BootStrap概述 1.1.BootStrap是什么? 1....

    内容介绍

    1. BootStrap概述; (了解)
    2. BootStrap使用; (掌握)
    3. jQuery案例实战; (掌握)

    1.BootStrap概述

    1.1.BootStrap是什么?

    • 1.Bootstrap是最受欢迎的 HTML、CSS 和 JS 前端框架,用于开发响应式布局、移动设备优先的 WEB 项目;
    • 2.Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目;
    • 3.《响应式 Web 设计》一书中提到,响应式设计应该以移动优先,在设计之初就应该以移动端网站为设计目标,然后再考虑如何在桌面端布局;
      注意事项:
    • 1.像百度、淘宝之类的大公司网页不使用响应式,而是独立开发一套手机页面;
    • 2.一般网站的交互很少,仅仅用于信息展示和获取以及点个赞什么的。需要写的兼容性代码很少,非常适合做成响应式;

    1.2.BootStrap有什么用?

    1. 让web开发更迅速、简单;
    2. 可以响应式布局;

    1.3.Bootstrap 包含的内容

    1. CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 BootstrapCSS部分详细讲解;
    2. 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解;
    3. JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap插件部分详细讲解;

    2.BootStrap使用

    1. 学习bootstrap就是学习class属性值(类选择器)中有哪些样式和效果;
    2. 如何将相应的class属性值,添加到相应的元素上;

    2.1.BootStrap起步

    2.1.1.下载

    在这里插入图片描述

    2.1.2.引入文件

    在这里插入图片描述
    在这里插入图片描述

    2.2.布局容器

    1.Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意由于 padding 等属性的原因,这两种容器类不能互相嵌套;
    第一种:.container类用于固定宽度并支持响应式布局的容器:
    <div class="container">
    </div>
    第二种:.container-fluid类用于 100% 宽度,占据全部视口(viewport)的容器;
    <div class="container-fluid">
    </div>

    2.3.栅格系统

    1.Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列;

    2.3.1.什么是网格(Grid)?

    1.摘自维基百科:在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法;
    2.简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载;

    2.3.2.什么是Bootstrap网格系统(Grid System)?

    1.Bootstrap 官方文档中有关网格系统的描述:Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类;
    2.让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格:
    在这里插入图片描述

    2.3.3.Bootstrap网格系统的工作原理

    网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
    1.行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding);
    2.使用行来创建列的水平组;
    3.内容应该放置在列内,且唯有列可以是行的直接子元素;
    4.预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局;
    5.列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移;
    6.网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4;
    注:
    xm=x-small(extra small特小号) – 手机屏幕
    sm(small小号) – 平板,pad
    md(medium中号) – 笔记本,小屏幕台式
    lg(large大号) – 超大号屏幕
    在这里插入图片描述

    2.3.4.网格的基本结构
    <div class="container">
       <div class="row">
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>      
       </div>
       <div class="row">...</div>
    </div>
    
    2.3.5.代码示例
    <div class="container">
    	<div class="row">
    		<div class="col-md-3">111</div>
    		<div class="col-md-3">111</div>
    		<div class="col-md-3">111</div>
    		<div class="col-md-3">111</div>
    	</div>	
    	<div class="row">	
    		<div class="col-md-8">
                <div class="row">
    				<div class="col-md-3">222</div>
    				<div class="col-md-3">222</div>
    				<div class="col-md-3">222</div>
    				<div class="col-md-3">222</div>
            	 </div>
    		 </div>
             <div class="col-md-4">
                 <div class="row">
             		<div class="col-md-2">111</div>
    				<div class="col-md-1">111</div>
    				<div class="col-md-1">111</div>
                 </div>
             </div>
    	</div>
    </div>
    

    注1:栅格嵌套之后还是分为12格格子

    <div class="container">
    	<div class="row">
    		<div class="col-md-3 col-sm-6 col-xs-12">
    			<h1>关于我们</h1>
    			<p>关于我们关于我们关于我们关于我们关于我们</p>
    		</div>
    		<div class="col-md-3 col-sm-6 col-xs-12">
    			<h1>友情链接</h1>
    			<p>关于我们关于我们关于我们关于我们关于我们</p>
    		</div>
    		<div class="col-md-3 col-sm-6 col-xs-12">
    			<h1>社会动态</h1>
    			<p>关于我们关于我们关于我们关于我们关于我们</p>
    		</div>
    		<div class="col-md-3 col-sm-6 hidden-xs">
    			<h1>人间冷暖</h1>
    			<p>关于我们关于我们关于我们关于我们关于我们</p>
    		</div>
    	</div>
    </div>
    

    注2:列偏移样式

    <div class="container">
    	<div class="row">
    		<div class="col-md-4 col-md-offset-8" style="border: 1px solid salmon;">
    			<a href="#">新闻</a>
    			<a href="#">地图</a>
    			<a href="#">视频</a>
    			<a href="#">贴吧</a>
    			<a href="#">学术</a>
    			<a href="#">儒雅的西线阳光</a>
    		</div>
    	</div>
    </div>
    

    2.4.常用组件

    1.组件(Component)是对数据和方法的简单封装;
    2.Boostrap为开发者提供了很多组件,其中常用的有:表格、表单、弹框、按钮、轮播图、模态框等;
    3.接下来我们在综合练习中去学习这些组件;

    3.jQuery案例实战

    1.使用jQuery的ajax和Bootstrap基于后台ssm框架做一个CRUD操作;

    3.1.数据展示

    使用到的组件有表格、按钮、图标;

    3.1.1.表格

    Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:
    在这里插入图片描述

    3.1.1.1.表格样式

    在这里插入图片描述
    在这里插入图片描述

    3.1.1.2.tr/th/td样式

    在这里插入图片描述
    在这里插入图片描述

    3.1.2.按钮

    1.可作为按钮使用的标签或元素:<a><button><input>

    3.1.2.1.样式

    在这里插入图片描述

    3.1.2.2.尺寸

    在这里插入图片描述

    3.1.3.图标
    1. Bootstrap为开发者提供了Glyphicons 字体图标,大概有250多个;
    2. Glyphicons图标一般是收费的,但是他们的作者允许 Bootstrap 免费使用;
    3. 图标【官网 - 组件首页】的使用:
      (1)使用span元素,不要和其他组件混合使用;
      (2)将图标名称复制到span元素的class属性中即可,例如:
    <button class="btn><span class="glyphicon glyphicon-plus"></span>新增</button>
    
    3.1.4.功能实现

    在这里插入图片描述

    <table class="table table-hover" id="emps_table">
    	 <thead>
    	     <tr>
    	        <th>编号</th>
    	        <th>姓名</th>
    	        <th>性别</th>
    	        <th>地址</th>
    	        <th>电话</th>
    	        <th>银行卡号</th>
    	        <th>操作 &emsp;&emsp;
    	              <button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
    	              <span class="glyphicon glyphicon-plus"></span>新增</button>
    	        </th>
    	     </tr>
    	 </thead>
    	 <tbody>
    	 </tbody>
    </table>
    

    Js代码:

    $(function () {
        //显示数据
        list();
        //显示员工信息
        function list() {
            $.ajax({
                url: "emp/list",
                type: "GET",
                success: function (result) {
                    //1.解析并显示员工数据
                    build_emps_table(result);
                },
                dataType:"json"
            })
        }
      
        //解析并显示员工数据表
        function build_emps_table(result) {
            //清空table表格
            $("#emps_table tbody").empty();
            //遍历元素result
            $.each(result, function (index, item) {
                var eid = $("<td></td>").append(item.eid);
                var ename = $("<td></td>").append(item.ename);
                var sex = $("<td></td>").append(item.sex);
                var address = $("<td></td>").append(item.address);
                var tel = $("<td></td>").append(item.tel);
                var card = $("<td></td>").append(item.card);
    
                var button1 = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("编辑");
                var button2 = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append($("<span></span>").addClass("glyphicon glyphicon-trash").append("删除");
                var td_btn = $("<td></td>").append(button1).append(" ").append(button2);
                       $("<tr></tr>").append(eid).append(ename).append(sex).append(address).append(tel).append(card)
                    .append(td_btn ).appendTo("#emps_table tbody");
            });
    	}
     });
    

    3.2.数据删除

    使用到的JavaScript中window对象的确认框和jQuery的事件委托;

    3.2.1.事件冒泡

    1.当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window,需要注意的是这里仅仅是传递了事件,如果没有捕捉即绑定事件函数,也不会有什么表现;

    <h2>事件冒泡</h2>
    <input type="button" value="点我出惊喜" />
    <script type="text/javascript" src="./jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
    	$(function() {
    		$('input').click(function(){
    			alert('惊喜来自input');
    		});
    		$('body').click(function(){
    			alert('惊喜来自body');
    		});
    		$(document).click(function(){
    			alert('惊喜来自document');
    		});
    	});
    </script>
    
    3.2.2.事件委托

    1.事件委托也叫事件代理,它就是利用事件冒泡的方式,将父元素中绑定的事件委托给子元素处理的一种机制,从而实现事件动态绑定;
    2.原始的事件绑定,在功能有一个局限。就是绑定事件的元素,必须绑定在静态的,已经存在的元素上。对于以后出现的元素是不起作用,事件委托就可以处理这种情况;

    <input type="button" value="添加p元素" />
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <script type="text/javascript" src="./jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
    	$(function() {
    		$('input').click(function() {
    			$('body').append('<p>新添加的p元素</p>');
    		});
    
    		/* $('p').on('click', function() {
    			$(this).remove();
    		}); */
    
    		//与上面效果一样(如果不传选择器,就是普通的事件绑定,传了就是事件委托)
    		$('body').on('click', 'p', function() {
    			$(this).remove();
    		}); 
    	});
    </script>
    
    3.2.3.功能实现

    在这里插入图片描述
    解释:点击删除才会真正删除数据,点击取消不删除数据
    Js代码:

    $(function () {
    	//显示数据
        list();
        //删除员工
        deleteEmp();
    	function deleteEmp() {
            $(document).on("click",".delete_btn",function () {//事件委托
                //1.弹出确认删除对话框
                var ename=$(this).parents("tr").find("td:eq(1)").text();
                var eid=$(this).parents("tr").find("td:eq(0)").text();
                if(confirm("确认删除【"+ename+"】吗?")){
                    //确认,发送ajax请求删除
                    $.ajax({
                        url:"emp/delete",
                        type: "get",
                        data: "eid="+eid,
                        success:function (result) {
                        	if (result.indexOf("ok")!=-1) {
                                list();
                            }else{
                            	alert("删除失败!")
                            }
                        }
                    });
                }
            })
        }
    });
    

    3.3.数据添加

    使用到的组件有模态框、表单;

    3.3.1.模态框和表单
    <!-- 添加员工弹出的模态框 -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="empAddModalLabel">添加员工</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" name="ename" class="form-control" id="ename_add_input" 
                                	placeholder="请输入员工名..." required="required">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="sex" id="sex1_add_input" value="" checked="checked"></label>
                                <label class="radio-inline">
                                    <input type="radio" name="sex" id="sex2_add_input" value=""></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-10">
                                <input type="text" name="address" class="form-control" id="address_add_input"
                                   	placeholder="请输入地址..." >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-10">
                                <input type="text" name="tel" class="form-control" id="tel_add_input" 
                                	placeholder="请输入电话..." required="required">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">银行卡号</label>
                            <div class="col-sm-10">
                                <input type="text" name="card" class="form-control" id="card_add_input"
                                	 placeholder="请输入银行卡号..." required="required">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    3.3.2.功能实现

    1.先查找模态框的代码;
    2.然后再找表单的代码;
    3.再编写js实现功能;
    在这里插入图片描述
    Js代码:

    $(function () {
    	//显示数据
        list();
        //删除员工
    	deleteEmp();
    	//添加员工
    	addEmp();
    	function addEmp() {
            //为新增按钮添加modal
            $("#emp_add_modal_btn").click(function () {
                //清除表单数据
                $("#empAddModal form")[0].reset();//DOM对象才有reset()
                //调用模态框
                $("#empAddModal").modal({
                    backdrop: "static"
                })
            });
            //保存员工信息
            $("#emp_save_btn").click(function () {
                //2.发送ajax请求保存员工
                $.ajax({
                    url: "emp/save",
                    type: "POST",
                    data: $("#empAddModal form").serialize(),//将表单数据传递到后台
                    success: function (result) {
                        if (result.indexOf("ok")!=-1) {
                            //1.关闭modal框
                            $("#empAddModal").modal('hide');
                            list();
                        } else{
                        	alert("添加失败!")
                        }
                    }
                });
            });
    	 }
    });
    

    3.4.数据修改

    使用到的组件有模态框、表单;

    3.4.1.模态框和表单
    <!--修改员工弹出的模态框 -->
    <div class="modal fade" id="empEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                   <h4 class="modal-title" id="userReviseModalLabel">修改员工</h4>
               </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    	<div class="form-group">
                            <label class="col-sm-2 control-label">编号</label>
                            <div class="col-sm-10">
                                <input type="text" name="eid" class="form-control" id="eid_edit_input" readonly="readonly">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" name="ename" class="form-control" id="ename_edit_input" required="required" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="sex" id="sex1_edit_input" value=""></label>
                                <label class="radio-inline">
                                    <input type="radio" name="sex" id="sex2_edit_input" value=""></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-10">
                                <input type="text" name="address" class="form-control" id="address_edit_input" >
                            </div>
                        </div> 
                        <div class="form-group">
                            <label class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-10">
                                <input type="text" name="tel" class="form-control" id="tel_edit_input" required="required" >
                            </div>
                        </div> 
                        <div class="form-group">
                            <label class="col-sm-2 control-label">银行卡号</label>
                            <div class="col-sm-10">
                                <input type="text" name="card" class="form-control" id="card_edit_input" required="required" >
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_edit_btn">修改</button>
                </div>
            </div>
        </div>
    </div>
    
    3.4.2.功能实现

    在这里插入图片描述
    Js代码:

    $(function () {
    	//显示数据
        list();
        //删除员工
    	deleteEmp();
    	//添加员工
    	addEmp();
    	//修改员工
    	editEmp();
    	function editEmp() {
            //为编辑按钮绑定弹出modal框事件
            $(document).on("click",".edit_btn",function () {//事件委托
                //清除表单数据
                $("#empEditModal form")[0].reset();
    
               //修改框中员工信息回显:从表格中获取到每一个数据
               var eid= $(this).parents("tr").find("td:eq(0)").text();
               var ename=$(this).parents("tr").find("td:eq(1)").text();
               var sex=$(this).parents("tr").find("td:eq(2)").text();
               var address=$(this).parents("tr").find("td:eq(3)").text();
               var tel=$(this).parents("tr").find("td:eq(4)").text();
               var card=$(this).parents("tr").find("td:eq(5)").text();
               //将获取到的数据添加到模态框中
               $("#eid_edit_input").val(eid);
               $("#ename_edit_input").val(ename);
               $("#sex1_edit_input,#sex2_edit_input").val([sex]);//单选框默认值处理
               $("#address_edit_input").val(address);
               $("#tel_edit_input").val(tel);
               $("#card_edit_input").val(card);
                
               $("#empEditModal").modal({
                   backdrop: "static"
               })
            });
            //2.为模态框中的修改按钮绑定事件,更新员工信息
            $("#emp_edit_btn").click(function () {
                $.ajax({
                    url:"emp/edit",
                    type:"POST",
                    data:$("#empEditModal form").serialize(),
                    success:function (result) {
                    	if (result.indexOf("ok")!=-1) {
                            //1.关闭modal框
                            $("#empEditModal").modal('hide');
                            list();
                        } else{
                        	alert("修改失败!")
                        }
                    }
                });
            });
    	 }
    });
    

    注意:如果后台返回的是对象和集合,可以使用json接收,但是如果是字符串,就使用默认的文本接收;

    3.5.后台代码

    Controller:

    	@ResponseBody
    	@RequestMapping("/list")
    	public List<Emp> list(){
    		return servcie.list();
    	}
    	
    	@ResponseBody
    	@RequestMapping("/save")
    	public String save(Emp emp){
    		return servcie.save(emp);
    	}
    	
    	@ResponseBody
    	@RequestMapping("/delete")
    	public String delete(Integer eid){
    		return servcie.delete(eid);
    	}
    	
    	@ResponseBody
    	@RequestMapping("/edit")
    	public String edit(Emp emp){
    		System.out.println(emp);
    		return servcie.edit(emp);
    	}
    

    Mapper映射文件:

    <select id="list" resultType="emp">
    	select * from emp
    </select>
    	
    <insert id="save" parameterType="emp">
    	insert into emp values(null,#{ename},#{sex},#{address},#{tel},#{card})
    </insert>
    	
    <delete id="delete" parameterType="int">
    	delete from emp where eid = #{eid}
    </delete>
    	
    <update id="edit" parameterType="emp">
    	update emp set ename=#{ename},sex=#{sex},address=#{address},tel=#{tel}
    	,card=#{card} where eid=#{eid}
    </update>
    

    4.课程总结

    4.1.重点

    1.jQuery案例实战;
    2.BootStrap使用;

    4.2.难点

    1.jQuery案例实战;
    2.BootStrap使用;

    4.3.如何掌握

    1.查看API文档;
    2.独立完成课堂和课后练习;

    4.4.排错技巧

    1.alert,debug调式;
    2.浏览器控制台;

    5.常见问题

    6.课后练习

    1.课堂代码1-2遍;

    7.面试题

    8.扩展知识或课外阅读推荐(可选)

    8.1.扩展知识

    8.2.课外阅读

    展开全文
  • 本阶段为Java基础入门,包含:初识Java、变量、运算符、选择结构、循环结构、方法、数组、面向对象、抽象类和接口、常用类、枚举、泛型、内部类、集合、异常、I/O、设计模式、数据库、JDBC、项目实战 第二阶段: ...
  • jQuery案例实战&BootStrap

    2020-09-01 23:04:35
    jQuery案例实战&BootStrap 第一步:建一个web项目 (按照下面图片步骤来就行) 第二步:导入需要的jar包 注:要导入的jar包较多(直接cv进去就可以了) 第三步:写配置文件(web.xml) (1)配置监听器 (2)加载...
  • 1.javascript从入门到精通,为...3.easyui从入门到精通课程,详细介绍各种常用控件的使用方法,结合项目模块实战;4.jquery应用:主要讲解对复杂及常用ui界面的设计,利用jquery技术基础,熟练掌握实现各种功能的技巧。
  • 前端工程师之jquery实战案例大集合

    万人学习 2015-07-20 10:07:47
    详细介绍了一个js类库的实战应用,这里主要讲解jquery。是一个可以很容易就做各种网页特效的面相对象的方法函数集合类库。
  • 目录 1.图片的放大和缩小功能 2.自动更新-当地时间 3.反选 4.商品图片局部放大(放大镜)效果 1.图片的放大和缩小功能 <!DOCTYPE html> <html> <head> <... padd
  • jquery练手小案例

    2021-06-21 08:54:14
    jQuery是-个快速、极简的JavaScript框架, 它是-个优秀的JavaScript代码库,设计的宗旨是“writeless,Do More”,即倡导写更少的代码,做更多的...本课程主要是jQuery实战,主要讲解jQuery的API的使用,以及项目实战
  • 小米商城html项目实战,js+css+html
  • 资源介绍一、课程目录00、秒杀系统项目需求分析01、秒杀系统项目说明02、秒杀系统-基础回顾Mybatis讲解103、秒杀系统-基础回顾Mybatis讲解204、秒杀系统-基础回顾Mybatis讲解305、秒杀系统-基础回顾SpringMVC讲解06...
  • python项目开发实战_招聘信息实时数据分析系统(网络爬虫+Flask+Highcharts+MySQL)_编程案例实例课程教程.pdf
  • jQuery Mobile移动应用开发实战》学习笔记
  • JQuery基础案例大全

    热门讨论 2013-01-02 00:50:06
    JQuery是现在最流行的Ajax框架;本案例是本人亲手总结的教学案例。基本包括的Jquery的各个方面的基础应用。包括:选择器;Dom操作;事件;动画;Ajax操作;是一个非常容易上手的代码案例。送给初学者。--邵老师
  • 非常漂亮的100个前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等等,只有你想不到。
  • 07-移动端项目实战

    2019-07-22 22:07:05
    资源名称:07-移动端项目实战资源目录:G_038.Html5项目S]实战:我要地图[G_039.Html5移动开发[S]G_040.Html5项目实战:豆瓣音乐[S]G_041.Html5项目实战:小强快跑之游戏引擎[S]G_043.HTML5结合jQuery Mobile开发 ...
  • Jquery UI 案例

    2017-08-20 21:20:01
    Jquery UI 知识点 树JS点击指定节点 场景描述:
  • JavaScript+jQuery+项目实战系列视频教程 国内IT培训讲师,...
  • web前端还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,实验楼就整理了一些前端项目...
  • vue项目实战精粹汇总

    千次阅读 2022-02-10 00:32:12
    笔者曾经有两年的vue项目经验,基于vue做过移动端项目和PC端的ERP系统,虽然平时工作中采用的是react技术栈,但平时还是会积累很多vue相关的最佳实践和做一些基于vue的开源项目,所以说总结vue的项目经验我觉得是...
  • JQuery Mobile移动应用开发实战》学习笔记,多为示例代码,在示例中了解JQuery Mobile
  • 九宫格记忆网 ( Java awt+JSP+MySQL+ Javascript+CSS实现)。 最近网络中出现了一种全新的日记方式一一九宫格日记。...本章将以九宫格记忆网为例,介绍如何应用 Java Web+Ajax+ Jquery+ My SQL实现九宫格日记网。
  • 小编收集了前端开发11个项目开发教程,大企业项目实战教程+文档源码。总共5个g资料统统拿走!转发+关注并xs小编:“资料”全部打包带走!本套课程是非常完整的Web前端学习课程,对与想学习Web前端的同学推荐学习本套...
  •  1、前端:jsp、css、javascript、jQuery(js框架)、bootstrap框架  2、后台:Spring MVC、Spring、Mybatis框架、javaMail进行邮件发送、jstl 、jstl自定义分页标签、代码生成器等  3、数据库:Mysql  4、服务器...
  • 以及创建django框架的项目 讲解路由 讲解views视图层 讲解request请求对象中带有的一些属性和方法 讲解response响应对象 讲解template模板层 通过小案例:用户登录的功能来讲解通过jquery validate插件进行表单验证...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,079
精华内容 2,431
关键字:

jquery项目实战案例