jQuery 选择器与筛选：把旧页面交互改成可维护结构

这篇旧课件把选择器、隔行变色、下拉菜单、产品切换和高亮练习放在一起。维护时要先让 HTML 表达真实内容关系，再用选择器找到最小作用范围；不要把鼠标悬停效果当作唯一交互，也不要在每个元素上重复绑定相同逻辑。

交集、并集与层级选择

交集选择器会选中同时满足条件的元素，例如 li.featured；逗号表示并集，例如 #primary, .fallback。空格选择任意层后代，> 只选择直接子元素。复杂层级选择器读起来容易脆弱，优先通过稳定的组件根节点缩小查询范围，再用 .find()、.children() 做显式遍历。

const $catalog = $('#catalog');
const $featured = $catalog.find('li.featured');
const $actions = $catalog.find('button, a.action');

$featured.addClass('is-highlighted');

在用户输入的文本、查询参数或后端返回值中，不要直接拼接成 CSS 选择器；优先用 getElementById、数据映射或过滤回调，避免选择器注入和特殊字符转义错误。

索引筛选和集合方法

课件里的 :odd、:even 是 jQuery 扩展筛选，序号从 0 开始：:odd 选集合中第二、第四项。CSS :nth-child(odd) 则按 1 开始计数，二者的“奇数”不是同一批元素。需要可预测的样式时优先用 CSS；需要按业务条件筛选时用 .filter()、.not()、.first()、.last()、.eq(index)，并把索引含义写清楚。

const $rows = $('#results').children('li');
$rows.filter((index) => index % 2 === 1).addClass('is-alternate');

$rows.filter((index, element) => {
  return element.dataset.status === 'featured' && index < 5;
}).addClass('is-featured');

回调筛选时首参是索引、次参是 DOM 元素，this 也指向当前元素。集合可能为空，eq() 越界后同样得到空 jQuery 集合；调用前判断是否存在，别把空集合误当成运行时异常。

菜单和产品面板要有真实控件语义

菜单导航用链接表达跳转，展开/收起用 button 表达状态变化。每个按钮提供可见名称和同步的 aria-expanded，键盘焦点清晰；不要只用 hover()、鼠标进入或颜色差异传达状态。触屏没有 hover，键盘用户也需要相同能力。

隔行颜色、当前产品图和高亮背景属于表现状态，使用 CSS 类名而不是在事件中反复写行内颜色。把多个事件委托到稳定的容器，后续生成的列表项也能工作；事件委托的容器应靠近目标区域，避免把所有业务事件都挂在 document 上。

旧页面改造清单

1. 用浏览器开发者工具确认匹配数量、最近的组件根和真实 DOM 层级，再调整选择器。
2. 选出零条、一条、重复项和动态新增项，分别验证筛选与状态更新。
3. 把视觉状态迁到 CSS 类，不用旧 :odd 规则承担复杂业务逻辑。
4. 给下拉菜单和产品切换补键盘、触屏、焦点与可见状态。
5. 用户内容用 .text() 或 textContent 输出，不把不可信字符串传给 .html()。

参考：jQuery on、jQuery selectors、jQuery filter、MDN CSS nth-child、MDN Element.matches、OWASP XSS Prevention。