一些簡單的jQuery選擇器

2021-10-08 20:16:59 字數 3015 閱讀 9228

學習【js dom 程式設計藝術】,最後面有許多jquery的選擇器,每個都動手敲了一遍。

jquery 提供了高階選擇器的方法。

js獲取元素的三個基本方法分別是通過標籤名,類名和id,即(getelementsbytagname, getelementsbyclassname和getelementbyid)。那麼jquery是如何獲取呢?通過標籤獲取:$('tag')

通過類名獲取:$('.classname')

通過id獲取:$('#id')

除了上面個三個最基本最簡單的,還有下面幾個css選擇器:

$('*') 選擇所有元素

$('taga tagb') 選擇作為taga後代的tagb元素

$('taga, tagb, tagc') 選擇所有taga元素,tagb元素和tagc元素

$('tag#id') 選擇id為id的tag元素

$('tag.classname') 選擇類名為classname的tag元素

jquery支援下列css2.1屬性選擇器:

$('tag[attr]') 選擇所有帶有attr屬性的tag元素

$('tag[attr*=value]') 選擇所有attr屬性值中包含字串value的tag元素

$('tag[attr=value]') 選擇所有attr屬性值等於value的tag元素

$('tag[attr!=value]') 選擇所有attr屬性值不等於value的tag元素

$('tag[attr^=value]') 選擇所有attr屬性值以value開頭的tag元素

$('tag[attr$=value]') 選擇所有attr屬性值以value結尾的tag元素

$('tag[attr~=value]') 選擇所有attr屬性值 為空格分割的多個字串且其中乙個字串等於value 的tag元素

$('tag[attr|=value]') 選擇所有attr屬性值 為連字元分割的字串切該字串以value開頭的tag元素

子選擇器,同輩選擇器:

$('taga > tagb') 選擇作為taga元素子元素的所有tagb元素

$('taga + tagb') 選擇緊鄰taga元素且位於其後的tagb元素

$('taga ~ tagb') 選擇作為taga同輩元素且位於其後的所有tagb元素

偽類,偽元素選擇器:

$('tag:root') 選擇作為文件根元素的tag元素

$('tag:nth-child(n)') 選擇作為其父元素正數第n個元素的所有tag元素

$('tag:nth-last-child(n)') 選擇作為其父元素倒數 第n個元素的所有tag元素

$('tag:nth-of-type(n)') 選擇幾個同輩tag元素中的正數第n個

$('tag:nth-last-f-type(n)') 選擇幾個同輩tag元素中的倒數第n個

$('tag:first-child') 選擇作為其父元素第乙個子元素的tag元素

$('tag:last-child') 選擇作為其父元素第乙個子元素的tag元素

$('tag:first-of-type') 選擇作為同輩tag元素中的第乙個

$('tag:last-of-type') 選擇作為同輩tag元素中的最後乙個

$('tag:only-child') 選擇作為其父元素唯一子元素的tag元素

$('tag:only-of-type') 選擇作為同輩元素中唯一乙個標籤為tag的元素

$('tag:empty') 選擇所有沒有子元素的tag元素

$('tag:enabled') 選擇介面元素中所有已經啟用的tag元素

$('tag:disabled') 選擇介面元素中所有已經禁用的tag元素

$('tag:checked') 選擇介面元素中所有已經被選中的tag元素(如:核取方塊,單選按鈕)

$('tag:not(s)') 選擇與選擇器s不匹配的所有tag元素

其他專有選擇器:

$('tag:even') 選擇匹配元素集 中偶數序號的元素(適合突出顯示**行)

$('tag:odd') 選擇匹配元素集 中奇數序號的元素

$('tag:eq(0)'), $('tag: nth(0)') 選擇匹配元素 集中的第乙個元素,如頁面的第乙個段落

$('tag:gt(n)') 選擇匹配元素集 中索引值大於n的所有元素

$('tag:lt(n)') 選擇匹配元素集 中索引值小於n的所有元素

$('tag:first') 選擇匹配元素集 中的第乙個元素, 等價於eq(0)

$('tag:last') 選擇匹配元素集 中的最後乙個元素

$('tag:parent') 選擇匹配元素集 中包含子元素(文字節點也算)的所有元素

$('tag:contains('test')') 選擇匹配元素集 中包含指定文字的所有元素

$('tag:visible') 選擇匹配元素集 中所有可見的元素(包括display屬性為block和inline,visibility屬性為visible以及type屬性不是hidden的表單元素)

$('tag:hidden') 選擇匹配元素集 中所有隱藏的元素(包括display屬性為none, visibility屬性為hidden以及type屬性為hidden的表單元素)

一些專門為表單設計的表示式,用於快速訪問表單元素:

:input 選擇表單中的所有元素

:text 選擇所有文字字段

:password 選擇所有密碼字段

:radio 選擇所有單選按鈕

:checkbox 選擇所有核取方塊

:submit 選擇所有提交按鈕

:image 選擇所有表單影象

:reset 選擇所有重置按鈕

:button 選擇所有其他按鈕

Jquery 選擇器 簡單的選擇器

1.3簡單的偽類選擇器 你們好你們好 你們好你們好 你們好你們好 1.3.1特定位置選擇器 主要包括 first last,eq index 3中位置 p first css color blue 匹配第乙個p標籤 p eq 3 css background yellow 匹配第4個p標籤 p la...

JQuery選擇器中的一些注意事項

1.選擇器中含有特殊符號的注意事項 1.1 選擇器中含有 或 等特殊字元 根據w3c的規定,屬性值中是不能包含有這些特殊字元的,但在實際專案中偶爾會遇到表示式中含有 和 等特殊字元,如果按照普通的方式去處理出來的話就會出錯。解決此類錯誤的方法是使用轉義符轉義。html 如下 div id id b ...

jquery 選擇器的一些小操作

table動態插入的用法 一些html語句 insertafter table的id tr eq value的值 table刪除首行或者末行 table的id tr not first not last remove 設定css 元素的id css css的元素名 css元素對應的屬性 js跳轉頁面...