jquery类选择器

jQuery类选择器基础

类选择器在jQuery中用于选取具有特定class属性的HTML元素。语法为$(".className")，其中className是目标元素的class名。例如，选取所有class为highlight的元素：

$(".highlight").css("background-color", "yellow");

多类选择器

可以同时匹配多个类名的元素。通过连续书写类名（不加空格）实现多条件筛选。例如选取同时具有active和error类的元素：

$(".active.error").hide();

结合元素类型

类选择器可与元素标签组合使用，实现更精确的定位。语法为$("element.class")。例如选择所有<div>中class为container的元素：

$("div.container").addClass("border");

方法链式操作

jQuery支持对选中的元素进行链式方法调用。例如先隐藏再渐变显示所有tooltip类元素：

$(".tooltip").hide().fadeIn(1000);

动态类检测

使用hasClass()方法可检查元素是否包含特定类。返回布尔值，常用于条件判断：

if ($("#item").hasClass("selected")) {
  // 执行操作
}

类操作函数

jQuery提供类名修改方法：

• addClass("newClass")：添加类
• removeClass("oldClass")：移除类
• toggleClass("switchClass")：切换类存在状态

示例切换active类：

$(".btn").click(function(){
  $(this).toggleClass("active");
});

性能优化建议

频繁操作类选择器时，建议缓存jQuery对象：

var $elements = $(".repeated-class");
$elements.hide();
// 后续复用$elements

注意事项

类选择器会返回所有匹配元素组成的集合。操作前需确认目标范围，必要时用find()或children()缩小范围：

$("#sidebar").find(".widget").css("color", "blue");