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");






