<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>
时间： 2024-07-28 17:55:21