jquery点击左右滑动_jQuery 排序和动画

最新推荐文章于 2023-09-22 12:46:27 发布

百里方欣

最新推荐文章于 2023-09-22 12:46:27 发布

阅读量514

点赞数

CC 4.0 BY-SA版权

文章标签： jquery点击左右滑动

本文链接：https://blog.csdn.net/weixin_28685287/article/details/113491425

本文详细介绍了jQuery中的排序方法如eq()和index()，以及动画效果，包括淡入淡出、滑动显示隐藏和自定义动画animate()。此外，还讲解了如何实现排他思想和Tab栏特效，并探讨了each()遍历方法、入口函数和动画控制方法如delay()和stop()。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 排序和动画

排序

eq() 方法

jQuery 中获得的对象，内部包含选择的一组原生 js 对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系。
eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标。

// 选择所有的 p 标签元素
        var $ps = $("p");
        // 生成的 jQuery 对象，内部包含所有的原生 js 对象
        // jQuery 对象是一个类数组对象，内部所有的 数据会进行一个大的排序
        // 排序与自己原来的父级没有关系，只与 在 jQuery 对象中的新的位置有关
        // 重点体现在 eq()  方法中
        // 给指定位置的对象添加颜色
        $ps.eq(1).css("background-color","red");
        $ps.eq(6).css("background-color","red");
        $ps.eq(9).css("background-color","red");
        $ps.eq(11).css("background-color","red");

        // 通过类名选择标签
        $(".cur").eq(2).css("background-color","red")

index() 方法

jQuery 对象调用 index() 方法时，得到的是它自己在 HTML 结构中的兄弟中的下标位置。与jQuery 大排序没有关系。

// 选择所有的 p 标签元素
        var $ps = $("p");
        // index() 方法获取下标时，排序跟新生成的 jQuery 对象无关
        // 它依赖于自身元素在父级中同级元素之间的位置
        // 添加点击事件
        $ps.click(function () {
            // 点击输出自己的 index() 的值
            console.log($(this).index())
        })

排他思想

在一些事件中，希望自己是特殊的，而它的兄弟们是默认的。

排他方法

jQuery 中可以让 this 特殊设置，让兄弟 siblings 设置成默认。

Tab 栏特效中的排他

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

// 获取所有的 span
        var $span = $(".tab .title span");
        // 添加鼠标移上事件
        $span.mouseenter(function () {
            // 利用变量存储 this 的下标
            var idx = $(this).index();
            // 自己级别的排他
            $(this).addClass("current").siblings().removeClass("current");
            // 对应级别的排他
            $(".tab .detail ul").eq(idx).addClass("current").siblings().removeClass("current");
        })

Tab 栏优化

// 获取所有的 span
        var $span = $(".tab .title span");
        // 添加鼠标移上事件
        $span.mouseenter(function () {
            // 利用变量存储 this 的下标
            var idx = $(this).index();
      // 自己级别的排他
      // 查找所有对应 ul 时候，不要单独选择所有 ul，要通过当前的 this 的节点关系查找
      // 链式调用方式，找到自己父级中的兄弟中的所有子级 ul
      $(this).addClass("current")
      .siblings().removeClass("current")
      .parent().siblings().children().eq(idx).addClass("current")
      .siblings().removeClass("current");

        })

each()遍历

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

each() 遍历方法
each()
参数是一个函数。
作用：就是对 jQuery 对象中的元素每一个都执行函数内部的操作。
each 方法的基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项，然后对每一项进行操作。

优点 1

each 的函数内部，也有一个 this，指向的是进来遍历的每一次的元素。
案例：让每一个 div 内部的第二个元素变红。

// 选择所有的 box 元素
        // var $box = $(".box");
        // 给每个 box 内部的第二个 p 添加红色
        $box.children().eq(1).css("background","red");
        //  each() 遍历
        // 将 jQuery 对象中的每一项单独拿出来进行操作
        // $box.each(function () {
        //  // this 关键字，指向的是每一次遍历的元素对象
        //  // 就可以针对每一个元素进行单独操作
            $(this).children().eq(1).css("background","red");
        });

优点2

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

// 选择所有的 p 标签
        var $ps = $(".box p")
        // 添加点击事件
        // $ps.click(function () {
        //  // 获取元素在自己的父级中 兄弟间的下标
        //  console.log($(this).index())
        // })
        // 通过each 方法进行操作
        $ps.each(function (i) {
            // i 记录的是这一次遍历时当前元素在 jQuery 对象大排序中的位置
            $(this).click(function () {
                // 这个内部的this 就是事件源
                console.log(i);
                console.log($(this).index())
            })
        })

表格隔行变色

// 选中偶数的列，变色
    // $("td:even").css("background","skyblue")

    // 可以将每一行作为单独操作单位，让每一行中的列进行隔列变色
    // 我们一提到对某个元素内部或内部的子元素进行一些操作，首先想到 each 方法
    // var $tr = $("tr");
    // $tr.each(function () {
    //   // 让子级所有的列隔列变色
    //   $(this).children(":odd").css("background","skyblue")
    // })

    // 方法2
    $("td").each(function () {
      // 可以判断 当前这个 td 在父级中所处的位置
      // index() 
      if ($(this).index() % 2 === 0) {
        $(this).css("background","skyblue")
      }
    })

