jquery类选择器

jQuery 类选择器基础用法

类选择器在 jQuery 中通过 .className 语法实现，用于选取所有带有指定 class 的 DOM 元素。例如选取所有 active 类的元素：

$('.active').css('color', 'red');

多类名选择

可以组合多个类名进行更精确的选择。例如选取同时具有 btn 和 primary 类的元素：

$('.btn.primary').hide();

上下文中的类选择器

可以在特定父元素范围内查找类名匹配的元素。例如在 #container 内查找 .item：

$('.item', '#container').addClass('highlight');
// 等效于
$('#container').find('.item').addClass('highlight');

动态操作类名

通过类选择器获取元素后，可动态修改类名：

$('.target').addClass('new-class');    // 添加类
$('.target').removeClass('old-class'); // 移除类
$('.target').toggleClass('active');   // 切换类

类选择器结合其他选择器

类选择器可与标签选择器、属性选择器等组合使用：

$('div.header').css('background', 'blue');      // 类名 + 标签
$('.menu[data-collapsed]').fadeIn();            // 类名 + 属性

性能注意事项

过度使用类选择器可能影响性能，尤其在大型 DOM 中。建议：

• 尽量结合上下文缩小查找范围
• 对重复使用的选择器结果进行缓存

  var $elements = $('.reused-class');
  $elements.hide();
  $elements.addClass('processed');

与 CSS 类选择器的区别

jQuery 类选择器与 CSS 语法一致，但返回的是 jQuery 对象（包含 DOM 元素的集合），而非原生 DOM 节点。可通过索引或 .get() 方法获取原生元素：

$('.item')[0];     // 获取第一个原生 DOM 元素
$('.item').get(1); // 获取第二个原生 DOM 元素