jQuery 排序
eq() 方法
- jQuery 中获得的对象，内部包含选择的一组原生 js 对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的HTML 结构没有关系。
- eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标。
index() 方法
jQuery 对象调用 index() 方法时，得到的是它自己在 HTML 结构中的兄弟中的下标位置。与 jQuery 大排序没有关系。
each()
- 参数是一个函数。
- 作用:就是对 jQuery 对象中的元素每一个都执行函数内部的操作。
- each 方法的基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项，然后对每一项进行操作。
//将 jQuery 对象中的每一项单独拿出来进行操作
$box.each(function () {
// this 关键字，指向的是每一次遍历的元素对象
// 就可以针对每一个元素进行单独操作
$(this).children().eq(1).css("background","red");
});
each 的函数内部，也有一个 this，指向的是进来遍历的每一次的元素。
each 的函数可以传一个参数 i，i 表示的是这一次的遍历对象在整体的 jQuery 对象大排队中的下标位置。
var $ps = $(".box p")
// 通过each 方法进行操作
$ps.each(function (i) {
// i 记录的是这一次遍历时当前元素在 jQuery 对象大排序中的位置
$(this).click(function () {
// 这个内部的this 就是事件源
console.log(i);
console.log($(this).index())
})
})
jQuery 中的入口函数
//语法1:
$(document).ready(function(){
// 获取元素
});
//语法2:
$(function(){
// 获取元素
});
onload 事件，等待所有的页面中的资源(DOM树、图片、视频、音频等外部资源)加载完毕之后，才会执行
jq 的入口函数,仅仅需要等待 DOM 树加载完成就立即执行
jQuery 切换效果方法
hide() 和 show() 方法
- hide():元素隐藏，隐藏的前提必须是元素 display:block;
- show():元素显示，显示的前提必须是元素 display:none;
- toggle():在元素隐藏和显示之间进行切换。
- 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。
参数
- 如果不传参数:直接显示和隐藏，没有过渡动画。
- 如果传递参数:
• 单词格式:"slow","normal", "fast"
• 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。 - 过渡时间内，伴随着宽度和高度以及透明度的变化。
// 添加点击事件，让图片实现显示和隐藏
$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"
• 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。
// 添加点击事件，让图片实现滑动显示和隐藏
$btn1.click(function () {
$pic.slideUp(1000)
})
$btn2.click(function () {
$pic.slideDown(1000)
})
$btn3.click(function () {
$pic.slideToggle(1000)
})
注意
- 如果滑动的元素没有设置宽高，没有滑动效果。
- 如果元素设置了高度和宽度，会进行上下垂直方向的滑动。
- 动画的效果:高度属性在 0 到设置值之间的变化，没有透明度动画。
- 如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化。
fadeIn() 和 fadeOut() 方法
- fadeIn():淡入，透明度逐渐增大最终显示。
- fadeOut():淡出，透明度逐渐降低最终隐藏。
- fadeToggle():切换效果。
- fadeTo():淡入或淡出到某个指定的透明度。
- 动画效果，执行的是透明度动画。也是在 display 属性的 block 和 none 之间切换。
参数
- 如果不传参数:默认的过渡时间为 400 毫秒。
- 如果传递参数:
• 单词格式:"slow","normal", "fast"
• 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。
// 添加点击事件，让图片实现淡入显示和淡出隐藏
$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() 动画方法
- 作用:执行 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"})
})
动画排队
- 同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
- 如果是不同的元素对象都有动画，不会出现排队机制。
- 如果是的其他非运动的代码，也不会等待运动完成。
- 之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队。
- 同一个元素身上的运动，可以简化成链式调用的方法。
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。
- 根据两个参数的值，可以得到四种停止方式。
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 表示没有运动。
var $box1 = $(".box1");
var during = 1000;
// 清空动画排队方法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)
})
