jQuery 选择器(61种)整理总结

2020-05-29 07:01:04易采站长站整理

结果:

这是第一个div标签

这是第二个div标签

这是第三个div标签

36. [attrSel1][attrSel2][attrSelN] : 复合属性选择器,需要同时满足多个条件时使用


<div id="myDiv" class="myDivOne">这是第一个div标签</div>
<div class="not">这是第二个div标签</div>
<div class="myDivTwo">这是第三个div标签</div>
<script type="text/javascript">
$(function(){
$("div[id][class*='Div']").css("color","red");
});
</script>

结果:

这是第一个div标签

这是第二个div标签

这是第三个div标签

37. :first-child : 匹配第一个子元素,类似的 :first 匹配第一个元素,而此选择符将为每个父元素匹配一个子元素


<div>
<p>这是第一个div中的第一个p标签</p>
<p>这是第一个div中的第二个p标签</p>
</div>
<div>
<p>这是第二个div中的第一个p标签</p>
<p>这是第二个div中的第二个p标签</p>
</div>
<script type="text/javascript">
$(function(){
$("div p:first-child").css("color","red");
});
</script>

结果:

这是第一个div中的第一个p标签

这是第一个div中的第二个p标签

这是第二个div中的第一个p标签

这是第二个div中的第二个p标签

38. :first-of-type : 结构化伪类,匹配E的父元素的第一个E类型的子元素


<div>
<div>这是第一个div中的div标签</div>
<p>这是第一个div中的第一个p标签</p>
<p>这是第一个div中的第二个p标签</p>
</div>
<div>
<p>这是第二个div中的第一个p标签</p>
<p>这是第二个div中的第二个p标签</p>
</div>
<script type="text/javascript">
$(function(){
$("p:first-of-type").css("color","red");
});
</script>

结果:

这是第一个div中div标签

这是第一个div中的第一个p标签

这是第一个div中的第二个p标签

这是第二个div中的第一个p标签

这是第二个div中的第二个p标签

39. :last-child : 匹配最后一个子元素,类似的 :last 只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素


<div>
<p>这是第一个div中的第一个p标签</p>
<p>这是第一个div中的第二个p标签</p>
</div>
<div>
<p>这是第二个div中的第一个p标签</p>