jQuery简单小案例(1)，自学必看，前端app开发

• 程序代码

• 六、手风琴

• • • 实现思想

• 程序代码

jQuery的详细总结

• 要想使用jQuery，必须要下载，并引用文件

jQuery超详细总结，本文中所用到的知识均可在这篇文章中找到。

一、滑动选项卡

实现思想

• 每一个选项卡添加一个鼠标移入事件，鼠标移入不同的选项卡时，滑块也会随之移动

• 用改变定位的方式来控制滑块的移动

• 选项卡从0开始，当移入第0个选项卡时，滑块的left值为0.移入第一个选项卡时滑块的left值为选项卡宽度*1，以此类推,移入第n个选项卡时，滑块的left值为选项卡宽度*n

程序代码

• {

margin: 0;

padding: 0;

}

ul, li {

list-style: none;

}

ul {

width: 1000px;

height: 60px;

border-bottom: 3px solid skyblue;

margin: 50px auto;

/* 这里的弹性布局时为了让 li 横向排列 */

display: flex;

position: relative;

}

li {

/* 每一个 li 占父元素的一份 */

flex: 1;

height: 100%;

/* 再 li 里面写 弹性布局是为了让文字绝对居中 */

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

}

span {

position: absolute;

left: 0;

bottom: -3px;

width: 100px;

height: 3px;

background-color: red;

}

• 选项1
• 选项2
• 选项3
• 选项4
• 选项5
• 选项6
• 选项7
• 选项8
• 选项9
• 选项10

• //每一个li添加移入事件

  $(‘ul > li’).mouseover(function () {

  //this是移入的li

  // 移入li的索引值 $(this).index()

  // 让 span 滑块 的 left 值跟着改变就可以了

  // 运动就使用 animate() 函数

  // $(‘span’).animate({

  // left: $(this).index() * 100 第n个选项卡*选项卡宽度

  // })

  // 每次移入的时候, 都让之前的动画停止, 直接做最新的这个动画

  $(‘span’).stop().animate({

  left: $(this).index() * 100

  })

  })

  二、选项卡

  

  实现思想

  • 利用添加删除类名来实现选项卡的切换

  • 一个类名控制选项卡的颜色变化，一个类名控制内容的显示隐藏也就是display的改变

  程序代码

  *{margin: 0;padding: 0;}

  ul,li{list-style: none;}

  .box{border: 10px solid;width: 600px;margin: auto;height: 400px;}

  .ul1{display: flex;text-align: center;font-size: 30px;}

  .ul1>li{flex: 1;background: rgba(168, 255, 251, 0.7);height: 60px;line-height: 60px;}

  .ul2{width: 100%;background: rgb(241, 138, 250);height: 340px;display:flex;justify-content:center;align-items:center;}

  .ul2>li{font-size: 80px;display: none;}

  /* 控制选项卡背景颜色的改变 */

  .ul1 .active{background: rgb(255, 211, 91);}

  /* 控制内容的显示隐藏 */

  .ul2 .active{display: block;}
• 1
• 2
• 3
• 1
• 2
• 3

• // 第一种方法

  $(‘.ul1>li’).click(function(){

  $(this)

  .addClass(‘active’)//在点击的按钮上添加active类名

  .siblings()//找到其余兄弟元素

  .removeClass(‘active’)//删除其余兄弟元素上的active类名

  .parent()//找到父元素 ul1

  .next()//找到父元素的下一个兄弟元素ul2

  .children()//找到ul2下所有的子元素

  .removeClass(‘active’)//删除所有子元素的active类名

  .eq($(this).index())//找到与点击按钮this对应的元素的索引

  .addClass(‘active’)//添加active类名

  })

  //第二种方法

  $(‘.ul1>li’).click(function(){

  $(‘.box li’).removeClass(‘active’)//所有li移除属性active

  $(this).addClass(‘active’)//在点击按钮上添加类名active

  ${(}^{\prime }.ul2>l{i}^{\prime }).eq($(this).index()).addClass(‘active’)//在相应的内容上添加active类名

  })

  三、树状菜单

  

  实现思想

  • 点击某一个一级菜单，其下的二级菜单显示，其余一级菜单的二级菜单隐藏

  • 二级菜单均隐藏display:none，当点击相应的一级菜单后，该二级菜单显示slideDown()，其余二级菜单隐藏slideUp()

  • 一种伪元素的方式写+ -

  程序代码

  • {

  margin: 0;

  padding: 0;

  }

  ul, ol, li {

  list-style: none;

  }

  ul {

  width: 300px;

  /* 高不需要写, 让内容撑开 */

  border: 3px solid pink;

  margin: 30px auto;

  padding-left: 20px;

  }

  ul > li {

  cursor: pointer;

  }

  /* 二级菜单 所有二级菜单隐藏*/

  li > ol {

  padding-left: 20px;

  display: none;

  }

  /*

  使用一种伪元素的方式写 + -

  */

  /* 包含一级菜单和二级菜单的所有 li */

  li::before {

  content: '+ ';

  }

  /* 有 active 类名的 li 的 before 伪元素样式 */

  li.active::before {

  content: '- ';

  }
• 一级菜单
• 二级菜单
• 二级菜单
• 二级菜单
• 一级菜单
• 二级菜单
• 二级菜单
• 二级菜单
• 二级菜单
• 二级菜单
• 一级菜单
• 二级菜单
• 二级菜单
• 二级菜单
• 二级菜单
• 二级菜单
• 二级菜单
• 二级菜单

• // 每一个一级菜单都有一个点击事件

  // 注意: ul > li 子代选择器 选择的就是一级菜单的 li

  // ul li 后代选择器 选择的是所有一级菜单和二级菜单的 li

  // 给所有一级菜单添加点击事件

  $(‘ul > li’).click(function () {

  // 点击的时候, 自己有 active 类名, 并且自己的子元素的 ol slideDown()

  // 兄弟元素取消 active 类名, 并且兄弟元素下的 ol slideUp()

  $(this)// 找到 点击的一级菜单

  .toggleClass(‘active’)//切换 有类名就添加 没有就删除 更改一级菜单前的加减

  .children(‘ol’)// 找到该一级菜单的子元素 ol 二级菜单

  .slideToggle()// 切换 显示和隐藏 如果隐藏就让其显示 如果显示就让其隐藏

  小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
  因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  
  
  
  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  

  最后

  ---

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

  

  )]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  [外链图片转存中…(img-ZKJb5RCW-1710606480572)]

  最后

  ---

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。