经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery排序及应用(Tab栏特效的实现)
来源:cnblogs  作者:小白可别不举铁  时间:2021/4/6 10:08:19  对本文有异议

jQuery排序

eq()排序,可以看作是一个筛选方法
  • jQuery 中获得的对象,内部包含选择的一组原生 js 对象,在 jQuery 对象中会进行一个新的大的排序,这个排序与原来的 HTML 结构没有关系。

    所以eq() 方法在 jQuery 对象中通过下标获取某个对象,下标是 jQuery 对象中的大的排序的下标。

  1. //选中所有p标签
  2. var $ps = $("p");
  3. //生成了一个jquery对象,内部包含了所有的元素js对象
  4. // 是一个类数组对象,内部会按照获取顺序进行一个大排序
  5. // 排序与自己原来的父级没有关系,只与在jQuery对象中的新的位置有关
  6. // 给指定位置对象添加颜色
  7. $ps.eq(1).css("background-color","pink")
  8. $ps.eq(4).css("background-color","skyblue")
  9. $ps.eq(8).css("background-color","purple")
  10. $ps.eq(7).css("background-color","lightgreen")
  11. $ps.eq(10).css("background-color","orange")
  12. //对所有获取的元素进行了排序,跟原来的结构没有关系

  1. --------第三组divp标签----------
  2. <div class="b3">
  3. <p></p>
  4. <p class="b2p"></p>
  5. <p></p>
  6. <p></p>
  7. <p></p>
  8. </div>
  9. ----------
  10. <script>
  11. // 通过类名选中标签
  12. $(".b2p").eq(2).css("background-color","red")
  13. //得到第3组类名为b2p的 p 标签,让它变成红色
  14. </script>

index()方法
  • jQuery 对象调用 index() 方法时,得到的是它自己在 HTML 结构中的兄弟中的下标位置。与新生成的jQuery 对象内部的大排序没有关系。
  • 它依赖于自身元素在父级中同级元素之间的位置
  1. //index() 兄弟中的排序
  2. $ps.click(function(){
  3. //点击输出自己的index值
  4. console.log($(this).index());
  5. })

上图为依次点击图中p标签后,所显示结果

jQuery中设置排他方法,在jQuery中可以通过this特殊设置进行链式调用,让兄弟通过siblings方法,批量设置成默认效果。

应用:Tab栏特效中的排他
  • 自己的级别的排他:给自己this添加(要添加的属性)类名,让其他的兄弟删除该类名。
  • 对应的部分的排他:给对应位置的元素添加 (要添加的属性)类名,其他兄弟删除该类名。
  • 找对应关系,使用的是自己的index()下标,让另一组中下标相同的项作为对应项。
  • 通过选中另一组的对应项利用eq()方法选择下标项。

