基本选择器
- 全局选择器
$("*").css("font-size","30px");
- 标签选择器
$("p").css("color","blue");
- ID选择器:ID属性赋值要求不唯一 #
$("#a").css("font-weight","bold");
- class选择器:class属性赋值允许重复
$(".b").css("font-style","italic");
- 并集选择器:或者关系
$("#a,.b").css("background-color","yellow");
- 交集选择器:并且关系
$("p#a").css("text-indent","2em");
层次选择器
- 后代选择器:后代关系或者父子关系 空格
$("div li").css("list-style","none");
- 子选择器:必须是直接的父子关系 >
$("ul>li").css("color","red");
- 相邻兄弟选择器:找和我挨着的后面的兄弟标签 +
$("#er+li").css("background-color","black");
- 通用兄弟选择器:找我后面所有的兄弟标签 ~
$("#er~li").css("font-size","40px");
基本过滤选择器
单词 | 含义 |
---|
$(“li:first”) | 第一个li |
$(“li:last”) | 最后一个li |
$(“li:eq(2)”) | 下标为2的li |
$(“li:gt(2)”) | 下标大于2的li |
$(“li:lt(2)”) | 下标小于2的li |
$(“li:even”) | 下标为偶数的li |
$(“li:odd”) | 下标为奇数的li |
$(“body :header”) | 获取所有的标题 h1-h6 |
可见性过滤选择器
- $(“div:hidden”):获取被隐藏的div
- $(“div:visible”):获取可见的div