jQuery選擇器型別

2021-08-27 23:27:07 字數 2424 閱讀 9809

jquery選擇器應該是學習jquery的最基本的知識了,下面介紹一下各個型別的選擇器的怎麼寫。

1、基本選擇器:這是最常用的選擇器

#id:根基給定的id匹配乙個元素

.class:根據類名匹配元素

element:直接寫出標籤名,根據給定的元素名匹配元素

*:萬用字元

selector1,selector2,...,selectorn:將每乙個選擇器匹配的元素合併後一起返回

2、層次選擇器:根據層次之間的特定關係來獲取元素

$("ancestor descendant"):選取ancestor元素裡的所有descendant[color=red]後代元素[/color]

$("parent>child"):選取parent元素下的child[color=red](子)元素[/color]

$("pre+next"):選取緊接在pre後的next[color=red](下乙個)元素[/color]

$("prev~siblings"):選取prev元素之後的[color=red]所有[/color]siblings[color=red](同輩)元素[/color]

3、過濾選擇器:基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾,表單物件屬性過濾

基本過濾選擇器:

:first :選擇第一元素

:last:最後乙個元素

:not(selector):去除所有與給定選擇器匹配的元素

:even:偶數

:odd:奇數

:eq(index):選取索引等於index的元素(index從0開始)

:gt(index):索引大於index

:lt(index):索引小於index

:hender:選取所有標題元素

:animated:選取當前正在執行動畫的元素

:focus:選取當前獲取焦點的元素

內容過濾選擇器:

:contains(text):選取含有文字內容為「text」的元素

:empty:選取不包含子元素或者文字的空元素

:has(selector):選取含有選擇器所匹配的元素的元素

:parent:選取含有子元素或者文字的元素

可見性過濾選擇器:

:hidden:選取所有不可見的元素

:visible:選取所有可見的元素

屬性過濾選取器:

[attribute]:選取擁有此屬性的元素

[attribute=value]:屬性值為value的元素

[attribute!=value]:屬性值不等於value的元素

[attribute^=value]:屬性值以value開頭的元素

[attribute$=value]:屬性值以value結尾的元素

[attribute*=value]:屬性值含有value的元素

[attribute|=value]:屬性等於給定字串或以該字串為字首的元素(如果為字首的話,該字串之後要有「-」連字元)

[attribute~=value]:屬性用空格分隔的值中包含有乙個給定值的元素

[attribute1][attribute2][attributen]:幾個條件同時符合的元素

子元素過濾選擇器:

:nth-child(index/even/odd/equation):選取每個父元素下的第index個子元素或者奇偶元素(index從1開始)

:first-child:父元素中第乙個子元素

:last-child:父元素中最後乙個子元素

:only-child:如果某個元素是它父元素的唯一子類將會匹配

表單物件屬性過濾器:

:enabled:選取所有可用元素

:disabled:選取所有不可用元素

:checked:選取所有被選中的元素(單選框、核取方塊)

:select:選取所有被選中的選項元素(下拉列表)

4、表單選擇器

:input:選取所有元素

:text:所有單行文字框元素

:password:所有密碼框

:radio:所有單選框

:checkbox:所有多選框

:submit:所有提交按鈕

:image:所有影象按鈕

:reset:所有重置按鈕

:button:所有的按鈕

:file:所有的上傳域

:hidden:所有不可見元素

選擇器中有好多前邊都帶有冒號,使用的時候千萬注意是否要加空格,例如:

$("div :input") 指的是在div下的所有元素

$("div:input") 指的是在div下的為input標籤的元素

在jquery中還有一些特使的字元,如$、[、{ 等,如果在選擇器中沒法識別應該用轉譯字元「\\」將其轉譯再使用。

選擇器的靈活應用可以使**乾淨整潔,掌握好選擇器是乙個開發人員的基本素質。大家一起努力啦!fighting!

元素型別jQuery選擇器

在本篇文章中,我們主要介紹元素型別的內容,自我感覺有個不錯的建議和大家分享下 基本選擇器 次層選擇器 第一層景致 第二層第三層 表單選擇器 簡略濾過選擇器 大家講演不要念稿,請說普通話 內容濾過選擇器 性屬濾過選擇器 第一層 第二層第三層 第四層 子元素濾過選擇器 選擇器綜合訓練 導航條 掛起 簡化...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...