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元素