JQ樣式篇 篩選選擇器

2021-08-15 04:11:59 字數 3044 閱讀 1022

篩選選擇器的用法與css中的偽元素相似,選擇器用冒號「:」開頭,通過乙個列表,看看基本篩選器的描述:

注意事項:

:eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表示式的集合元素,根據之前匹配的元素在進一步篩選,注意jquery合集都是從0開始索引

eq: 在匹配的集合中選擇索引值為index的元素(奇數)

even:選擇所引值為偶數的元素,從 0 開始計數。(偶數)

2.gt是乙個段落篩選,從指定索引的下乙個開始,gt(1) 實際從2開始

基本篩選選擇器針對的都是元素dom節點,如果我們要通過內容來過濾,jquery也提供了一組內容篩選選擇器,當然其規則也會體現在它所包含的子元素或者文字內容上

內容過濾器描述如下表:

注意事項:

:contains與:has都有查詢的意思,但是contains查詢包含「指定文字」的元素,has查詢包含「指定元素」的元素

如果:contains匹配的文字包含在元素的子元素中,同樣認為是符合條件的。

:parent與:empty是相反的,兩者所涉及的子元素,包括文字節點

元素有顯示狀態與隱藏狀態,jquery根據元素的狀態擴充套件了可見性篩選選擇器:visible與:hidden

描述如下:

這2個選擇器都是 jquery 延伸出來的,看起來比較簡單,但是元素可見性依賴於適用的樣式

:hidden選擇器,不僅僅包含樣式是display="none"的元素,還包括隱藏表單、visibility等等
我們有幾種方式可以隱藏乙個元素:

css display的值是none。

type="hidden"的表單元素。

寬度和高度都顯式設定為0。

乙個祖先元素是隱藏的,該元素是不會在頁面上顯示

css visibility的值是hidden

css opacity的指是0

如果元素中佔據文件中一定的空間,元素被認為是可見的。

可見元素的寬度或高度,是大於零。

元素的visibility: hidden 或 opacity: 0被認為是可見的,因為他們仍然占用空間布局。

不在文件中的元素是被認為是不可見的,如果當他們被插入到文件中,jquery沒有辦法知道他們是否是可見的,因為元素可見性依賴於適用的樣式屬性選擇器讓你可以基於屬性來定位乙個元素。可以只指定該元素的某個屬性,這樣所有使用該屬性而不管它的值,這個元素都將被定位,也可以更加明確並定位在這些屬性上使用特定值的元素,這就是屬性選擇器展示它們的威力的地方。

描述如下:

瀏覽器支援:

css選擇器無論css2.1版本還是css3版本,ie7和ie8都支援,webkit、gecko核心及opera也都支援,只有ie6以下瀏覽器才不支援
在這麼多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的

[attr="value"]能幫我們定位不同型別的元素,特別是表單form元素的操作,比如說input[type="text"],input[type="checkbox"]等

[attr*="value"]能在**中幫助我們匹配不同型別的檔案

子元素篩選選擇器不常使用,其篩選規則比起其它的選擇器稍微要複雜點

子元素篩選選擇器描述表:

注意事項:

:first只匹配乙個單獨的元素,但是:first-child選擇器可以匹配多個:即為每個父級元素匹配第乙個子元素。這相當於:nth-child(1)

:last 只匹配乙個單獨的元素, :last-child 選擇器可以匹配多個元素:即,為每個父級元素匹配最後乙個子元素

如果子元素只有乙個的話,:first-child與:last-child是同乙個

:only-child匹配某個元素是父元素中唯一的子元素,就是說當前子元素是父元素中唯一的元素,則匹配

jquery實現:nth-child(n)是嚴格來自css規範,所以n值是「索引」,也就是說,從1開始計數,:nth-child(index)從1開始的,而eq(index)是從0開始的

nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往後計算,後者從後往前計算

無論是提交還是傳遞資料,表單元素在動態互動頁面的作用是非常重要的。jquery中專門加入了表單選擇器,從而能夠極其方便地獲取到某個型別的表單元素

表單選擇器的具體方法描述:

注意事項:

除了input篩選選擇器,幾乎每個表單類別篩選器都對應乙個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如 $(':password') == $('[type=password]')

在乙個表單裡,想要找到指定元素的第乙個元素用first實現,那麼第二個元素用eq(1)實現。

除了表單元素選擇器外,表單物件屬性篩選選擇器也是專門針對表單元素的選擇器,可以附加在其他選擇器的後面,主要功能是對所選擇的表單元素進行篩選

表單篩選選擇器的描述:

注意事項:

選擇器適用於核取方塊和單選框,對於下拉框元素, 使用 :selected 選擇器

在某些瀏覽器中,選擇器:checked可能會錯誤選取到元素,所以保險起見換用選擇器input:checked,確保只會選取元素

jQ內容篩選選擇器

jq內容篩選選擇器 1.查詢所有class div 中dom元素中包含 contains 的元素節點 並且設定顏色 div contains contains css color cd00cd 2.查詢所有class div 中dom元素中包含 span 的元素節點 並且設定顏色 div has s...

jq選擇器物件篩選

1.選擇物件 1 基本 id 根據給定的id匹配乙個元素。例如 id element 根據給定的元素名匹配所有元素。例如 div class 根據給定的類匹配元素。例如 style1 匹配所有元素。例如 selector1,selector2,selectorn 將每乙個選擇器匹配到的元素合併後一起...

JQ常用入口函式 選擇器 篩選選擇器 方法整理

獲取型 布局有鏈式程式設計 設定型 具有鏈式程式設計 當操作是設定型元素 可以一直鏈式程式設計 當操作是獲取型元素 不可以一直鏈式程式設計 斷鏈 1.jq的入口函式 1.function 2.document ready function 3.jquery function 2.dom與就jq互 d...