jQuery過濾選擇器之偽類選擇器和內容選擇器

2022-05-18 18:25:41 字數 2059 閱讀 6107

jquery給我們提供了很多簡易用的方法,jquery過濾選擇器是其中一種。過濾器主要通過特定的過濾規則來篩選所需dom元素,使用冒號(:)開關。

:first

選取第乙個元素(單個元素)

$('li:first')

:last

選取最後乙個元素(單個元素)

$('li:last')

:not(selector)

等到class不是blue的元素

$('li:not(.blue)')  選取class不是blue的元素

:even

選擇索引(0開始)是偶數的所有元素(集合元素)

$('li:even')

:odd

選擇索引(0開始)是奇數的所有元素(集合元素)

$('li:odd')

:eq(index)

選擇索引(0開始)等於index的元素(單個元素)

$('li:eq(3)')

:gt(index)

選擇索引(0開始)大於index的元素(集合元素)

$('li:gt(3)')

:lt(index)

選擇索引(0開始)小於index的元素(集合元素)

$('li:lt(3)')

:header

選擇標題元素,h1~h6(集合元素)

$(':header') 選取頁面所有的標題元素

$('class1 :header') 選取頁面中所有class為class1的元素下的標題元素

:focus

選擇當前被焦點的元素(集合元素)

$(':focus')

jquery也為最常的過濾器提供了專門的方法,以達到提高效能和效率的作用

.eq(index)

獲取指定index的元素

.first()

同:first偽類選擇器

$('li').first()

.last()

同:last偽類選擇器

$('li').last()

.not('.class')

同:not偽類選擇器

選取不含指定.class的元素

$('li').not()

:contains(text)

選取含有指定文字的元素(元素集合)

如$('contains("jquery")')

:empty

選取 不包含子元素或空文字的元素(元素集合)

$(':empty')

:has

選取含有指定class的子元素的父元素(元素集合,返回的是指定class的子元素的父元素,也就是你進行操作的元素)

$(':has(.blue)')

:parent

選取含有子元素或文字的元素(元素集合),與:empty相反

$(':parent')

在jquery中提供了乙個方法名和:parent類似的方法parent(),但是這個方法不是選取含有子元素或者文字的元素,而是獲取當前元素的父元素,把回的是元素集合。

方法有三個:

.parent()

選擇當前元素的父元素

.parents()

選取當前元素的父元素及祖先元素

.parentsuntil()

選取當前元素遇到指定父元素時停止(不包括.parentsuntil()括號裡的元素)

本文出自:雲庫網 - jquery過濾選擇器之偽類選擇器和內容選擇器

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...

Jquery過濾選擇器之基本過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需要的dom元素,過濾規則與css中的偽類選擇器語法相同,即選擇器都可以以乙個冒號 開頭。按照不同的過濾規則,過濾選擇器可以分為基本過濾 內容過濾 可見性過濾 屬性過濾 子元素過濾和表單物件屬性過濾選擇器。首先介紹基本過濾選擇器 選擇器描述 返回例項 fi...