關於jquery選擇器中:first和:first-child和:first-of-type的區別及:nth-child()和:nth-of-type()的區別

時間 2019-11-11

標籤關於 jquery 選擇器 child type 區別 nth 欄目 JQuery 简体版

原文原文鏈接

:first：選擇第一個出現符合的元素測試

:first-child：選擇限制條件中的第一個元素，而且必須和冒號前面的標籤一致blog

:first-of-type：選擇全部限制條件下的第一個冒號前面的標籤元素，此標籤能夠不是第一個ip

測試:first代碼：io

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<a>Hello1</a>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:first").text();
        alert($zzz);
});
</script>
</body>

其中結果爲：function

測試:first-child代碼：im

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:first-child").text();
        alert($zzz);
});
</script>
</body>

其中結果爲：d3

測試:first-of-type代碼：img

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<a>Hello1</a>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:first-of-type").text();
        alert($zzz);
});
</script>
</body>

其中結果爲：di

怎麼樣，很好理解吧，研究了好半天的呀！標籤

下面是補充的:nth-child()和:nth-of-type()區別

:nth-child：是選擇父元素下的第幾個元素，不分標籤類別，計數從1開始

:nth-of-type：是選擇父元素下的同類型元素的第幾個元素。區分標籤類別，計數從1開始

測試:nth-child()代碼：

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:nth-child(3)").text();
        alert($zzz);
});
</script>
</body>

其中結果爲：

測試:nth-of-type()代碼：

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:nth-of-type(3)").text();
        alert($zzz);
});
</script>
</body>

其中結果爲：