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'});