jQuery選擇器記錄

2021-10-01 20:28:38 字數 3060 閱讀 7378

基本選擇器

層次選擇器

過濾選擇器

基本選擇器

描述$("#id名")

根據元素id獲取元素

$(".class名")

根據元素class名獲取元素

$(「標籤名」)

選取某種標籤的所有元素

層次選擇器

描述$(「ancestor descendant」)

選取ancestor的所有descendant(後代)元素

$(「parent > child」)

選取parent元素下的child(子)元素

$(「prev + next」)

選取緊接在prev元素後的下乙個next元素

$(「prev ~ siblings」)

選取prev元素後的所有siblings()元素,只要是同輩節點就可以選取

過濾選擇器主要是通過特定的過濾規則來篩選出所需要的dom元素,該選擇器都以冒號(":")開頭

可分為基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾,表單物件屬性過濾

基本過濾選擇器

選擇器描述

:first

選取第乙個元素

:last

選取最後乙個元素

:not(selector)

去除所有與給定選擇器匹配的元素

:even

選取索引值偶數的所有元素,索引從0開始

:odd

選取索引值奇數的所有元素,索引從0開始

:eq(index)

選取索引等於index的元素,索引從0開始

:gt(index)

選取索引大於index的元素,索引從0開始

:lt(index)

選取索引小於index的元素,索引從0開始

:header

獲取所有的標題元素,如h1,h2等

:animated

選取當前正在執行動畫的所有元素

屬性過濾選擇器

基礎知識點:屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素

屬性過濾選擇器

描述[attribute]

選取擁有此屬性的元素

[attribute=value]

選取指定屬性的值為value的元素

[attribute!=value]

選取指定屬性的值不等於value的元素

[attribute^=value]

選取指定屬性的值以value開始的元素

[attribute$=value]

選取指定屬性的值以value結束的元素

[attribute*=value]

選取指定屬性的值含有value的元素

[selector1][selector2] …[selectorn]

用屬性選擇器合併成乙個復合屬性選擇器,滿足多個條件,每選擇一次,縮小一次範圍

表單選擇器

表單過濾選擇器

描述例子

:input

選取所有的input元素 (匹配所有input, textarea, select和button元素)

$(":input")

:text

所有 type=「text」 的 元素

$(":text")

:password

所有 type=「password」 的 元素

$(":password")

:radio

所有 type=「radio」 的元素

$(":radio")

:checkbox

所有 type=「checkbox」 的 元素

$(":checkbox")

:submit

所有 type=「submit」 的元素

$(":submit")

:reset

所有 type=「reset」 的元素

$(":reset")

:button

所有 type=「button」 的元素

$(":button")

:image

所有 type=「image」 的 元素

$(":image")

:file

所有 type=「file」 的 元素

$(":file")

表單物件屬性過濾選擇器

表單過濾選擇器

描述:checked單選框/核取方塊選中

:selected下拉框被選擇

:enabled

可用:disabled

不可用可見性過濾選擇器

基本知識點:可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素;hidden不僅包含樣式屬性display為none的元素,也包含文字隱藏域()和visible:hidden之類的元素

選擇器描述

:hidden

選取所有不可見的元素

:visible

選取所有可見的元素

內容過濾選擇器

基本知識點:內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文字內容上

選擇器描述

:contains(text)

選取含有文字內容為text的元素

:empty

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

:has(selector)

選取含有選擇器所匹配的元素的元素

:parent

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

子元素過濾選擇器

子元素過濾選擇器

描述:first-child

選擇第乙個子元素

:last-child

選擇最後乙個子元素

:only-child

是某個元素的唯一乙個子元素時被呼叫,否則不呼叫

:nth-child(n)

匹配屬於其父元素的第 n 個子元素,不論元素的型別。

jquery選擇器學習記錄

基本選擇器 id class tag all multi id mini div span two 層次選擇器 後代 子女 next 後面所有同輩 ancestor descendant parent child prev next prev siblings 過濾選擇器 基本過濾選擇器 首個div...

JQuery選擇器 選擇器簡介

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

Jquery選擇器 基本選擇器

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