JQuery選擇器

jQuery選擇器完全繼承了CSS風格,利用jQuery選擇器可以非常方便和快速的找到特定的DOM元素,然後給他添加行爲。
JQuery中的選擇器種類:
基本選擇器
層次選擇器
過濾選擇器
內容選擇器
可見性選擇器
屬性選擇器
子元素過濾選擇器
表單選擇器

基本選擇器

#id:根據id選擇指定元素
.className:選取所有類名爲className的元素
className(元素名):根據給定的元素名匹配元素
*:匹配所有元素
Select1,select2...:找到所有指定元素,組合起來一起返回
A,B:可以通過逗號隔開元素名稱查找A和B元素一起返回。

層次選擇器

a b :空格隔開兩個選擇器:選取第一個元素裏面的所有第二個元素。包括孫子。。
a>b:選取a下面的所有b子元素,只包含子元素,不包括所有孫子。。。
a+b:選取緊接着a元素之後的下一個同輩b元素,只是之後的一個元素。
a~b:選取a元素之後的所有同輩b元素

過濾選擇器:相當於超連接的僞類別

超連接的僞類別可分爲四個屬性:
a:link :超鏈接的普通樣式,即正常瀏覽狀態的樣式。
a:hover:鼠標指針經過(懸停)超鏈接上時的樣式。
a:active:在超鏈接上點擊,即“當前激活”時,超鏈接的樣式。
a:visited:被點擊過的超鏈接的樣式。

:first:選取指定元素集合的第一個元素
:last:選取最後一個元素
:Not(selector):選取除了與給定選擇器selector相同的其他元素。
:even:選取索引值爲偶數的所有元素,從零開始
:odd:選取索引值爲奇數的所有元素
:eq(index):選取與給定索引元素角標匹配的元素
:gt(index):匹配大於給定索引值的元素。
:lt(index):匹配小於給定索引值元素
:header:選擇標題元素h1、h2等
:animated:匹配正執行動畫效果的元素。

內容過濾選擇器:

:contains(text):匹配只要含有給定文本的元素
:has(selector):匹配含有選擇器所指定元素的元素
:empty:匹配所有不包含子元素或者文本的空元素
:parent:選取含有子元素或文本的元素(非空元素)

可見性選擇器

:visible:選取所有可見元素
:hidden:選取所有不可見元素

屬性選擇器

[attribute]:選取擁有此屬性的元素
[attribute=value]:選取屬性值等於value的元素
[attribute !=value]:選取屬性值不等於value的元素
[attribute^=value]:選取屬性值以value開始的元素
[attribute$=value]:選取屬性值以value結尾的元素
[attribute*=value]:選取屬性值包含value的元素
[attribute~=value]:選取屬性值包含value且以空格可開的元素
[attribute1] [attribute2]:多個屬性選擇器合併成一個屬性選擇器。並且的意思。

表單選擇器

:input:選取所有<input>、<textarea>、<select>、<button>元素
:text:選取所有單行文本框
:password:選取所有密碼框
:radio:選取所有單選按鈕
:checkbox:選取所有複選框
:submit:選取所有提交按鈕
:img:選取所有圖像按鈕
:reset:選取所有重置按鈕
:button:選取所有button按鈕
:file:選取所有上傳域

表單對象屬性過濾選擇器

:disabled:選取所有不可用元素
:enabled:選取所有可用元素
:checked:選取所有被選中的元素(單選框和複選框)
:selected:選取所有被選中的元素選項(下拉列表)                 


















發佈了38 篇原創文章 · 獲贊 23 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章