入口函数

原生的Window.onload
jQuery中入口函数
语法1:

$(document).ready(function(){

// 获取函数

})

语法2:

$(function(){

// 获取函数

})

onload 事件，等待所有的页面中的资源（DOM树、图片、视频、音频等外部资源）加载完毕之后，才会执行
jq 的入口函数,仅仅需要等待 DOM 树加载完成就立即执行

// onload 事件在加载时，指的是页面中多有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发
        // 一个页面中只能出现一次
        window.onload = function () {
            console.log(1);
            var btn = document.getElementsByTagName("input")[0];
            console.log(btn);
        };

        // jQuery 中的入口函数
        // 仅仅需要等待页面中的 DOM 树加载完毕就可以执行了
        $(document).ready(function () {
            console.log(2);
            var btn = document.getElementsByTagName("input")[0];
            console.log(btn);
        })

        // 简化
        // 在一个页面中，可以书写多个 jQuery 的入口函数，执行顺序按照前后加载顺序执行
        $(function () {
            console.log(3);
            var btn = document.getElementsByTagName("input")[0];
            console.log(btn);
        })
        // $(function () {

        // })

jQuery 切换效果方法

显示隐藏方法hide() 和 show() 方法

hide()：元素隐藏，隐藏的前提必须是元素 display:block；
show()：元素显示，显示的前提必须是元素 display:none;
toggle()：在元素隐藏和显示之间进行切换。
这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。

参数

如果不传参数：直接显示和隐藏，没有过渡动画。
如果传递参数：
单词格式："slow","normal", "fast"
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。
过渡时间内，伴随着宽度和高度以及透明度的变化。

// 获取元素
        var $pic = $("#pic")
        var $btn1 = $("#btn1")
        var $btn2 = $("#btn2")
        var $btn3 = $("#btn3")

        // 添加点击事件，让图片实现显示和隐藏
        $btn1.click(function () {
            // $pic.hide("slow");
            $pic.hide(1000);
        })
        $btn2.click(function () {
            $pic.show("normal");
        })
        $btn3.click(function () {
            $pic.toggle("fast");
        })

滑动显示隐藏

slideDown() 和 slideUp() 方法

slideDown()：滑动显示（方向不一定）
slideUp()：滑动隐藏
slideToggle()：滑动切换
让元素在 display 属性的 block 和 none 之间进行切换。

参数

如果不传参数：默认的过渡时间为 400 毫秒。
如果传递参数：
单词格式："slow","normal", "fast"
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。

注意：

如果滑动的元素没有设置宽高，没有滑动效果。
如果元素设置了高度和宽度，会进行上下垂直方向的滑动。
动画的效果：高度属性在 0 到设置值之间的变化，没有透明度动画。
如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化。

// 获取元素
        var $pic = $("#pic")
        var $btn1 = $("#btn1")
        var $btn2 = $("#btn2")
        var $btn3 = $("#btn3")

        // 添加点击事件，让图片实现滑动显示和隐藏
        $btn1.click(function () {
          $pic.slideUp(1000)
        })
        $btn2.click(function () {
          $pic.slideDown(1000)
        })
        $btn3.click(function () {
          $pic.slideToggle(1000)
        })

淡入淡出

fadeIn()：淡入，透明度逐渐增大最终显示。
fadeOut()：淡出，透明度逐渐降低最终隐藏。
fadeToggle()：切换效果。
fadeTo()：淡入或淡出到某个指定的透明度。
动画效果，执行的是透明度动画。也是在 display 属性的 block 和 none 之间切换。

参数

如果不传参数：默认的过渡时间为 400 毫秒。
如果传递参数：
单词格式："slow","normal", "fast"
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。

// 获取元素
        var $pic = $("#pic")
        var $btn1 = $("#btn1")
        var $btn2 = $("#btn2")
        var $btn3 = $("#btn3")
        var $btn4 = $("#btn4")

        // 添加点击事件，让图片实现淡入显示和淡出隐藏
        $btn1.click(function () {
          $pic.fadeOut("slow")
        })
        $btn2.click(function () {
          $pic.fadeIn(1000)
        })
        $btn3.click(function () {
          $pic.fadeToggle()
        })
        $btn4.click(function () {
          $pic.fadeTo(500,0.5)
        })

animate() 动画方法

animate() 方法

作用：执行 CSS 属性集的自定义动画。
语法：$(selector).animate(styles,speed,easing,callback)
参数1： css 的属性名和运动结束位置的属性值的集合。
参数2：可选，规定动画的速度，默认是 "normal"。其他值，“slow”、“normal”、“fast”，数字格式，单位为毫秒。
参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing 和linear。
参数4：可选，animate 函数执行完之后，要执行的函数。
注意：其他的运动方法比如 slideUp() 等，也有参数3 和参数4.

