jQuery類名選擇器( class)

2021-08-28 01:59:45 字數 928 閱讀 8766

一 介紹

類名選擇器是通過元素擁有的css類的名稱查詢匹配的dom元素。

在乙個頁面中,乙個元素可以有多個css類,乙個css類又可以匹配多個元素,如果有元素中有乙個匹配的類的名稱就可以被類名選擇器選取到。

類名選擇器很好理解,在大學的時候大部分人一定都選過課,可以把css類名理解為課程名稱,元素理解成學生,學生可以選擇多門課程,而一門課程又可以被多名學生所選擇。

css類與元素的關係既可以是多對多的關係,也可以是一對多或多對一的關係。簡單地說類名選擇器就是以元素具有的css類名稱查詢匹配的元素。

類名選擇器的使用方法如下:

$(".class");

其中,class為要查詢元素所用的css類名。

例如,要查詢使用css類名為word_orange的元素,可以使用下面的jquery**: 

$("word_orange");

二 應用

在頁面中,首先新增兩個標記,並為其中的乙個設定css類,然後通過jquery的類名選擇器選取設定了css類的標記,並設定其css樣式。

三 **

注意觀察我的樣式

我的樣式是預設的

四 執行效果

五 執行說明

在上面的**中,只為其中的乙個標記設定了css類名稱,但是由於程式中並沒有名稱為myclass的css類,所以這個類是沒有任何屬性的。

類名選擇器將返回乙個名為myclass的jquery包裝集,利用css()方法可以為對應的div元素設定css屬性值,這裡將元素的背景顏色設定為深紅色,文字顏色設定為白色。

類名選擇器也可能會獲取一組jquery包裝集,因為多個元素可以擁有同乙個css樣式。

jQuery類名選擇器對非原始類名無法進行操作

jq類名選擇器對使用jq新增類名的元素無效,也就是說只對原始類名有用 比如我用jq給乙個元素加乙個類名 之後我想對這個元素進行操作,可是就無法使用類名選擇器來操作這個元素了 這是因為你新新增的類在一開始並不存在,你直接用 click 就會沒有響應,你可以用delegate 方法繫結事件,具體你可以查...

jQuery偽類選擇器

一 簡單偽類選擇器 not selector 選擇除了某個選擇器之外的所有元素 first或first 選擇某元素的第乙個元素 非子元素 last或last 選擇某元素的最後乙個元素 非子元素 odd 選擇某元素的索引值為奇數的元素 even 選擇某元素的索引值為偶數的元素 eq index 選擇給...

JQuery 偽類選擇器

ul li one li li two li li three li ul 所有的偽類選擇器,都將圍繞上面的html 第乙個節點 ul li first child one 最後乙個節點 ul li last child three 第二個節點 通過索引。ul li eq 1 two 通過節點數。u...