jquery类选择器

jQuery 类选择器基本语法

使用 jQuery 选择类名为 example 的所有元素，语法为：

$(".example")

此语法类似于 CSS 的类选择器，返回包含所有匹配元素的 jQuery 对象。

类选择器的组合使用

类选择器可与其他选择器组合，实现更精确的匹配：

$("div.example")       // 选择类名为 "example" 的 div 元素  
$(".example.highlight") // 同时包含 "example" 和 "highlight" 类的元素  
$("ul .item")          // 选择 ul 元素下类名为 "item" 的子元素  

类选择器的常见操作

通过类选择器获取元素后，可执行多种操作：

$(".example").hide();     // 隐藏所有匹配元素  
$(".example").css("color", "red"); // 修改文字颜色  
$(".example").addClass("active");   // 添加新类名  
$(".example").removeClass("old");   // 移除指定类名  

动态过滤类选择器

结合过滤方法进一步筛选元素：

$(".example:first")      // 选择第一个匹配元素  
$(".example:even")       // 选择偶数索引位置的元素  
$(".example").filter(".special") // 筛选出同时含 "special" 类的元素  

性能优化建议

频繁使用类选择器时，建议通过上下文参数限制搜索范围：

$(".example", "#container") // 仅在 #container 内查找  
$("#container").find(".example") // 等效写法，性能更优  

注意事项

• 类选择器返回的是 jQuery 对象，需通过 .get() 或 [index] 转换为 DOM 元素。
• 动态生成的元素需确保在 DOM 加载完成后执行选择操作（如 $(document).ready()）。
• 类名区分大小写，需与 HTML 中的类名完全一致。