问题根源：jQuery对象与原生DOM元素
在使用jquery进行dom操作时，一个常见的误区是混淆了jquery对象与原生dom元素。当您执行$('.example p')这样的选择器操作时，jquery会返回一个jquery对象。这个jquery对象是一个类数组的集合，包含了所有匹配到的原生dom元素。
然而，当您尝试通过数组索引直接访问这个jQuery对象中的某个元素时，例如$('.example p')[1]，您实际上是在从这个类数组集合中提取一个原生DOM元素。原生DOM元素不具备jQuery对象特有的方法，如.offset()、.css()、.hide()等。因此，尝试在一个原生DOM元素上调用offset()方法，就会抛出TypeError: $(...)[1].offset is not a function的错误。
错误示例：
// 假设页面中有多个元素在 .example 容器内 //
// 尝试获取第二个第一个
第二个
第三个
元素的偏移量 console.log($('.example p')[1].offset().top); // 结果：Uncaught TypeError: $(...)[1].offset is not a function
解决方案：使用.eq()方法
为了正确地获取jQuery选择器结果中特定索引的元素，并仍然能够调用jQuery方法，您应该使用jQuery提供的.eq()方法。.eq(index)方法会返回一个新的jQuery对象，其中只包含原始集合中指定索引的那个元素。这样，您就可以继续在这个新的jQuery对象上调用所有jQuery方法。
正确使用.eq()方法：
// 获取第二个元素的偏移量 // .eq(1) 返回包含第二个
元素的 jQuery 对象 console.log($('.example p').eq(1).offset().top); // 结果：正确输出第二个
元素的顶部偏移量
遍历所有元素获取偏移量
在许多场景下，您可能需要获取所有匹配元素的偏移量，而不仅仅是某一个特定索引的元素。在这种情况下，使用.each()方法是更推荐和更灵活的做法。.each()方法允许您遍历jQuery对象中的每一个元素，并在回调函数中将当前元素包装成一个jQuery对象（通过$(this)），从而可以安全地调用offset()等方法。
使用.each()遍历获取所有元素的偏移量：
$('.example p').each(function(index) {
// `$(this)` 在回调函数中代表当前遍历到的元素，并已包装成 jQuery 对象
const $currentElement = $(this);
const offsetTop = $currentElement.offset().top;
console.log(`第 ${index + 1} 个 元素的顶部偏移量：${offsetTop}`);
});
综合示例代码：
jQuery 元素偏移量示例
这是第一个段落。
这是第二个段落。
这是第三个段落。
注意事项与总结
- 区分jQuery对象与原生DOM元素： 这是理解此类问题的关键。jQuery对象是jQuery方法调用的基础，而原生DOM元素则遵循标准的JavaScript DOM API。
- .eq(index)返回jQuery对象： 当你需要通过索引访问集合中的特定元素并继续使用jQuery方法时，请务必使用.eq(index)。
- [index]或.get(index)返回原生DOM元素： 如果你确实需要获取原生DOM元素来执行一些非jQuery的DOM操作，那么可以直接使用$('.selector')[index]或$('.selector').get(index)。
- .each()是遍历首选： 对于需要对jQuery集合中每个元素执行相同操作的场景，.each()方法是最高效和最符合jQuery哲学的方式。
通过掌握这些核心概念和方法，您将能够更有效地使用jQuery进行DOM操作，避免常见的TypeError，并编写出更加健壮和可维护的代码。
