jQuery——子元素篩選器


子元素篩選器

名稱

:first-child

JQ語法

jQuery( "selector:first-child" )

說明

:first-child選擇器用於匹配作為父元素的第一個子元素的元素,將其封裝為jQuery對象並返回。:first-child選擇器等價於:nth-child(1)選擇器。

示例

名稱

:first-of-type

JQ語法

jQuery( "selector :first-of-type" )

說明

:first-of-type選擇器用於匹配作為父元素的第一個該類型的子元素的元素,將其封裝為jQuery對象並返回。:first-of-type選擇器等價於:nth-of-type(1)選擇器。指定的元素必須是父元素的子元素中第一個該類型的元素,才符合匹配條件。例如,li:first-of-type選擇器的匹配條件是:該<li>元素必須是父元素的所有<li>類型的子元素中的第一個元素。與該選擇器相對的是:last-of-type選擇器,用於匹配作為父元素的最后一個該類型的子元素的元素。

示例

名稱

:last-child

JQ語法

jQuery( "selector:last-child" )

說明

:last-child選擇器用於匹配作為父元素的最后一個子元素的元素,將其封裝為jQuery對象並返回

示例

名稱

:last-of-type

JQ語法

jQuery( "selector:last-of-type" )

說明

:last-of-type選擇器用於匹配作為父元素的最后一個該類型的子元素的元素,將其封裝為jQuery對象並返回。:last-of-type選擇器等價於:nth-last-of-type(1)選擇器。

 

指定的元素必須是父元素的子元素中最后一個該類型的元素,才符合匹配條件。例如,li:last-of-type選擇器的匹配條件是:該<li>元素必須是父元素的所有<li>類型的子元素中的最后一個元素。

示例

名稱

:nth-child

JQ語法

jQuery( "selector:nth-child(n)" )

說明

jQuery的:nth-child(n)選擇器用於匹配作為父元素下的第n個(或特定順序的)子元素的元素,將其封裝為jQuery對象並返回。

與該選擇器相對的是:nth-last-child(n)選擇器,用於匹配作為父元素下的倒數第n個(或符合特定倒數順序的)子元素。

注意::nth-child(n)選擇器與:eq(index)選擇器的不同之處在於:

:eq(index)選擇器只匹配一個元素,並且是所有匹配到的元素中的第index + 1個元素(索引index從0開始算起);

:nth-child(n)選擇器則需要判斷匹配到的元素是否是其父元素的第n個子元素或符合其他特定要求(序號n從1開始算起),如果是就保留,否則將被舍棄。

示例

名稱

:nth-last-child()

JQ語法

jQuery( "selector:nth-last-child(n)" )

說明

:nth-last-child(n)選擇器用於匹配作為父元素下的倒數第n個子元素或符合特定順序規則的元素,將其封裝為jQuery對象並返回。

 

與該選擇器相對的是:nth-child(n)選擇器,用於匹配作為父元素下的第n個子元素或符合特定順序規則的元素。

示例

名稱

:nth-of-type()

JQ語法

jQuery( "selector:nth-of-type(n)" )

說明

:nth-of-type(n)選擇器用於匹配作為父元素的同類型子元素中的第n個(或符合特定順序的)元素,將其封裝為jQuery對象並返回。

 

例如,li:nth-of-type(2)選擇器的匹配條件是:該<li>元素必須是父元素的所有<li>類型的子元素中的第2個元素。

 

與該選擇器相對的是:nth-last-of-type(n)選擇器,用於匹配作為父元素的同類型子元素中的倒數第n個(或符合特定倒數順序的)元素。

示例

名稱

:nth-last-of-type()

JQ語法

selector:nth-last-of-type(n)

說明

:nth-last-of-type(n)選擇器用於匹配作為父元素的同類型子元素中的倒數第n個(或符合特定倒數順序的)元素,將其封裝為jQuery對象並返回。

 

例如,li:nth-last-of-type(2)選擇器的匹配條件是:該<li>元素必須是父元素的所有<li>類型的子元素中的倒數第2個元素。

 

與該選擇器相對的是:nth-of-type(n)選擇器,用於匹配作為父元素的同類型子元素中的第n個(或符合特定順序的)元素。

示例

名稱

:only-child

JQ語法

jQuery( "selector:only-child" )

說明

:only-child選擇器用於匹配作為父元素的唯一子元素的元素,將其封裝為jQuery對象並返回。

示例

名稱

:only-of-type

JQ語法

jQuery( "selector:only-of-type" )

說明

:only-of-type選擇器用於匹配作為父元素唯一一個該類型的子元素的元素,將其封裝為jQuery對象並返回。

例如,li:only-of-type選擇器的匹配條件是:該<li>元素必須是父元素中的唯一一個<li>類型的子元素。

注意::only-of-type選擇器最好在$(document).ready(callback)的函數參數callback中使用,否則在Chrome瀏覽器中可能會出現無法匹配到某些元素的問題(例如下面HTML示例代碼中的n1)

示例


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM