开发公司jQuery案例

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135

6. (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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104

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);    });});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79

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

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发