一步一步學jQuery之選擇器

二、jquery選擇器

2.1 基本選擇器

id選擇器根據給定的id匹配乙個元素。如果選擇器中包含特殊字元，可以用兩個斜槓轉義 $("#mydiv"); #foo\\:bar

element 元素選擇器根據給定的元素名匹配所有元素乙個用於搜尋的元素。指向 dom 節點的標籤名。 $("div");

$(「.class」) 其中.class引數表示元素的css類別(類選擇器)名稱。

* 匹配所有元素多用於結合上下文來搜尋。由於該選擇器的特殊性，它常與其他元素組合使用，表示獲取其他元素中的全部子元素。

$(「div *」) 由於使用*選擇器獲取的是全部元素，因此，有些瀏覽器將會比較緩慢，這個選擇器也需要謹慎使用。

$(「sele1,sele2,selen」)其中引數sele1、sele2到selen為有效選擇器，每個選擇器之間用「，」號隔開，它們可以是之前提及的各種型別選擇器，

如$(「#id」)、$(「.class」)、$(「selector」)選擇器等

ance desc選擇器 $("ance desc") 其中ance desc是使用空格隔開的兩個引數。ance引數（ancestor祖先的簡寫）表示父元素；desc引數（descendant後代的簡寫）

表示後代元素，即包括子元素、孫元素等等。兩個引數都可以通過選擇器來獲取。比如家族姓氏「div」，家族幾代人裡，都有名字裡帶「span」的，就可以用這個ance desc選擇器把這幾個人給定位出來。

parent > child選擇器的範圍要小些，它所選擇的目標是子集元素，相當於乙個家庭中的子輩們，但不包括孫輩，它的呼叫格式如下：$(「parent > child」)

child引數獲取的元素都是parent選擇器的子元素，它們之間通過「>」符號來表示一種層次關係。

prev + next選擇器其中引數prev為任何有效的選擇器，引數「next」為另外乙個有效選擇器，它們之間的「+」表示一種上下的層次關係，「prev」元素最緊鄰的下乙個元素由「next」選擇器返回的並且只返回唯的乙個元素。

~ siblings選擇器也是查詢prev 元素之後的相鄰元素，但前者只獲取第乙個相鄰的元素，而後者則獲取prev 元素後面全部相鄰的元素，它的呼叫格式如下：

$(「prev ~ siblings」)其中引數prev與siblings兩者之間通過「~」符號形成一種層次相鄰的關係，表明siblings選擇器獲取的元素都是prev元素之後的同輩元素。匹配 prev 元素之後的所有 siblings 元素

2.2 過濾選擇器

:first過濾選擇器獲取第乙個元素常常與其它選擇器一起使用，獲取指定的一組元素中的第乙個元素。:last 獲取最後個元素

:eq(index)過濾選擇器匹配乙個給定索引值的元素其中引數index表示索引號（即：乙個整數），它從0開始，如果index的值為3，表示選擇的是第4個元素

:gt(index) 匹配所有大於給定索引值的元素 :lt(index) 匹配所有小於給定索引值的元素

:contains(text)過濾選擇器匹配包含給定文字的元素 li:contains('土豪') 土豪為什麼必須加單引號呢？因為它是乙個字串，而不是乙個變數，所以不加單或雙引號的話是會報錯的。

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

:hidden過濾選擇器 :hidden過濾選擇器的功能是獲取全部不可見的元素，這些不可見的元素中包括type屬性值為hidden的元素。

:visible過濾選擇器 hidden過濾選擇器相反，:visible過濾選擇器獲取的是全部可見的元素，也就是說，只要不將元素的display屬性值設定為「none」，那麼，都可以通過該選擇器獲取。

[attribute=value]屬性選擇器 [attribute=value]屬性選擇器的功能是獲取與屬性名和屬性值完全相同的全部元素，其中是專用於屬性選擇器的括號符，引數attribute表示屬性名稱，value引數表示屬性值。

[attribute!=value]屬性選擇器

[attribute*=value]屬性選擇器 [attribute*=value]，它可以獲取屬性值中包含指定內容的全部元素，其中是專用於屬性選擇器的括號符，引數attribute表示屬性名稱， value引數表示對應的屬性值。

:first-child子元素過濾選擇器 :first過濾選擇器可以獲取指定父元素中的首個子元素，但該選擇器返回的只有乙個元素，並不是乙個集合，而使用:first-child子元素過濾選擇器則可以獲取每個父元素中返回的首個子元素，它是乙個集合，常用多個集合資料的選擇處理。

:last-child子元素過濾選擇器與:first-child子元素過濾選擇器功能相反，:last-child子元素過濾選擇器的功能是獲取每個父元素中返回的最後乙個子元素，它也是乙個集合，常用多個集合資料的選擇處理。

2.3 表單選擇器

:input表單選擇器它的功能是返回全部的表單元素不僅包括所有標記的表單元素，而且還包括、和標記的表單元素，因此，它選擇的表單元素是最廣的。

:text表單文字選擇器 :text表單文字選擇器可以獲取表單中全部單行的文字輸入框元素，單行的文字輸入框就像乙個不換行的字條工具，使用非常廣泛。

:password表單密碼選擇器

:radio單選按鈕選擇器

:checkbox核取方塊選擇器

:submit提交按鈕選擇器

:image影象域選擇器當乙個元素的「type」屬性值設為「image」時，該元素就是乙個影象域，使用:image選擇器可以快速獲取該類全部元素。

:button表單按鈕選擇器表單中包含許多態別的按鈕，而使用:button選擇器能獲取且只能獲取「type」屬性值為「button」的和這兩類普通按鈕元素。

:checked選中狀態選擇器有一些元素存在選中狀態，如核取方塊、單選按鈕元素，選中時「checked」屬性值為「checked」，呼叫:checked可以獲取處於選中狀態的全部元素。

:selected選中狀態選擇器與:checked選擇器相比，:selected選擇器只能獲取下拉列表框中全部處於選中狀態的選項元素。

一步一步學jQuery之選擇器

一步一步jquery（二）選擇器（一）

一步一步學jQuery 四

一步一步學cscope

一步一步學jQuery之選擇器

一步一步jquery（二） 選擇器（一）

一步一步學jQuery 四

一步一步學cscope

相關推薦

一步一步jquery（二）選擇器（一）