CSS选择器和jQuery选择器

css选择器

一、基本选择器

1、元素名/标签名选择器

div{css属性...} -- 匹配元素名为div的元素

2、class选择器

c1,c2{css属性...} -- 匹配所有class名为c1和c2的元素

3、id选择器

#10086{css属性...} -- 匹配id值为10086的元素

一个标签可以设置多个class，但只能设置一个id!!!!

二、扩展选择器

1、后代选择器

#d1 span{css属性...} -- 选中id为d1元素内部的所有span元素

2、子元素选择器

#d1>span{css属性...} -- 选中id为d1元素内部所有的span子元素

3、分组选择器

div,span,p{css属性...} -- 选中所有元素名为div、span和p的元素

4、属性选择器

input[type='text']{css属性...} -- 选中所有元素名为input且属性值type='text'的元素

5、伪类选择器

a:hover{css属性...} -- 当鼠标悬停在a元素上，a元素所具有的样式
div:first-child{css属性...} -- 匹配所有div中的第一个div
div:last-child{css属性...} -- 匹配所有div中的最后一个div

 

jQuery选择器

一、基本选择器

1、元素名(标签名)选择器
$("div") -- 匹配所有名称为div的元素
2、类选择器
$("div.mini") -- 匹配所有class值为mini的div元素
3、ID选择器
$("#one") -- 匹配id为one的元素

二、层级选择器

1、后代选择器
$("div span") -- 匹配所有div元素内部的span后代元素
2、子元素选择器
$("div > span") -- 匹配所有div元素内部的所有span子元素
3、相邻兄弟选择器
$("#two+span") -- 匹配id为two的元素的下一个相邻的span兄弟元素
$("#two").next("span") -- 匹配id为two的元素下一个相邻的span兄弟元素
$("#two").prev("span") -- 匹配id为two的元素上一个相邻的span兄弟元素
4、
$("#two~div") -- 匹配id为two的元素后面所有的div兄弟元素
$("#two").nextAll("div") -- 匹配id为two的元素之后的所有div兄弟元素
$("#two").prevAll("div") -- 匹配id为two的元素之前的所有div兄弟元素
$("#two").siblings("div") -- 匹配id为two的元素，前后所有的div兄弟元素

三、基本过滤选择器

1、xxx:first (第一个) | xxx:last (最后一个)
$("div:first") -- 匹配所有div元素中的第一个div元素
$("div:last") -- 匹配所有div元素中的最后一个div元素
2、xxx:eq(n) (相当于数组脚标)
$("div:eq(n)") -- 匹配所有div元素中的第(n+1)个div元素
$("div:eq(0)") -- 匹配所有div元素中的第1个div元素
var len = $("div").length -1; //获取div元素的总个数(相当于获取数组长度)
$("div:eq("+len+")") -- 已知div元素总个数匹配所有div中的最后一个div元素