<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>
jQuery 十三中选择器总结
原文地址:http://www.cnblogs.com/ckxlovejava/p/7449296.html