1.基本选择器
选择器 | 描述 | 返回 | 示例 | 代码说明 | |
1 | id选择器 | 根据指定的id匹配元素 | 单个元素 | $("#one").css("background","#bbffaa"); | 找到id为one的元素，改变其background属性 |
2 | class选择器 | 根据给定的类名匹配元素 | 集合元素 | $(".mini").css("background","#1f496c"); | 找到class为mini的所有元素，改变其background属性 |
3 | element | 根据给定的元素名匹配元素 | 集合元素 | $("div").css("background","#bbffaa"); | 找到所有的div元素，改变其background属性 |
4 | * | 匹配所有元素 | 集合元素 | $("*").css("background","#bbffaa"); | 选取所有的元素 |
5 | select1，select2，......selectN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("span , #two").css("background","#bbffaa"); | 改变所有的span元素和id为two的元素的背景色 |
选择器 | 描述 | 返回 | 示例 | 代码说明 | |
1 | $("ancestor descendant) | 选取ancestor元素里的所有descendant元素 | 集合元素 | $("body div").css("background","#bbffaa"); | 选取所有body下的div元素，改变背景色 |
2 | $("parent>child") | 选取parent元素下的子元素 | 集合元素 | $("body>div").css("background","#bbffaa"); | 选取body下的元素名称为div的子元素 |
3 | $("prev+next") | 选择紧接在prev元素后的next元素 | 集合元素 | $(".one+div").css("background","#bbffaa"); | 改变class为one的下一个div同辈元素的背景色 |
4 | $("prev~sibling") | 选择紧接在prev元素后的sibling 元素 | 集合元素 | $("#two~div").css("background","#bbffaa"); | 改变id为two的元素后面的所有div同辈元素的背景色 |
3.过滤选择器
3.1基本过滤选择器
选择器 | 描述 | 返回 | 示例 | 代码说明 | |
1 | :first | 选取第一个元素 | 单个元素 | $("div:first").css("background","#bbffaa"); | 改变第一个div的颜色 |
2 | :last | 选取最后一个元素 | 单个元素 | $("div:last").css("background","#bbffaa"); | 改变最后一个div的颜色 |
3 | :not(selector) | 去掉所有与给定的选择器的元素 | 集合元素 | $("div:not(.one)").css("background","#bbffaa"); | 改变class不为one的div元素的背景色 |
4 | :even | 选取索引为偶数的元素 | 集合元素 | $("div:even").css("background","#bbffaa"); | 改变索引值为偶数的div的背景色 |
5 | :odd | 选取索引为奇数的元素 | 集合元素 | $("div:odd").css("background","#bbffaa"); | 改变索引值为奇数的div的背景色 |
6 | :eq(index) | 选取索引值为index的元素，index 从0开始 | 单个元素 | $("div:eq(3)").css("background","#bbffaa"); | 改变索引值为3的div的背景色 |
7 | :gt(index) | 选取索引值大于index的元素，index 从0开始 | 集合元素 | $("div:gt(3)").css("background","#bbffaa"); | 改变索引值大于3的div的背景色 |
8 | :lt(index) | 选取索引值小于index的元素，index 从0开始 | 集合元素 | $("div:lt(3)").css("background","#bbffaa"); | 改变索引值小于3的div的背景色 |
9 | :header | 选取所有的标题元素 | 集合元素 | $(":header").css("background","#bbffaa"); | 改变所有标题（h1，h2等）元素背景色 |
10 | :focus | 选取当前焦点的元素 | 单个元素 | $(":focus ").css("background","#bbffaa"); | 改变当前获得焦点的元素的背景色 |
选择器 | 描述 | 返回 | 示例 | 代码说明 | |
1 | :contains(text) | 选取含有文本内容为text的文本元素 | 集合元素 | $("div:contains(我)").css("background","#bbffaa"); | 改变含有文本“我”的div的元素的背景色 |
2 | :empty | 选取不包含子元素或者文本的元素 | 集合元素 | $("div:empty").css("background","#bbffaa"); | 改变不包含文本（或子元素）的div的背景色 |
3 | :has(select) | 选取选择器所匹配的元素的元素 | 集合元素 | $("div:has('.mini')").css("background","#bbffaa"); | 改变div里面包含clss为mini的元素的div的背景色 |
4 | :parent | 选取包含含子元素或者文本的元素 | 集合元素 | $("div:parent").css("background","#bbffaa"); | 改变包含文本（或子元素）的div的背景色 |
选择器 | 描述 | 返回 | 示例 | 代码说明 | |
1 | [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]").css("background","#bbffaa"); | 改变具有id属性的div的背景色 |
2 | [attribute=value] | 选取属性的值为value的元素 | 集合元素 | $("div[id=one]").css("background","#bbffaa"); | 改变具有id属性为one的div的背景色 |
3 | [attribute!=value] | 选取属性的值不为value的元素 | 集合元素 | $("div[id!=one]").css("background","#bbffaa"); | 改变具有id属性不为one的div的背景色 |
4 | [attribute^=value] | 选取属性的值以value开始元素 | 集合元素 | $("div[title^=te]").css("background","#bbffaa"); | 改变title值为te开头的div元素的背景色 |
5 | [attribute$=value] | 选取属性的值以value结尾的元素 | 集合元素 | $("div[title$=s]").css("background","#bbffaa"); | 改变title值为s结尾的div元素的背景色 |
6 | [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("div[title*=s]").css("background","#bbffaa"); | 改变title值含有s的div元素的背景色 |
7 | [attribute|=value] | 选取属性等于给定字符串或以该字符串为前缀（该字符串后面跟一个连接符(-)）的元素 | 集合元素 | $("div[title|=test]").css("background","#bbffaa"); | 改变title值为test或者该字符串后面跟-符号的div的元素的背景色 |
8 | [attribute~=value] | 选取属性用空格分割的值中包含一个给定值的元素 | 集合元素 | $("div[title~=test]").css("background","#bbffaa"); | 改变title用空格分割的值中包含字符test的div的元素的背景色 |
9 | [arrtibute1][arrtibute2][arrtibute3] | 合并为符合选择器 | 集合元素 | $("div[id=one][title^=te]").css("background","#bbffaa"); | 改变id属性为one并且title属性以te开头的div元素的背景色 |
3.4子元素滤选择器
选择器 | 描述 | 返回 | 示例 | 代码说明 | |
1 | :nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素，或者奇偶元素 | 集合元素 | $("div .one :nth-child(2)").css("background","#bbffaa"); | 改变class为one的div父元素下的第二个元素的背景色 |
2 | :first-child | 选取每个父元素下的第一个子元素 | 集合元素 | $("div .one :first-child").css("background","#bbffaa"); | 改变class为one的div的父元素下的第一个子元素的背景色 |
3 | :last-child | 选取每个父元素下的最后一个子元素 | 集合元素 | $("div .one :last-child").css("background","#bbffaa"); | 改变class为one的div的父元素下的最后一个子元素的背景色 |
4 | :only-child | 如果每个元素是他父元素中唯一的子元素，那么将会被选择，父元素中不含其他元素，不会被匹配 | 集合元素 | $("div .one :only-child").css("background","#bbffaa"); | 如果class为one的div父元素下只有一个子元素，改变子元素的背景色 |
