排序

eq()方法

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

$("p").eq(4)//所有p标签元素中的第5个

index()方法

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

// 选择所有的 p 标签元素
var $ps = $("p");
// index() 方法获取下标时，排序跟新生成的 jQuery 对象无关
// 它依赖于自身元素在父级中同级元素之间的位置
// 添加点击事件
$ps.click(function () {
	// 点击输出自己的 index() 的值
	console.log($(this).index())
})

排他思想、简易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()遍历方法

调用：each(fun)
fun：函数。
作用：对jQuery对象中的元素每一个都执行函数内部的操作。
优点：

• each的函数内部，也有一个this，指向的是每一次遍历进来的元素

// 选择所有的 box 元素
var $box = $(".box");
// 给每个 box 内部的第二个 p 添加红色
//  each() 遍历
// 将 jQuery 对象中的每一项单独拿出来进行操作
$box.each(function () {
	// this 关键字，指向的是每一次遍历的元素对象
	// 就可以针对每一个元素进行单独操作
	$(this).children().eq(1).css("background","red");
});

• each的函数可以传一个参数i，i表示的是这一次的遍历对象在整体的jQuery对象大排队中的下标位置。

// 选择所有的 p 标签
var $ps = $(".box p")
$ps.each(function (i) {
	// i 记录的是这一次遍历时当前元素在 jQuery 对象大排序中的位置
	$(this).click(function () {
		// 这个内部的this 就是事件源
		console.log(i);// 获取在大排序中的位置
		console.log($(this).index())// 获取在兄弟级中的排序位置
	})
})

表格隔列变色

// 方法一
// 可以将每一行作为单独操作单位，让每一行中的列进行隔列变色
// 我们一提到对某个元素内部或内部的子元素进行一些操作，首先想到 each 方法
var $tr = $("tr");
$tr.each(function () {
  // 让子级所有的列隔列变色
  $(this).children(":odd").css("background","skyblue")
})
// 方法二
$("td").each(function () {
  // 可以判断 当前这个 td 在父级中所处的位置
  // index() 
  if ($(this).index() % 2 === 0) {
    $(this).css("background","skyblue")
  }
})

jQuery入口函数

原生入口函数：window.onload

// onload 事件在加载时，指的是页面中多有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发
// 一个页面中只能出现一次
window.onload = function () {
    // 操作
};

jQuery中的入口函数
语法一：

// jQuery 中的入口函数
// 仅仅需要等待页面中的 DOM 树加载完毕就可以执行了
$(document).ready(function () {
    // 操作
})

语法二，是对语法一的简化：

// 在一个页面中，可以书写多个 jQuery 的入口函数，执行顺序按照前后加载顺序执行
$(function () {
   // 操作1
})
$(function () {
  // 操作2
})

jQuery切换效果的方法

show()、hide()

hide()：元素隐藏，隐藏的前提必须是元素display:block;
show()：元素显示，显示的前提必须是元素display:none;
toggle()：在元素隐藏和显示之间进行切换。
这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。
参数： 如果不传参数，直接显示和隐藏，没有过渡动画。
如果传递参数：

• 单词格式："slow","normal","fast"
• 数字格式的时间，单位是亳秒，在规定时间之内会出现显示或隐藏的动画。过渡时间内，伴随着宽度和高度以及透明度的变化。

<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<input type="button" value="切换" id="btn3"><br>
<img src="images/cat.jpg" id="pic">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
    // 获取元素
    var $pic = $("#pic")
    var $btn1 = $("#btn1")
    var $btn2 = $("#btn2")
    var $btn3 = $("#btn3")
    // 添加点击事件，让图片实现显示和隐藏
    $btn1.click(function () {
        // $pic.hide("slow");
        $pic.hide(1000);
    })
    $btn2.click(function () {
        $pic.show("normal");
    })
    $btn3.click(function () {
        $pic.toggle("fast");
    })
</script>

slideDown()和slideUp()方法

slideDown()：滑动显示（方向不一定）
slideUp()：滑动隐藏
slideToggle()：滑动切换
让元素在display属性的block和none之间进行切换。
参数： 如果不传参数，默认过渡时间为400毫秒。
如果传递参数：

• 单词格式："slow","normal","fast"
• 数字格式的时间，单位是亳秒，在规定时间之内会出现显示或隐藏的动画。 注意：
• 如果滑动的元素没有设置宽高，没有滑动效果
• 如果元素设置了高度和宽度，会进行上下垂直方向的滑动
• 动画的效果：高度属性在0到设置值之间的变化，没有透明度动画。
• 如果元素设置了定位，偏移量方向如果是bottom参与了，滑动方向会发生变化。

<input type="button" value="滑动隐藏" id="btn1">
<input type="button" value="滑动显示" id="btn2">
<input type="button" value="滑动切换" id="btn3"><br>
<img src="images/cat.jpg" id="pic">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
    // 获取元素
    var $pic = $("#pic")
    var $btn1 = $("#btn1")
    var $btn2 = $("#btn2")
    var $btn3 = $("#btn3")
    // 添加点击事件，让图片实现滑动显示和隐藏
    $btn1.click(function () {
      $pic.slideUp(1000)
    })
    $btn2.click(function () {
      $pic.slideDown(1000)
    })
    $btn3.click(function () {
      $pic.slideToggle(1000)
    })
</script>

fadeIn()和fadeOut()方法

