jQuery :only-of-type选择器实例详解

发布时间:2024年01月19日

:only-of-type选择器语法

$('selector:only-of-type')

:only-of-type选择器语法解析

在作有关:only-of-type选择器语法的解析之前,我们来先看一个:only-of-type选择器的实例代码,可以在线运行看看效果:

<div>
  <p class="e">段落1</p>
  <span class="e">span1</span>
</div>
<div>
  <p class="e">段落2</p>
  <p class="e">段落3</p>
</div>

<button id="test" class="btn">jQuery</button>

<script>
  $('#test').click(function(){
    $('.e:only-of-type').css("font-size","3.5em");
  })
</script>

语法解析:结合上面的实例,现在开始解析:only-of-type选择器的语法。如上实例,运行之后,只有第一个div中的p元素和span元素被选择,而第二个div中的两个p元素都不会被选择。这是因为,:only-of-type选择器只会匹配class为e的元素的父元素中类属性为e且元素类型也是唯一的子元素,比如第一个div中p子元素是唯一的,span也是唯一的,而第二个div中class为e的p元素有两个。

即:only-of-type选择器匹配选择的子元素必须是与selector选择器类型相同(比如类属性)且元素类型唯一的子元素!

来源笨鸟工具

原文jQuery :only-of-type选择器

免责声明:内容仅供参考,不保证正确性!

文章来源:https://blog.csdn.net/weixin_47378963/article/details/135688196
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。