Jquery核心 選擇器

2021-08-31 11:15:27 字數 2441 閱讀 7495

jquery核心----選擇器

一:在jquery中最核心的要屬於選擇器:而jquery的選擇分為很多種,但是重要的有以下幾種:

1:基本選擇器:

b:class選擇器:class選擇器是根據元素中的屬性class來獲得的,返回的是乙個集合:注意的是在jquer中,並不是非要在樣式裡宣告該樣式,重要的是元素中class屬性有值:元素中的class的名稱可以相同,所以返回的是乙個陣列!

c:element:元素選擇器:根據制定的元素來匹配所有的元素

d:* 匹配所有元素 ---多用於結合上下文來搜尋。

e:符合選擇器,制定多個選擇器,將所有的匹配的元素合併在乙個集合中返回來!

2:層次選擇器分為四種

a: ancestor ancestor:

ancestor (selector) : 任何有效選擇器或者元素

descendant (selector) : 用以匹配元素的選擇器,並且它是第乙個選擇器的後代元素

這種選擇器是返回匹配的所有後代元素:

例如:$(「div span」)是匹配所有div 後代元素中的所有span元素

b:parent > child

parent (selector) : 任何有效選擇器

child (selector) : 用以匹配元素的選擇器,並且它是第乙個選擇器的子元素

這種選擇器是返回parent元素的子元素中的child元素

比如$(「div > span」)是匹配所有div子元素中的所有span元素

c: prev + next

prev (selector) : 任何有效選擇器

next (selector) :乙個有效選擇器並且緊接著第乙個選擇器

例如:$(「div+sapn」);匹配所有div的span元素,返回的是乙個集合,注意的是,是緊接著div後面的span元素。

d: prev ~ siblings

prev (selector) : 任何有效選擇器

+siblings (selector) : 乙個選擇器,並且它作為第乙個選擇器的同輩

這種選擇器是匹配prev後面的所有siblings元素---可以用nextall來代替該功能!

例如:$(「div~ span」):匹配所有div後面的span元素:注意的是span和div是同一層次的元素:相當於$(「div」).nextall(「span」);

3:簡單選擇器:

fast選取器獲得匹配的第乙個元素:last選擇器獲得匹配的最後乙個選擇器:

not選擇器是獲得去除所有與給定選擇器匹配的元素!even選擇器是獲得匹配所有索引值為偶數的元素,從 0 開始計數!---odd選擇器是獲得匹配所有索引值為奇數的元素,從 0 開始計數!-------eq選擇器是獲得匹配乙個給定索引值的元素!!!---gt選擇器是獲得匹配所有大於給定索引值的元素!----lt選擇器是獲得匹配所有小於給定索引值的元素!--------header選擇器是獲得h1——————h6之類的選擇器

4:內容選擇器

a:contains(text);返回所有含有text文字的元素

b:empty:匹配所有不包含子元素或者文字的空元素

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

d:parent: 匹配含有子元素或者文字的元素

5:可見性選擇器:

a:hidden選擇器是:匹配所有的不可見元素,input 元素的 type 屬性為 "hidden" 的話也會被匹配到

b:visible: 匹配所有的可見元素

6:屬性選擇器

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

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

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

:[attribute^=value]:選擇屬性值以value開始的元素

:[attribute$=value]選擇屬性的值以value結束的元素

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

:[selector1][selector2][selectorn]用屬性選擇器合成乙個復合屬性選擇器,滿足多個條件。每選擇一次,縮小一次範圍!

7:子元素選擇器

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

:first-child:選取每個父元素的第乙個元素

:last-child:選擇每個父元素的最後乙個子元素、

:only-child:如果每個元素的它父元素中唯一的子元素,

8:表單屬性選擇器

:enabled:選取所有可用元素

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

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

:選擇所有被選中的選擇元素(下拉選框)

。。。。。。。

9:表單選擇器:----一切表單元素

JQuery選擇器 選擇器簡介

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

Jquery選擇器 基本選擇器

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

jQuery選擇器之全選擇器( 選擇器)

在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...