jQuery :first-of-type选择器
:first-of-type选择器语法
$('selector:first-of-type')
:first-of-type选择器语法解析
如上语法,jQuery的代码会先执行selector选择器的匹配选择,比如选择所有class属性值为example的HTML元素,并将这些元素按不同的元素类型(比如p和span)组成多个同类型的元素集合,:first-of-type选择器则会从这些元素集合中查找class属性值为example的元素的父元素中第一个出现的class属性值为example的元素,而且不管该元素是不是第一子元素,都会被匹配选择,而且只会选择第一个出现的,后面出现的就不会被选择,这与:first-child选择器是不同的。这些文字理解起来可能有点拗口,有点绕,可以参考下方的实例代码在线运行所展示的效果来具象地辅助理解。
jQuery :first-of-type选择器实例代码
下面这个实例中,设计了两个div元素,并在该元素中包含了数个不同类型的HTML元素,其中第二个div中的div子元素和p子元素,都是div子元素集合和p子元素集合中的第一次出现的子元素,因此都将会被匹配选择:
<div>
<p class="xyz">段落</p>
<p>段落</p>
</div>
<div>
<span>span1</span><br>
<div class="xyz">div</div>
<p class="xyz">段落</p>
</div>
<button id="btn" class="btn">jQuery</button>
<script>
$('#btn').click(function(){
$('.xyz:first-of-type').css("font-size","2.5em");
})
</script>
免责声明:内容仅供参考,不保证正确性!