• fadeln()：淡入，透明度逐渐增大最终显示。
• fadeOut()：淡出，透明度逐渐降低最终隐藏。
• fadeToggle()：切换效果。
• fadeTo(时间, 透明度)：淡入或淡出到某个指定的透明度。
• 动画效果：执行的是透明度动画。也是在display属性的block和none之间进行切换。 参数： 如果不传参数，默认过渡时间为400毫秒。
  如果传递参数：
• 单词格式："slow","normal","fast"
• 数字格式的时间，单位是亳秒，在规定时间之内会出现显示或隐藏的动画。

<input type="button" value="淡出隐藏" id="btn1">
<input type="button" value="淡入显示" id="btn2">
<input type="button" value="淡入淡出切换" id="btn3">
<input type="button" value="fadeTo 0.5" id="btn4"><br>
<img src="images/cat.jpg" id="pic">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
    // 获取元素
    var $pic = $("#pic")
    var $btn1 = $("#btn1")
    var $btn2 = $("#btn2")
    var $btn3 = $("#btn3")
    var $btn4 = $("#btn4")
    // 添加点击事件，让图片实现淡入显示和淡出隐藏
    $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)
    })
</script>

animate()动画方法

animate()方法
作用：执行CSS属性集的自定义动画。
语法：$(selector).animate(styles,speed，easing,callback)
styles：css的属性名和运动结束位置的属性值的集合
speed：可选，规定动画的速度，默认是"normal"。其他值，“slow”，“normal”，“fast”，数字格式，单位为毫秒。
easing：可选，规定在不同的动画点中设置动画速度的easing函数，值包含swing（加减速）和linear（匀速）。
callback：可选，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"})
})

动画排队

• 同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
• 如果是不同的元素对象都有动画，不会出现排队枧制。
• 如果是的其他非运动的代码，也不会等待运动完成。
• 之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队。
• 同一个元素身上的运动，可以简化成链式调用的方法。

// 给同一个元素的多个运动进行链式调用写法
$box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

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)

清空动画排队

动画排队问题

如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队。
需要去清除排队的动画，进行防骚扰操作。

解决方法

方法一：
利用stop()方法。
在每一个运动函数之前都增加一个stop(true)，表示在运动执行之前，会将前面排队的动画清空，然后停止在当前位置。
方法二：
利用函数节流方法，如果元素在运动，直接return，不要执行后面的运动代码。
每个jQuery对象，都能调用一个is()方法，作用是显示元素对象的某种状态。
如果参数位置是is(":animated"),返回值是布尔值，true表示正在运动，false表示没有运动。
两种方法各有好处，我们可以根据需要来使用。

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：使用函数节流方式
$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)// 结合了方法一
})

下拉菜单动画

jQuery实现下拉菜单动画

手风琴轮播图

核心jQuery代码

// 获取所有的 li 标签
var $lis = $("#box ul li");
// 模拟后台提供的图片数据
var arr = ["fq1.jpg","fq2.jpg","fq3.jpg","fq4.jpg","fq5.jpg"];
// 记录文件路径
var path = "img/";
var during = 1000;
// 给每一个 li 去添加背景图
// 遍历方法
$lis.each(function (i) {
  // 存储路径
  var url = "url(" + path + arr[i] + ")";
  // this 指的是遍历的这一次的 li 元素
  $(this).css("background-image",url);
})
// 给每个 li 标签添加鼠标进入事件，让自己的宽度变为 800，让其他的兄弟变为 100
$lis.mouseenter(function () {
  $(this).stop(true).animate({"width": 800},during)
  .siblings().stop(true).animate({"width": 100},during)
})
// 给最外层的大盒子添加鼠标离开事件，让所有的 li 恢复默认宽度
$("#box").mouseleave(function () {
  $lis.stop(true).animate({"width": 240},during)
})

淡入淡出轮播图

核心jQuery代码

// 获取元素
var $ulLis = $(".slider ul li");
var $olLis = $(".slider ol li");
// 信号量编程
var idx = 0;
// 右按钮事件
$(".arrow-right").click(function () {
  // 函数节流，防骚扰
  if ($ulLis.eq(idx).is(":animated")) return;
  // 让当前这一个 li 去淡出隐藏
  $ulLis.eq(idx).fadeOut();
  // 让信号量自加
  idx++;
  if (idx > $ulLis.length - 1) {
    idx = 0;
  }
  move();
})
// 左按钮事件
$(".arrow-left").click(function () {
  // 函数节流，防骚扰
  if ($ulLis.eq(idx).is(":animated")) return;
  // 让当前这一个 li 去淡出隐藏
  $ulLis.eq(idx).fadeOut();
  // 让信号量自减
  idx--;
  if (idx < 0) {
    idx = $ulLis.length - 1;
  }
  move();
})
// 添加小圆点的事件
$olLis.click(function () {
  // 函数节流，防骚扰
  if ($ulLis.eq(idx).is(":animated")) return;
  // 让当前的这一个 li 去淡出隐藏
  $ulLis.eq(idx).fadeOut();
  // 找到点击的当前的小圆点对应的下标，赋值给信号量
  idx = $(this).index();
  move();
})
// 封装公共部分
function move () {
  // 让指定的一项 li 进行淡入显示
  $ulLis.eq(idx).fadeIn();
  $olLis.eq(idx).addClass("cur").siblings().removeClass("cur");
}