// 获取元素
        var $ps = $("p");
        // 习惯会将运动时间存储到一个变量中
        var during = 2000;
        // 添加点击事件，让元素运动
        $ps.click(function () {
            // 让自己的 left 的值变为 500
            // 使用 animate() 方法
            // 参数1： 运动的 css 的属性集，对象格式
            // 参数2： 运动时间，单词格式，数字格式
            // 参数3： 运动速度，可选 swing 和 linear
            // 参数4： 回调函数，在运动结束之后立即执行
            $(this).animate({"left": 500},during,"swing",function () {
                // 在运动结束后，让元素变红色
                $(this).css("background","red")
            })
            // 所有有数值的属性都可以运动
            $(this).animate({"width": 500})
            $(this).animate({"opacity": 0.5})
            $(this).animate({"background": "#000"})
        })

动画排队

①同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
②如果是不同的元素对象都有动画，不会出现排队机制。
③如果是的其他非运动的代码，也不会等待运动完成。
④之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队。
同一个元素身上的运动，可以简化成链式调用的方法。

// 获取元素
        var $box1 = $(".box1")
        var $box2 = $(".box2")

        var during = 2000;
        // 给 第一个 元素添加动画
        // $box1.animate({"left": 400,"top": 400},during)
        // $box1.animate({"left": 400},during)
        // $box1.animate({"top": 400},during)
        // $box1.animate({"left": 0},during)
        // $box1.animate({"top": 0},during)
        // $box2.animate({"top": 400},during)

        // 非运动的代码，关于同一个元素对象的，也不会排队
        // $box1.css("height",100)

        // 注意：其他的运动方法，如果设置给同一个元素，也会发生排队
        // $box1.mouseenter(function () {
        //     $(this).children().slideUp(during)
        // })
        // $box1.mouseleave(function () {
        //     $(this).children().slideDown(during)
        // })

        // 给同一个元素的多个运动进行链式调用写法
        $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

delay()延迟方法

动画延迟

delay：延迟的意思。
将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果。
参数：时间的数值，表示延迟的时间。
除了 animate 方法之外，其他的运动方法也有延迟效果。

// 获取元素
        var $box1 = $(".box1")
        var $box2 = $(".box2")
        var during = 2000;
        // 延迟
        $box1.animate({"left": 500},during);
        $box2.delay(2000).animate({"left": 500},during);

stop() 停止动画方法

stop() 作用：设置元素对象身上的排队的动画以何种方式进行停止。
有两个参数，都是布尔值。
参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 false 表示不清空只停止当前的一个动画。
参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 false 表示不完成当前动画，立即停止在当前位置。
默认情况下，两个参数值默认值为 false。
根据两个参数的值，可以得到四种停止方式。

应用

实际工作中，一般要求清空后面的排队，停止在当前位置，多使用 stop(true),第二个参数不设置默认为 false。

var $box1 = $(".box1");
        var during = 2000;
        // box1 有四个运动进行排队
        $box1.animate({"left" : 500},during);
        $box1.animate({"top" : 500},during);
        $box1.animate({"left" : 0},during);
        $box1.animate({"top" : 30},during);

        // 添加按钮点击事件
        // 清空动画，走到结尾
        $("#btn1").click(function () {
            $box1.stop(true,true)
        })

        // 清空动画，停在当前
        $("#btn2").click(function () {
            $box1.stop(true,false)
        })

        // 不清空后面的动画，当前运动立即走到结尾
        $("#btn3").click(function () {
            $box1.stop(false,true)
        })

        // 不清空后面的动画，当前运动立即停止在当前位置
        $("#btn4").click(function () {
            $box1.stop(false,false)
        })

        // 在实际工作中，一般要求会清空后面的动画，当前动画要停止在当前的位置
        // 更多时候使用 stop(true)

清空动画排队

动画排队问题

如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队。
需要去清除排队的动画，进行防骚扰操作。

方法1

利用 stop() 方法。
在每一个运动函数之前都增加一个 stop(true)，表示在运动执行之前，会将前面排队的动画清空，然后停止在当前位置。

var $box1 = $(".box1");
        var during = 1000;        

        // 将运动设置给事件，事件多次触发会积累动画出现动画排队
        // 清除动画排队方法1： 在每一次新的运动开始之前，去停止之前所有的动画排队
        $box1.mouseenter(function () {
            $(this).children().stop(true).slideUp(during)
        })
        $box1.mouseleave(function () {
            $(this).children().stop(true).slideDown(during)
        })

方法2

利用函数节流方法，如果元素在运动，直接 return，不要执行后面的运动代码。
每个 jQuery 对象，都能调用一个 is() 方法，作用是显示元素对象的某种状态。
如果参数位置是 is(“:animated”),返回值是布尔值，true 表示正在运动，false 表示没有运动。

// 清空动画排队方法2：使用函数节流方式
        $box1.mouseenter(function () {
            // 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
            if ($(this).children().is(":animated")) {
                return;
            }
            // 如果走到这里，说明元素没有在运动，就可以添加新运动
            $(this).children().stop(true).slideUp(during)
        })
        $box1.mouseleave(function () {
            // 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
            if ($(this).children().is(":animated")) {
                return;
            }
            $(this).children().stop(true).slideDown(during)
        })