jQuery排序与动画

一、Jquery排序

1.1 获得下标的方法

（1）eq() 方法

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

（2）index() 方法

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

1.2 排他思想在jQuery中的应用

  • 在一个事件中，希望自己是特殊的而其兄弟们是默认的行为就是排他

（1）排他方法

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

（2）Tab栏特效中的排他

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

（3）Tab栏优化

  • 如果是上述的做法的话会出一个问题，即用jQuery选择器获得的全局的匹配项然后进行jQuery大排序
  • 如果多个Tab栏相同类名的话，会导只有第一个tab栏中的列表切换
  • 解决方法：
  • span和ul的查找全部使用链式调用，通过节点关系查找

1.3 each() 遍历

  • 因为jQuery对象进行的操作都是批量操作，每次批量操作都可能会有一个新的jQuery排序，所以只能进行一些简单的操作
  • 当涉及到后代元素的操作的话，就不太适用批量操作

（1）each() 遍历方法

  • 参数是一个函数
  • 作用：就是对jQuery对象中的元素每一个都执行函数内部的操作
  • 和for循环相像，就是从下标为0的项一直遍历到最后一项，然后根据函数内部进行操作

（2）优点

  • each参数中的函数内部，也有一个this，指向的是进来遍历的每一次的元素
  • 案例：让每一个div内部的第二个元素变红
  • each函数内部有一个默认的参数i，i 表示这次遍历对象在jQuery对象排序中的下标位置，相当于eq()
  • 案例：制作表格隔列变色

二、jQuery入口函数

  • 原生的入口函数 window.onload
  • jQuery中的入口函数$(document).eady()

（1）window.onload

  • 是我们平常用的入口函数，在页面中的所有资源加载完毕才能回调（DOM树、音频、视频、图片）
  • 只能有一个，后写覆盖前面
  • 语法：
window.onload = function () {...}

（2）$(document).ready()

  • 在页面中DOM结构加载完毕就可以回调，无须等到图片等资源加载完毕
  • 可以有多个，后写后调用
  • 语法：
$(document).ready(function () {...})
// 简写
$(function () {...})

（3）区别

  • 加载时间不一样
  • 比window.onload快
  • 最大存在数量不一样

三、jQuery动画

3.1 显示隐藏方法

（1）hide() 、show() 和toggle() 方法

  • hide()：元素隐藏，相当于display：none
  • show()：元素显示，相当于display：block
  • toggle()：切换隐藏 / 显示，在display为none或者block切换
  • 可以传参数，会有过度动画，不传参数没有过渡时间
  • 参数：
  • 字符串形式：'slow'、’normal‘、’fast‘
  • 数字形式：毫秒单位
  • 动画效果：收缩至左上角 / 从左上角放大，伴随着宽度和高度以及透明度的变化

（2）slideDown() 和 slideUp() 滑动显示隐藏

  • slideDown()：滑动显示
  • slideUp()：滑动隐藏
  • slideToggle()：滑动切换
  • 让元素在display属性的block和none之间进行切换

参数

  • 如果不传参数，默认过度时间为400ms
  • 如果传参数：
  • 字符串：'slow'、’normal‘、’fast‘
  • 数字：时间是毫秒

注意

  • 如果滑动的元素没有设置宽高，没有滑动效果
  • 如果设置了高度和宽度，会进行上下垂直方向的滑动

动画效果

  • 高度在0到设置值之间的变化，没有透明度动画
  • 如果设置了定位，偏移量方向如果是bottom参与了，滑动方向会发生变化

（3）fadeIn() 和 fadeOut() 淡入淡出

  • fadeIn()：淡入，透明度逐渐增大最终显示
  • fadeOut()：淡出，透明度逐渐降低最终隐藏
  • fadeToggle()：切换效果
  • fadeTo()：淡入或淡出到某个指定的透明度

动画效果

  • 执行的是透明度动画，也是在 display 属性的 block 和 none 之间切换

参数

  • 不传参数，默认400毫秒
  • 传参数：同上

3.2 animate() 方法

  • 作用：执行CSS属性集的自定义动画
  • 语法：$(selector).animate(styles, speed, easing, callback)
  • 参数：
  • ① css的属性名和运动结束位置的属性值的集合
  • ② 可选，规定动画的速度，默认’normal‘。其他的是’slow‘、’normal‘、’fast‘，单位为毫秒
  • ③ 可选，设置动画曲线，默认swing，有easing、swing、linear
  • ④ 可选，animate函数执行完之后要执行的函数

注意

  • 其他运动方法比如slideUp等，也有参数3和参数4
  • 所有有数值的属性都可以运动

3.3 动画排队

  • ① 同一个元素对象身上，如果定义了多个动画，动画会排队等待执行
  • ② 如果是不同的元素，就不会排队
  • ③ 如果是非运动动画（如改变宽高），也不会等待运动完成
  • ④ 显示隐藏、淡入淡出动画也有排队机制
  • 同一个元素身上的运动，可以简化成联式调用的方法

3.4 动画的操作

（1）delay() 动画延迟

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

（2）stop() 动画暂停

  • 作用：设置元素对象身上的排队的动画以何种方式进行停止
  • 参数：
  • ① 设置是否清空后面的队列
  • ② 设置当前动画是否立即完成
  • 两个参数的默认值都是false
  • 一般应用的是清除后面动画，并且停留在当前位置
  • 所以是stop(true, false) 简写: stop(true)

（3）清空动画排队

  • 为解决频繁触发事件带来的动画累积
  • 方法一：
  • 使用stop(true) 清空动画队列
  • 方法二：
  • 使用jQuery对象的.is(':animate')方法判断是否运动中，用条件判断来决定是否增加动画

四、综合案例

  • 下拉菜单
  • 手凤琴轮播图
  • 淡入淡出轮播图