jQuery 对象操作 jq遍历对象及其实用技巧详解

🔥 jQuery对象操作：像逛超市一样轻松遍历DOM的实用技巧

场景引入：
小明最近接手了一个老项目，页面里密密麻麻的DOM元素像散落的乐高积木😵，他需要快速找到所有带data-discount属性的商品卡片，并给它们加上“限时特惠”标签，这时候，jQuery的对象遍历技巧就像他的购物车🛒——能精准抓取目标，还能批量操作！

jQuery对象基础认知

jQuery的核心是包装DOM元素后的伪数组对象，当你用$('div')选中页面所有<div>时，得到的不是一个原生DOM，而是一个可链式操作的jQuery对象：

// 获取的是包含所有div的jQuery对象
const $divs = $('div'); 
console.log($divs.length); // 像数组一样有length属性

👉 冷知识：即使没匹配到元素，jQuery对象也不会报错，而是返回空集合（length=0），这比原生document.querySelectorAll友好多了！

遍历对象四大金刚

1️⃣ .each()：最常用的遍历方法

像逛超市时逐个检查商品🧐：

$('.product').each(function(index, element) {
  // this === element（原生DOM）
  // $(this) 转jQuery对象
  if ($(this).data('discount')) {
    $(this).append('<span class="tag">限时特惠</span>');
  }
});

✨ 技巧：用return false可以提前终止循环（类似break）。

2️⃣ .map()：生成新数组

适合提取特定属性,像收银员扫码计价💰：

const prices = $('.product').map(function() {
  return $(this).data('price');
}).get(); // .get()转纯数组

3️⃣ 直接下标访问

jQuery对象支持数组下标语法：

const firstProduct = $('.product')[0]; // 返回原生DOM
const $firstProduct = $('.product').eq(0); // 返回jQuery对象

4️⃣ .find() + .children() 组合遍历

像在超市找特定货架的商品🛍️：

// 找到#cart下所有直系li中的input
$('#cart').children('li').find('input').addClass('highlight');

高阶技巧：过滤与链式操作

🔍 智能过滤 .filter()

// 找出价格大于100的商品
$('.product').filter(function() {
  return $(this).data('price') > 100;
}).css('border', '2px solid gold');

➕ 合并对象 .add()

像把两个购物车的商品合并🛒+🛒：

const $hot = $('.hot');
const $new = $('.new');
$hot.add($new).addClass('featured');

⚡ 性能优化TIP

缓存jQuery对象避免重复查询：

// 糟糕写法：每次循环都重新查询
$('.item').each(() => { $('.item').doSomething(); });
// 优秀写法：先缓存
const $items = $('.item');
$items.each(() => { $items.doSomething(); });

实战：一个动态表格处理案例

假设要统计表格中选中的行数据📊：

let total = 0;
$('tr').has('input:checked').each(function() {
  total += parseFloat($(this).find('.price').text());
});
$('#total').text(total.toFixed(2));

关键点：

• .has() 筛选包含特定元素的父级
• 链式调用保持代码简洁

2025年还值得学jQuery吗？🤔

尽管现代框架流行,但jQuery在以下场景依然能打：

• 快速原型开发 🚀
• 维护老项目 🛠️
• 简单的DOM操作（比原生API优雅得多）

记住：工具没有绝对优劣，只有是否适合当前场景。

（本文参考jQuery 3.7.1官方文档，2025-07更新）

练习时间：打开浏览器控制台，试试用$('*').css('outline', '1px solid red')给所有元素加边框——像X光一样透视页面结构吧！ 🔍