jQuery的選擇器

2022-07-22 03:21:11 字數 1811 閱讀 7728

要使某個動作應用於特定的html元素,需要有辦法找到這個元素。在jquery中,執行這一任務的方法稱為jquery選擇器。 jquery選擇器把網頁的結構和行為完全分離。利用jquery選擇器,能快速地找出特定的html元素,然後輕鬆的給元素新增一系列行為動作。 jquery的選擇器主要有三大類,即css 3的基本選擇器,css3的位置選擇器和過濾選擇器。

jquery 選擇器的優點:

1  簡潔的寫法

2  完善的事件處理機制

1.基本選擇器

基本選擇器是 jquery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和標記名來查詢 dom 元素。

示例:

$("#id").css("backgroundcolor","red");     

$("p").eq(0).css("backgroundcolor","red");

2.層次選擇器

如果想通過 dom 元素之間的層次關係來獲取特定元素,如子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器。

示例:

選擇 <

body

> 內所有 <

div>

元素:$("body div")

選擇 <

body

> 內所有 <

div>

子元素:$("body>div")

選擇 id 為 one 的下乙個

<

div>

元素:$("#one+div")

選擇 id 為 two 的所有兄弟

<

div>元素:$("#two~div")

3.過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的 dom 元素,該選擇器都以 「:」 開頭。 按照不同的過濾規則,過濾選擇器又可分為基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾和表單物件屬性過濾選擇器。

示例:

選擇第乙個 div 元素:$("div:first")

選擇id不為 one 的所有p元素:$("p:not('#one')")

選擇索引值為偶數的tr元素:$("tr:even")

選擇索引值為大於 3 且為奇數的 p元素:$("p:gt(3):odd")

選擇所有的標題元素:$(":header")

4.內容過濾選擇器

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

示例:

選擇含有文字 『lore』 的 p元素:$("p:contains(lore)")

選擇不包含子元素的 div 空元素: $("div:empty")

選擇含有 class 為 mini 元素的 p元素:$("p:has(.mini)")

選擇含有子元素的div元素: $("div:parent")

5.可見性過濾選擇器

可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素。可見選擇器 :hidden 不僅包含樣式屬性 display 為 none 的元素,也包含隱藏表單域和 visible:hidden 之類的元素。

示例:

選擇所有可見的div元素: $("div:visible")

選取所有不可見的元素: $(":hidden")

6.屬性過濾選擇器

屬性過濾選擇器通過元素的屬性來獲取相應元素。

Jquery 選擇器 簡單的選擇器

1.3簡單的偽類選擇器 你們好你們好 你們好你們好 你們好你們好 1.3.1特定位置選擇器 主要包括 first last,eq index 3中位置 p first css color blue 匹配第乙個p標籤 p eq 3 css background yellow 匹配第4個p標籤 p la...

JQuery選擇器 選擇器簡介

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

Jquery選擇器 基本選擇器

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