jQuery-选择器与滤镜

最新推荐文章于 2024-03-15 09:31:04 发布

原创最新推荐文章于 2024-03-15 09:31:04 发布 · 163 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #ViewUI

jQuery 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了jQuery中的各类选择器，包括基本选择器如ID选择器、类选择器等；层次选择器如后代选择器、孩子选择器等；滤镜选择器如位置控制滤镜、内容控制滤镜等；以及表单选择器等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.基本选择器
1.ID选择器：$("#temp").addClass("bgred");
2.类选择器：$(".temp").addClass("bgred");
3.合选择器:$("#temp,#test").addClass("bgred");
二.层次选择器:
1.后代选择器:$("form label").addClass("bgred");//只要label的上级有form则会应用上样式
2.孩子选择器:$("form > label").addClass("bgred");//当label的父标签是form则会应用上样式
3.兄弟选择器:$("form + label").addClass("bgred");//当form元素和label元素互为兄弟则会label元素应用上样式
4.兄弟链选择器(自己起的名字):$("form ~ label").addClass("bgred");//所有与form元素同级的label元素则会应用上样式
二.滤镜选择器:
1.位置控制滤镜
$("#dataTable tr:first").addClass("bgred");
$("#dataTable tr:last").addClass("bggreen");
$("#dataTable tr:odd").addClass("bggreen");
$("#dataTable tr:even").addClass("bggreen");
$("#dataTable tr:eq(1)").addClass("bgred");
$("#dataTable td:empty").addClass("bgred");
$("#dataTable td:parent").addClass("bgred");
$("#dataTable tr:hidden").show().addClass("bgred");
$("#dataTable tr:visible").addClass("bgred");
$("#dataTable tr:visible").hide();
2.内容控制滤镜
$("div.temp:contains('博客')").addClass("bgred");
$("div.temp:has(p)").addClass("bgred");//针对标签
$("div.temp:not(.withp)").addClass("bgred");
三.表单选择器:
1.内容滤镜
$("#loginForm :text").addClass("bgred");
$("#loginForm :password").addClass("bgred");
2.功能滤镜
$("#loginForm input:disabled").addClass("bggreen");
$("#loginForm input:enabled").addClass("bggreen");
$("#loginForm select option:selected").addClass("bggreen");
3.属性滤镜
$("#loginForm input[class][name=nickname]").addClass("bgred");