18.選擇器 · 程序員開發筆記

eg: <div id="hd"> 后盾人人人做后盾0 后盾人人人做后盾1 1111111 后盾人人人做后盾2 后盾人人人做后盾3 后盾人人人做后盾4 123 后盾人人人做后盾5 后盾人人人做后盾6 123 后盾人人人做后盾7 <div> 我們也是p標簽8 我們也是p標簽9 我們也是p標簽10 </div> </div> 給8、9、10 添加樣式 $("#hd>div p").css({'color':'blue','font-size':'25px'}); 給id=one添加樣式（1） $("#one").css({'color':'blue','font-size':'25px'}); 選擇的是緊鄰在#one后面的p標簽 (2) $("#one+p").css({'color':'blue','font-size':'25px'}); 選擇的是#one后面所有同級p標簽 (2-7) $("#one~p").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里第一個p標簽 (0) $("#hd p:first").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里最后一個p標簽（最后一個空標簽） $("#hd p:last").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里的p標簽,排除掉id是one的（0，2，3，4，5，6，7，8，9，10） $("#hd p:not(#one)").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里序號是偶數的p標簽（0，2，4，6，8，10） $("#hd p:even").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里序號是奇數數的p標簽（1，3，5，7，9） $("#hd p:odd").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里的3號p標簽（2） $("#hd p:eq(3)").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里序號大于3的p標簽（3-10） $("#hd p:gt(3)").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里序號小于3的p標簽（0-2） $("#hd p:lt(3)").css({'color':'blue','font-size':'25px'}); 選擇的是內容中包含盾3 的p標簽（3） $("#hd p:contains(盾3)").css({'color':'blue','font-size':'25px'}); 選擇#hd里空的p標簽（最后的空標簽） $("#hd p:empty").css({width:'300px',height:'50px',background:'blue'}); 選擇的是#hd里非空的p標簽（0-10） $("#hd p:parent").css({width:'300px',height:'50px',background:'blue'}); 選擇的是含有span標簽的p標簽（4，6） $("#hd p:has(span)").css({'color':'blue','font-size':'25px'}); 選擇有name屬性的p標簽（3,6,7） $("#hd p[name]").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里name屬性值等于abc的p標簽（6，7） $("#hd p[name=abc]").css({'color':'blue','font-size':'25px'}); 選擇的是#hd里hd屬性值等于houdunren的p標簽（2） $("#hd p[hd=houdunren]").css({'color':'blue','font-size':'25px'}); 選擇的是name屬性值以a開頭的p標簽（3,6,7） $("#hd p[name^=a]").css({'color':'blue','font-size':'25px'}); 選擇的是name屬性值以t結尾的p標簽（3） $("#hd p[name$=t]").css({'color':'blue','font-size':'25px'}); 選擇的是name屬性值中有b的p標簽（3,6,7） $("#hd p[name*=b]").css({'color':'blue','font-size':'25px'}); 選擇的是#hd中有class屬性并且hd屬性以h開頭的p標簽（2） $("#hd p[class][hd^=h]").css({'color':'blue','font-size':'25px'}); eg: <ul> <li>后盾人人人做后盾1</li> <li>后盾人人人做后盾2</li> <li>后盾人人人做后盾3</li> <li>后盾人人人做后盾4</li> <li>后盾人人人做后盾5</li> </ul> <ul> 12 <li>后盾人人人做后盾6</li> <li>后盾人人人做后盾7</li> <li>后盾人人人做后盾8</li> <li>后盾人人人做后盾9</li> <li>后盾人人人做后盾10</li> 13 </ul> <ul> 11 <li>我也是li11</li> </ul> 選擇ul li 中的第一個（1） $("ul li:first").css({'color':'blue','font-size':'25px'}); 選擇的是ul里的li的父級元素中的第一個子元素(要求這個子元素是li標簽) $("ul li:first-child").css({'color':'blue','font-size':'25px'}); （1）（6//必須開頭是li標簽才能被選中。） $("ul li:nth-child(1)").css({'color':'blue','font-size':'25px'}); （1）（6//必須開頭是li標簽才能被選中。） $("ul li:nth-child(2)").css({'color':'blue','font-size':'25px'}); （2，6，11） $("ul li:nth-last-child(2)").css({'color':'blue','font-size':'25px'}); （9，4）選擇的是ul里的li的父級元素中的最后一個子元素(要求這個子元素是li標簽) $("ul li:last-child").css({'color':'blue','font-size':'25px'}); （5，11）（10//必須結尾是li標簽才能被選中。）選擇的是ul里面的獨生子li(要求這個li沒有任何兄弟元素) <ul> <li>我也是li11</li> </ul> $("ul li:only-child").css({'color':'blue','font-size':'25px'}); 選擇的是ul里面的第一個li標簽，存在其他標簽也可以被選中（1，6，11） $("ul li:nth-of-type(1)").css({'color':'blue','font-size':'25px'}); $("ul li:first-of-type").css({'color':'blue','font-size':'25px'}); 選擇的是ul里面的最后一個li標簽（5，10，11） $("ul li:last-of-type").css({'color':'blue','font-size':'25px'}); 選擇倒數第二個li標簽（5，10） $("ul li:nth-last-of-type(2)").css({'color':'blue','font-size':'25px'}); 選擇的是ul里面的獨生子li(要求這個li沒有任何兄弟元素) (11) $("ul li:only-of-type").css({'color':'blue','font-size':'25px'});