在拉钩学习的笔记（十四）jQuery排序和动画

80 阅读 0 评论 53 点赞

我是靠谱客的博主爱听歌盼望，最近开发中收集的这篇文章主要介绍在拉钩学习的笔记（十四）jQuery排序和动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、jQuery 排序
eq() 方法
jQuery 中获得的对象，内部包含选择的一组原生js对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系
eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标
index() 方法
jQuery 对象调用 index() 方法时，得到的是它自己在HTML结构中的兄弟中的下标位置。与 jQuery 大排序没有关系
2、排他思想
在一些事件中，希望自己是特殊的，而它的兄弟们是默认的
jQuery 中可以让this特殊设置，让兄弟 siblings 设置成默认
Tab 栏特效中的排他
3、each() 遍历
jQuery 对象进行的操作都是批量操作；批量操作只能执行一些简单的效果；如果想对 JQ 对象中的每一个元素以及内部的后代元素进行一些复杂操作，程序很难执行
each() 参数是一个函数；作用：就是对 jQuery 对象中的元素每一个都执行函数内部的操作。each 方法的基本原理就是 for 循环，从对象的下标为0的项一直遍历到最后一项，然后对每一项进行操作
优点：
each 的函数内部，也有一个this，指向的是进行遍历的每一次元素
each 的函数可以传一个参数i，i表示的是这一次的遍历对象在整体的 jQuery 对象大排队中的下标位置
4、入口函数
原生的 window.onload
jQuery 中的入口函数：
语法一：$(document).ready(function(){ });
简化：$(function(){ });
onload 事件在加载时，指的是页面中多有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发；一个页面只能有一个，后写的会把前写的覆盖
jQuery 中的入口函数仅仅需要等待页面中的 DOM 树加载完毕就可以执行了；一个页面可以书写多个，执行顺序按照前后加载顺序
5、jQuery 切换效果方法
hide() 和 show() 方法
hide() ：元素隐藏，隐藏的前提必须是元素display:block;
show() ：元素显示，显示的前提必须是元素display:none;
toggle()：在元素隐藏和显示之间进行切换
这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画
参数：如果不传参数：直接显示和隐藏，没有过渡动画；如果传参数：单词格式："slow"、"normal"、"fast"，数字格式的时间，单位毫秒，在规定时间之内出现显示或隐藏的动画；过渡时间内，伴随着宽度和高度以及透明度的变化
slideDown() 和 slideUp() 方法
slideDown()：滑动显示（方向不一定）
slideUp()：滑动隐藏
slideToggle()：滑动切换
让元素在display属性的block和none之间进行切换
参数：如果不传参数：默认的过渡时间为400毫秒；如果传参数：单词格式："slow"、"normal"、"fast"，数字格式的时间，单位毫秒，在规定时间之内出现显示或隐藏的动画；
注意：如果滑动的元素没有设置宽高，没有滑动效果；如果设置了高度和宽度，会进行上下垂直方向滑动；动画的效果: 高度属性在0到设置值之间的变化，没有透明度动画；如果元素设置了定位，偏移量方向如果是bottom参与了，滑动方向会发生变化
fadeIn() 和 fadeOut() 方法
fadeIn()：淡入，透明度逐渐增大最终显示
fadeOut()：淡出，透明度逐渐降低最终隐藏
fadeToggele()：切换效果
fadeTo()：淡入或淡出到某个指定的透明度
动画效果，执行的是透明度动画。也是在display属性的block和none之间切换
参数：如果不传参数：默认的过渡时间为400毫秒；如果传参数：单词格式："slow"、"normal"、"fast"，数字格式的时间，单位毫秒，在规定时间之内出现显示或隐藏的动画；
6、animate()动画方法
作用：执行CSS属性集的自定义动画
语法：$(selector).animate(style,speed,easing,callback);
参数1：css 属性名和运动结束位置的属性值的集合
参数2：可选，规定动画的速度，默认是“normal”。其他值，“slow”、“normal”、“fast”，数字格式，单位为毫秒
参数3：可选，规定在不同的动画点中设置动画速度的easing函数，值包含swing和linear
参数4：可选，animate函数执行完之后，要执行的函数
动画排队：
1、同一个元素身上，如果定义了多个动画，动画会排队等待执行
2、如果是不同的元素对象都有动画，不会出现排队机制
3、如果是其他非运动的代码，也不会等待运动完成
4、之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队
同一个元素身上的运动，可以简化成链式调用的方法（也会排队）
7、delay() 动画延迟
delay：延迟的意思
将delay()设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果
参数：时间的数值，表示延迟的时间
除了 animate 方法之外，其他的运动方法也有延迟效果
8、stop() 停止动画
stop()作用：设置元素对象身上的排队的动画以何种方式进行停止
有两个参数，都是布尔值
参数1：设置是否清空后面的排队动画，如果是true表示清空，如果是false表示不清空，只是停止当前的一个动画
参数2：设置当前动画是否立即完成，如果是true表示立即完成，对象会立刻走到结束位置，如果是false表示不完成当前动画，立即停止在当前位置
默认情况下，两个参数值默认值为false
根据两个参数的值，可以得到四种停止方式
应用：实际工作中，一般要求清空后面的排队，定在当前位置，多使用stop(true)，第二个参数不设置默认为false
9、清空动画排队
如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队
需要清除排队的动画，进行防骚扰操作
方法一：利用stop() 方法，在每个运动函数之前都增加一个stop(true)，表示在运动执行之前，会将前面排队的动画清空，然后停止在当前位置
方法二：利用函数节流方法，如果元素在运动，直接return，不要执行后面的运动代码；每个jQuery对象，都能调用一个is() 方法作用是显示元素对象的某种状态；如果参数位置是is(":animated")，返回值是布尔值，true 表示正在运动，false表示没有运动