jQuery選擇器總結

2021-06-21 21:10:56 字數 3776 閱讀 2573

$("*")//所有元素

$(this)//當前元素

$("#test")//id為test的所有元素

$(".test")//類名為test的所有元素

$("div")//標籤為div的所有元素

$(".test:first")//class為test的第乙個元素,.test可以換成任意選擇器得到的節點

以下都是":***"的形式,用法同上

:last//最後乙個元素

:not(:***)//例:$("input:not(:checked)")

:even//偶數元素

:odd//奇數元素

:eq()//第n個元素 從0開始計數,例::$(".test:eq(1)")

:gt()//所有序號大於第n個的元素,從0開始計數,例::$(".test:gt(1)")

:lt()//所有序號小於第n個的元素,從0開始計數,例::$(".test:lt(1)")

:header//匹配h1~h6標籤

:animated//匹配所有正在執行動畫效果的元素

:focus//讓元素獲得焦點,注意:某些元素沒有焦點的概念

:contains()//匹配包含給定文字的元素,例:$("div:contains('test')")

:empty//匹配所有不包含子元素或者文字的空元素

:has()//匹配元素中包含某元素的元素,例:$("div:has(span)")

:parent//匹配含有子元素或者文字的元素

:hidden//匹配所有不可見元素,或者type為hidden的元素

:visible//匹配所有的可見元素

:nth-child()//匹配其父元素下的第n個子或奇偶元素,從1開始計數,例:$("ul li:nth-child(2)")

:first-child//匹配第乙個子元素

:last-child//匹配最後乙個子元素

:only-child//如果某個元素是父元素中唯一的子元素,那將會被匹配

:input//匹配所有 input, textarea, select 和 button 元素

:button//匹配所有按鈕

:text//匹配所有的單行文字框

:password//匹配所有密碼框

:radio//匹配所有單選按鈕

:checkbox//匹配所有核取方塊

:file//匹配所有檔案域

:submit//匹配所有提交按鈕

:reset//匹配所有重置按鈕

:hidden//匹配所有不可見元素,或者type為hidden的元素

:image//匹配所有影象域

:enabled//匹配所有可用元素

:disabled//匹配所有不可用元素

:checked//匹配所有選中的被選中元素(核取方塊、單選框等,不包括select中的option)

:selected//匹配所有選中的option元素

parent > child//在給定的父元素下匹配所有的子元素

prev + next//匹配所有緊接在 prev 元素後的 next 元素

prev ~ siblings//匹配 prev 元素之後的所有 siblings 元素

屬性

相關選擇器

[attribute]//匹配給定的屬性是某個特定值的元素,例:$("div[id]")

[attribute=value]//匹配給定的屬性是某個特定值的元素,例:$("input[name='test']").attr("checked", true);

[attribute!=value]//匹配所有不含有指定的屬性,或者屬性不等於特定值的元素,例:$("input[name!='test']").attr("checked", true);

[attribute^=value]//匹配給定的屬性是以某些值開始的元素,例:$("input[name^='test']"),比如能匹配出test1、test2...

[attribute$=value]//匹配給定的屬性是以某些值結尾的元素,例:$("input[name$='test']"),比如能匹配出1test、2test...

[attribute*=value]//匹配給定的屬性是以包含某些值的元素,例:$("input[name*='test']")

[selector1][selector2][selectorn]//復合屬性選擇器,需要同時滿足多個條件時使用,例:$("input[id][name$='man']")

注意:

$("button#test")//這種挨著寫的方式button和#test是從屬關係

$("button,#test")//這種用","隔開寫的方式button和#test是並列關係

jQuery選擇器總結

父元素中所有的子元素,不包括後代元 父元素 子元素 選擇某元素的緊挨著的元素 如果不存在則什麼都不選擇 某元素 需要查詢的元素 層次選擇器4 個 選擇父元素中的某些元素 父元素 子元素 選擇選擇兄弟元素 可以間隔其他元素 某元素 需要查詢的元素 簡單選擇器10 個 簡單選擇器的特點是有個 first...

Jquery選擇器總結

jquery中的選擇器通用的格式為 selector 這裡的selector總的來說可以按照幾種類別進行選擇 1 按照元素的名稱選 這時直接寫元素的名稱即可,此時返回的是所有該名稱元素的集合。如 a 選擇所有的元素,是個集合陣列 p 選擇所有的元素 2 按照元素的id屬性選擇 這時selector的...

jQuery選擇器總結

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...