選擇器要這麼用!!!!66666

2022-07-24 15:45:32 字數 2244 閱讀 7546

$選擇器主要用於選擇標籤.基本用法是同css的選擇器.但是,很讓人興奮的是,他支援常見的瀏覽器,而css中很多選擇器是ie6所不支援的.

1.基本選擇器(3種):

a、$(「標籤名」):,如$(「p」)是選取了所有的p標籤節點(這個選擇器可以選擇這個頁面中所有的這個標籤

b、$(「#id名」),如$(「#test」)是選取了id為test的標籤節點(這個選擇器是按id名進行選擇的,我們要記著,選擇器如果id名前加#號,class前加點號

c、$(「.class名」),如$(「.test」)是選取了所有class為test的標籤節點(這種選擇器就是選擇特定class的標籤

2.組選擇器: 把三種基本的選擇器用逗號隔開就是我們的組選擇器

下面還是現做乙個約定:把」標籤名或#id名或.class名」記作mix,則mix表示乙個標籤名,或乙個#id或乙個.class.

$(「mix,mix,mix,…」),如:$(「div,#test1,p,.test2,#test3」)(這樣們就可以任意的去選擇標籤並給他們相同的方法了

3.後代選擇器: —-3種基本選擇器的組合,「 」隔開,直系皆生效

$(「mix mix」),當然可以是多個巢狀,但後代選擇器可以是深層子代,所以$(「mix mix mix …」)這種寫法作用不大.例子:$(「div .test」):在div標籤內的所有具有test的class的後代元素(就是被div巢狀的class屬性為test的標籤)

4.子選擇器: —-3種基本選擇器的組合,「>」隔開,只親子有效

$(「mix>mix」),這個放在後代選擇器後面是為了和它做對比.子選擇器只能選擇第一代子代.不處理深層巢狀.例子:

$(「div>.test」)

對這裡的p段落標籤有效.但對

對這裡的p段落標籤無效,這裡要用

$(「div .test)

5.臨近選擇器:—-3種基本選擇器的組合,「+」隔開,只下乙個兄弟節點

$(「mix+mix」),選取下乙個兄弟節點.如:$(「div +#test」),id為test的的節點必須是div的下乙個兄弟節點.

在$(「div + #test」)中能取到p段落節點

則不能取到

6.屬性選擇器: —-「 |=|^|$|*」

把屬性選擇器不放在css選擇器裡面是因為jquery中寫法是不一樣的.至於css中寫法可以參考我之前寫的一篇css的選擇器一文.jquery中是和xpath類似的寫法:

$(「mix[@attr]」):選取所有該mix且具有attr屬性的節點

$(「mix[@attr=a_value」]):選取所有該mix且具有attr屬性並滿足屬性值為a_value的節點

$(「mix[@attr^=a_value_head」]):attr屬性的屬性值是以a_value_head開頭的

$(「mix[@attr$=a_value_end」]):attr屬性的屬性值是以a_value_end結尾的

$(「mix[@attr*=a_value」]):attr屬性的屬性值中包含a_value

7. 限定選擇器:

這個名稱是我自己起的,其實選擇器組合都有限定的意思,你明白後面所介紹的知識即可.

具有限定子節點擊擇器:$(「mix1[mix2]」):返回包含mix2的mix1節點.如:$(「div[a]」):包含a標籤的div.

這個和$(「div a」)不相同.後者表示div中的a標籤,返回的是a標籤物件,前者返回的是div標籤物件

冒號限定結點選擇器:$(「mix:condition」):mix標籤,並且滿足限定條件.

e:root:型別為e,並且是文件的根元素

e:nth-child(n):是其父元素的第n個型別為e的子元素 ,基數從1開始

e:first-child:是其父元素的第1個型別為e的子元素

e:last-child:是其父元素的最後乙個型別為e的子元素

e:only-child:且是其父元素的唯一乙個型別為e的子元素

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

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

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

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

Css選擇器 層次選擇器(關係選擇器)

1.e f 匹配 e 元素下所有的子元素 f 後代選擇器 eg css.box a匹配 box 下所有的子元素 a 2.e f 匹配 e 元素下第一級子元素 f 子選擇器 eg css.box a匹配 box 下第一級子元素 a 3.e f 匹配 e 元素後面緊鄰的哪乙個 f 元素 有且僅有乙個 相...