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

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()
• 参数是一个函数。