一、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 () {
（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')方法判断是否运动中，用条件判断来决定是否增加动画
-
四、综合案例
-
下拉菜单
-
手凤琴轮播图
-