jQuery CSS選擇器詳解

一、jQuery Class選擇器

1、在CSS中，class選擇器有一個點來表示。在jQuery選擇器中，class選擇器也用一個點來表示。例如，選取class為“example”的元素：

$(' .example')

2、可以在一起選擇多個class名相同的元素。舉例：

$(' .example, .sample')

3、也可以選擇某一個父級下特定class名的元素。舉例：

$('div .example')

二、jQuery CSS選擇器可分為

1、基本選擇器：使用標籤名稱、ID或class名稱來選取元素。

2、層次選擇器：匹配位於某個元素之下的元素。

3、屬性選擇器：選擇具有特定屬性的元素。

4、篩選選擇器：通過匹配特定的選擇條件來篩選出元素。

三、jQuery選擇器的分類

1、基本選擇器

這種選擇器是根據元素的標籤名稱、ID或者class等基本屬性來選取元素。

$('p')

選取所有段落元素。

$('#example')

選擇ID為“example”的元素。

$('.example')

選擇class為“example”的元素。

2、層次選擇器

這種選擇器是根據元素在HTML文檔中的層次順序進行選取，比較常用的有上文提到的父子選擇器，當然，還有其他的層次選擇器。

$('p span')

選取所有包含在段落中的span元素。

$('parent>child')

選取所有在parent元素下的child元素。

3、屬性選擇器

這種選擇器是通過元素的屬性來選取元素，有三種：

• 選擇所有包含特定屬性的元素
• 選擇所有屬性值等於特定值的元素
• 選擇所有屬性值以特定值開頭、包含特定值、以特定值結尾的元素

$('[href]')

選擇所有包含“href”屬性的元素。

$('[name=example]')

選擇所有name屬性等於“example”的元素。

$('[class^=ex]')

選擇所有class屬性以“ex”開頭的元素。

4、篩選選擇器

這種選擇器是通過某些條件來篩選出合適的元素，比如過濾、查找、動態篩選等不同類型的篩選器。

$('p:first')

選取所有第一個段落元素。

$('p:even')

選取所有偶數索引段落元素。

$('p:contains("example")')

選取所有包含文本“example”的段落元素。

四、jQuery選擇器類型

有兩種類型的選擇器：

• 基本選擇器：通過元素的標籤名稱、ID或者class等基本屬性來選取元素。
• 組合選擇器：通過組合多個基本選擇器或者其他選擇器來同時匹配多個元素，可以根據不同情況來使用不同類型的組合方式。

五、jQuery選擇器有哪些

1、基本選擇器

選擇所有元素：$(‘*’)

按照ID選擇元素：$(‘#example’)

按照class選擇元素：$(‘.example’)

按照元素名稱選擇元素：$(‘p’)

2、組合選擇器

選擇子元素：$(‘parent>child’)

選擇相鄰的兄弟元素：$(‘prev+next’)

選擇所有的兄弟元素：$(‘prev~siblings’)

3、過濾選擇器

選擇第一個元素：$(‘elem:first’)

選擇最後一個元素：$(‘elem:last’)

選擇偶數序號的元素：$(‘elem:even’)

選擇奇數序號的元素：$(‘elem:odd’)

根據屬性選擇元素：$(‘elem[attribute]’)

根據屬性值選擇元素：$(‘elem[attribute=value]’)

六、jQuery選擇器注意

1、使用形式：jQuery選擇器需要使用$()對其進行包裹。

2、選擇器類型：jQuery選擇器有基本選擇器和組合選擇器兩種類型，可以根據不同情況來使用不同的類型。

3、選擇器的靈活配置：jQuery選擇器支持多個選擇器的同時匹配，還可以通過組合不同的選擇器進行更靈活的選擇。

4、選擇器效率問題：在選擇元素時，過多的使用通配符或者嵌套的選擇器會降低選擇器的效率，應盡量避免不必要的選擇器。

七、jQuery類選擇器選取

1、類選擇器：

$(document).ready(function() {
    $('button').click(function() {
        $('.example').hide();
    });
});

2、選取類名為example的元素：

$('.example')

3、選取同時含有example和sample類的元素：

$('.example.sample')