<body style="overflow: scroll;"> <h1>我的测试</h1> <div id="111"> <p class="first">第一个p标签</p> <p class="second"> 第二个p标签 <span>span拼接</span> </p> <p class="three">第三个p标签</p> <p class="four">第四个p标签</p> </div> <div id="222"> <div id="no1"><a href="">第一个div</a></div> <div id="no2">第二个div</div> <div id="no3">第三个div</div> <div id="no4">第四个div</div> </div> <div id="333"> <table cellspacing="1" cellpadding="5"> <tr> <td>11</td> <td>11</td> </tr> <tr> <td>22</td> <td>22</td> </tr> <tr> <td>33</td> <td>33</td> </tr> <tr> <td>44</td> <td>44</td> </tr> </table> </div> </body>
js:
<script type="text/javascript"> /* jquery 14种标签选择器 */ $(function(){ //一： id选择器：为标签元素设置一个id，并用#id去空值元素 //$('#no2').css('color','blue'); //二： class选择器 //$('.four').css('color','blue'); //三：标签选择器 : 多种标签可混合中间以“,”隔开 //$('p,div').css('color','red'); //四：任意组合选择： //$('p.first,div#no2').css('color','red'); //$('.second,#no3').css('color','red'); //五：指定父元素下所有子元素 //$('#111 span').css('color','red'); //六：prev + next : 匹配所有紧接在 prev 元素后的 next 元素:只能是两个紧接的元素可用。中间有隔开都无效。 //$('h1+div').css('color','red'); //七：prev ~ siblings : 匹配 prev 元素之后的所有 siblings 同辈元素 //$('h1~div').css('color','red'); //八：获取标签第一个元素 //$("p:first").css('color','red'); //九：last : 获取最后个元素 //$("div:last").css('color','red'); //十：even : 匹配所有索引值为偶数的元素，从 0 开始计数 //$("tr:even").css('color','red'); //十一：odd : 匹配所有索引值为奇数的元素，从 0 开始计数 //$("tr:odd").css('color','blue'); //十二：除去给定选择器的所有元素 //$("p:not(.three)").css('color','red'); //十三：gt(index) : 匹配所有大于等于、小于给定索引值的元素 /* $("p:gt(1)").css('color','red'); $("p:eq(1)").css('color','green'); $("p:lt(1)").css('color','blue'); */ //十四：匹配所有：* $("*").css('color','blue'); }); </script>