html部分:

  1. <style>
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. ul{
  7. list-style: none;
  8. }
  9. .tab{
  10. width: 360px;
  11. height: 200px;
  12. border-top: 2px solid #206f96;
  13. margin: 100px;
  14. float: left;
  15. }
  16. .tab .title{
  17. width: 360px;
  18. height: 40px;
  19. overflow: hidden;
  20. }
  21. .tab .title span{
  22. float: left;
  23. width: 88px;
  24. height: 38px;
  25. border: 1px solid #52819c;
  26. border-bottom: 1px solid #52819c;
  27. background-color: #c0f3f7;
  28. font: 16px/34px "SunSim";
  29. text-align: center;
  30. }
  31. .tab .title span.current{
  32. height: 40px;
  33. background-color: rgb(255, 255, 255);
  34. }
  35. .tab .title span a{
  36. color: rgb(34, 34, 34);
  37. text-decoration: none;
  38. }
  39. .tab .detail{
  40. height: 258px;
  41. padding: 17px 0 0 9px;
  42. }
  43. .tab .detail ul{
  44. display: none;
  45. }
  46. .tab .detail ul.current{
  47. display: block;
  48. }
  49. .tab .detail ul li a{
  50. color: #000;
  51. text-decoration: none;
  52. }
  53. .tab .detail ul li.first{
  54. font-weight: bold;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div class="tab">
  60. <div class="title">
  61. <span class="current"><a href="#">上路</a></span>
  62. <span><a href="#">中路</a> / <a href="#">辅助</a></span>
  63. <span><a href="#">打野</a></span>
  64. <span><a href="#">下路</a></span>
  65. </div>
  66. <div class="detail">
  67. <ul class="current">
  68. <li class="first"><a href="#">夏侯惇</a></li>
  69. <li><a href="#">李信</a></li>
  70. <li><a href="#"></a></li>
  71. <li><a href="#">吕布</a></li>
  72. </ul>
  73. <ul>
  74. <li class="first"><a href="#">上官婉儿</a></li>
  75. <li><a href="#">弈星</a></li>
  76. <li><a href="#">甄姬</a></li>
  77. <li><a href="#">女娲</a></li>
  78. </ul>
  79. <ul>
  80. <li class="first"><a href="#">赵云</a></li>
  81. <li><a href="#">露娜</a></li>
  82. <li><a href="#">娜可露露</a></li>
  83. <li><a href="#">夏侯惇</a></li>
  84. </ul>
  85. <ul>
  86. <li class="first"><a href="#">后羿</a></li>
  87. <li><a href="#">虞姬</a></li>
  88. <li><a href="#">狄仁杰</a></li>
  89. <li><a href="#">鲁班</a></li>
  90. </ul>
  91. </div>
  92. </div>
  93. </body>

script部分:

  1. <script src="../jq/jquery-1.12.4.min.js"></script>
  2. <script>
  3. //获取元素
  4. var $spans = $(".tab .title span");
  5. //添加鼠标移上事件
  6. $spans.mouseenter(function(){
  7. // 存储对应span下标的下标值,后面需要找到对应的ul
  8. var ind = $(this).index();
  9. // 自己级别的排他
  10. //$(this).addClass("current").siblings().removeClass("current");
  11. $(".tab .detail ul").eq(ind)
  12. .addClass("current").siblings().removeClass("current")
  13. </script>

? ? 上面的方法在一个tab栏中效果实现没有问题, 但是当页面有多个tab栏时,jQuery对象中大排序和index获取的顺序就会不统一,出现问题。

? 解决方法:span和ul的查找全部使用链式调用,通过节点关系查找

  1. <script src="../jq/jquery-1.12.4.min.js"></script>
  2. <script>
  3. // 查找所有对应ul时,不要单独选择所有的ul,通过当前的 this 的节点关系查找
  4. // 链式调用的方式,找到自己父级中的兄弟中的所有子级
  5. $(this).addClass("current").siblings().removeClass("current")
  6. .parent().siblings().children().eq(ind).addClass("current")
  7. .siblings().removeClass("current");
  8. // title的兄弟detail
  9. })
  10. </script>




jQuery 对象进行的操作都是批量操作,批量操作只能执行一些简单的效果,如果想对 JQ 对象中的每一个元素以及内部的后
代元素进行一些复杂操作,程序很难执行

  • each()遍历

    each()的参数是一个函数

    作用:对jQuery对象中的元素每一个都执行函数内部的操作

    each方法基本原理就是for循环,从对象的下标为0的项一直遍历到最后一项,然后对每一项进行操作

    • 优点

      each的函数内部也有一个this,指向的是进来遍历的每一次的元素。

  1. <body>
  2. <div class="box">
  3. <p></p>
  4. <p></p>
  5. <p></p>
  6. <p></p>
  7. <h2>h2</h2>
  8. </div>
  9. <div class="box">
  10. <p></p>
  11. <p></p>
  12. <p></p>
  13. <p></p>
  14. <h2>h2</h2>
  15. </div>
  16. </body>
  17. <script src="../jq/jquery-1.12.4.min.js"></script>
  18. <script>
  19. var $box = $(".box");
  20. //每个div内的第二个p添加红色
  21. $box.each(function(){
  22. $(this).children().eq(1).css("background-color","pink");
  23. })
  24. </script>

each的函数可以传一个参数i,i表示的是这一次的遍历对象在整体的jQuery对象大排序中的下标位置

  1. //通过each()操作
  2. $ps.each(function(i){
  3. // i 记录的是这一次遍历时,当前元素在jQuery对象大排序中的位置
  4. $(this).click(function(){
  5. console.log($(this).index())
  6. //这个内部的this是事件源
  7. console.log(i);
  8. })
  9. })

  • 同理,如果想实现表格隔列变色的话,依靠jQuery大排列顺序来实现奇偶不同变色的话,后期若给表格再添加列,都会出现问题,无法对应。所以使用each()方法,将每一行作为一个操作单元,让每一行中的列进行隔列变色
  1. var $trs = $("tr");
  2. $trs.each(function(){
  3. $(this).children(":odd").css("background-color","skyblue");
  4. })
  • 另一种方法就是使用td判断,只要不使用jQuery的大排序,就不会影响后期插入列
  1. $("td").each(function(){
  2. //判断当前td在父级中所处的位置
  3. if($(this).index() % 2 == 0){
  4. $(this).css("background-color","skyblue");
  5. }
  6. })

原文链接:http://www.cnblogs.com/dreamtown/p/14591773.html

 友情链接:直通硅谷  点职佳

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号