jQuery篇—进阶

jQuery进阶核心方法与动画效果详解

1. eq() 方法

   功能：从jQuery对象伪数组中按索引获取指定元素，索引从0开始，与DOM层级无关。

   示例：

   const ps = $("p");ps.eq(1).css("backgroundColor", "red"); // 将第二个<p>背景设为红色

2. index() 方法

   功能：返回元素在其兄弟节点中的位置索引（基于父元素子节点顺序）。

   示例：

   $("p").click(function() { console.log($(this).index()); // 点击时输出当前<p>在兄弟中的位置});

3. 排他思想应用（Tab栏切换）

   实现原理：通过相对路径定位元素，避免多个Tab栏冲突。

   代码逻辑：

   鼠标移入.title span时，添加current类并移除兄弟类。

   根据当前span的索引，定位对应.detail ul并切换显示。

   const span = $(".tab .title span");span.mouseenter(function() { $(this).addClass("current").siblings().removeClass("current"); $(this).parent().siblings(".detail").children("ul") .eq($(this).index()).addClass("current").siblings().removeClass("current");});

4. each() 方法

   功能：遍历jQuery对象，对每个元素执行回调函数，支持链式操作。

   参数：回调函数中的this指向当前DOM元素，i为当前索引。

   示例：

   隔列变色：遍历表格行，设置奇偶列背景色。

   $("table tr").each(function() { $(this).children(":even").css("backgroundColor", "skyblue"); $(this).children(":odd").css("backgroundColor", "yellow");});

   事件绑定：为所有<p>绑定点击事件，输出索引。

   $("p").each(function(i) { $(this).click(function() { console.log($(this).index(), i); // 输出事件源索引和大排序索引 });});

1. 原生JS

   window.onload：需等待所有资源（DOM、图片、音频等）加载完成后执行，同一页面只能定义一次。

   示例：

   window.onload = function() { console.log("资源加载完成"); };

2. jQuery

   $(document).ready()：仅需DOM树加载完成即可执行，可定义多次，按顺序执行。

   简化写法：$(function() { ... });

   示例：

   $(function() { console.log("DOM加载完成"); const tab = document.getElementsByTagName("table");});

1. 显示/隐藏

   show() / hide() / toggle()：通过display属性切换，支持动画参数（数字或关键字如"slow"）。

   示例：

   $("#btn1").click(() => $(".box").hide(1000)); // 1秒隐藏$("#btn2").click(() => $(".box").show("normal")); // 默认400ms显示$("#btn3").click(() => $(".box").toggle("fast")); // 快速切换

2. 滑动效果

   slideDown() / slideUp() / slideToggle()：通过高度变化实现滑动，依赖display: block/none。

   示例：

   $("#btn1").click(() => $(".box").slideUp()); // 默认400ms隐藏$("#btn2").click(() => $(".box").slideDown("fast")); // 快速显示$("#btn3").click(() => $(".box").slideToggle(500)); // 500ms切换

3. 淡入淡出

   fadeIn() / fadeOut() / fadeToggle() / fadeTo()：通过透明度变化实现动画。

   示例：

   $("#btn1").click(() => $(".box").fadeOut()); // 默认400ms淡出$("#btn2").click(() => $(".box").fadeIn("fast")); // 快速淡入$("#btn3").click(() => $(".box").fadeToggle(500)); // 500ms切换$("#btn4").click(() => $(".box").fadeTo(500, 0.5)); // 500ms淡入至50%透明度

1. animate()

   语法：$(selector).animate({styles}, speed, easing, callback)

   参数：

   styles：CSS属性键值对（需为数值属性，如left、opacity）。

   speed：动画时间（毫秒或关键字）。

   easing：速度曲线（swing默认，linear匀速）。

   callback：动画完成后执行的函数。

   示例：

   $("p").click(function() { $(this).animate({ left: 500 }, 1000, "linear", function() { $(this).css("backgroundColor", "red"); // 动画完成后变红 });});

2. 动画排队与链式调用

   排队机制：同一元素的多个动画按顺序执行。

   链式调用：通过方法链简化代码（如fadeOut().fadeIn()）。

   示例：

   $("p").fadeOut(500).fadeIn(500); // 淡出后立即淡入

3. 延迟与停止

   delay()：插入非动画延迟（仅影响后续动画）。

   stop()：停止动画，参数控制是否清空队列和立即完成。

   stop(true)：清空队列并停止当前动画。

   stop(true, true)：清空队列并立即完成当前动画。

   示例：

   $(".p1").delay(1000).animate({ left: 200 }, 500); // 延迟1秒后移动$(".p2").animate({ left: 200 }, 500); // 立即移动// 停止动画示例$("#btn1").click(() => $(".p1").stop(true)); // 清空队列并停止

总结：jQuery进阶方法通过eq()、index()、each()实现精准元素操作，结合排他思想优化交互；入口函数提升加载效率；切换与动画方法（如animate()、stop()）丰富动态效果，需注意动画排队与参数配置。