第2章 jQuery選擇器

2022-03-27 10:56:21 字數 2314 閱讀 8865

幾乎所有主流瀏覽器都支援上面這些常用的選擇器。此外css中還有偽類選擇器(e:pseudo-elements)、子選擇器(e>f ) ,臨近選擇器(e+f)和屬性選擇器(e[attr ])等。遺憾的是,主流瀏覽器並非完全支援所有的css選擇器。

note

把css應用到網頁中有3種方式,即行間樣式表、內部樣式表和外部樣式表。上例中使用的是內部樣式表,內部樣式表的缺點是不能被多個頁面重複使用的。

簡介的寫法

支援css1到css3選擇器

完善的處理機制

如選擇頁面中不存在的元素也不會報錯。

需要注意的是,$()選取的永遠是物件,即使網頁上沒有此元素。因此當要用jquery檢查某個元素在網頁上是否存在時,需要根據元素的長度來判斷,使用以下**:

或者轉化成dom物件來判斷,如下:

而不能使用這種方式判斷:

jquery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器。

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

如果想通過dom元素之間的層次關係來獲取特定元素,例如後代元素、子元素、相鄰元素和兄弟元素等,那麼層次選擇器是乙個非常好的選擇。

等價關係:

$(「#prev~div」)選擇器只能選擇」#prev」元素後面的同輩

元素。而siblings()方法與前後位置無關,只要是同輩節點就都能匹配。

過濾選擇器主要是通過特定的過濾規則來篩選出所需的dom元素,過濾規則與css的偽類選擇器語法相同,即選擇器都以乙個冒號(:)開頭。按照不同的過濾規則,過濾選擇可以分為基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單物件屬性過濾選擇器。

:nth-child()選擇器是很常用的子元素過濾選擇器,詳細功能如下。

(1):nth-child(even)能選取每個父元素下的索引值是偶數的元素。

(2):nth-child(odd)能選取侮個父元素下的索引值是奇數的元素。

(3):nth-child(2)能選取每個父元素下的索引值等於2的元素。

(4):nth-child(3n)能選取姆個父元素下的索引值是3的倍數的元素,(n從0開始)。

(5):nth-child(3n+1)能選取侮個父元素f的索引值是(3n+1)的元素,(n從0開始)。

note:

eq(index)只匹配乙個元素,而:nth-child將為每乙個符合條件的父元素匹配子元素。同時應該注意到nth-child(index)的index是從1開始的, 而:eq(index)是從0開始的。同理:first和:first-child,last和:last-child也類似。

為了使使用者能夠更加靈活地操作表單,jquery中專門加入了表單選擇器。

選擇器中的空格也是不容忽視的,多乙個空格或少,個空格也許會得到截然不同的結果。

之所以會出現不同的結果,是因為後代選擇器與過濾選擇器的不同。

以上**是選取cfass為「test」的元素裡面的隱藏元素(即後代選擇器)。

而**:

則是選取隱藏的class為「test」的元素(即過濾選擇器)。

第6章 jQuery選擇器

一 基本選擇器 標籤選擇器 標籤名 返回一組元素集合 匹配相同的標籤名 類選擇器 class類名 返回一組元素集合 匹配相同的class屬性值 id選擇器 id名 返回單個元素 匹配id屬性值 通用選擇器 標籤,class,id 返回一組元素集合 選擇的元素 全域性選擇器 返回一組元素集合 網頁所有...

jQuery基礎 2 jQuery 選擇器

jquery 選擇器允許您對 html 元素組或單個元素進行操作。jquery 選擇器基於元素的 id 類 型別 屬性 屬性值等 查詢 或選擇 html 元素。它基於已經存在的 css 選擇器,除此之外,它還有一些自定義的選擇器。jquery 中所有選擇器都以美元符號開頭 元素選擇器 jquery ...

JQuery選擇器 選擇器簡介

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