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>

免责声明：内容仅供参考，不保证正确性！

hot：热门