jq選擇器物件篩選

2022-03-28 02:17:22 字數 3019 閱讀 6709

1.選擇物件

1).基本

·#id 根據給定的id匹配乙個元素。例如:$("#id")

·element 根據給定的元素名匹配所有元素。例如:$("div")

·.class 根據給定的類匹配元素。例如:$(".style1");

·* 匹配所有元素。例如:$("*")

·selector1,selector2,selectorn 將每乙個選擇器匹配到的元素合併後一起返回。例如:$("#id,div,.style1")

2).表單

·:button 匹配所有按鈕。例如:$(":button")

·:checkbox 匹配所有核取方塊。例如:$(":checkbox")

·:file 匹配所有檔案域。例如:$(":file")

·:hidden 匹配所有不可見元素,或者type為hidden的元素。例如:$("input:hidden")

·:image 匹配所有影象域。例如:$(":image")

·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")

·:password 匹配所有密碼框。例如:$(":password")

·:radio 匹配所有單選按鈕。例如:$(":radio")

·:reset 匹配所有重置按鈕。例如:$(":reset")

·:submit 匹配所有提交按鈕。例如:$(":submit")

·:text 匹配所有的單行文字框。例如:$(":text")

·:header 匹配如 h1, h2, h3之類的標題元素。例如:$(":header").css("background", "#eee");

2.篩選條件

1).屬性篩選

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

·[attribute!=value] 匹配所有含有指定的屬性,但屬性不等於特定值的元素。例如:$(input[name!='man');

·[attribute$=value] 匹配給定的屬性是以某些值結尾的元素。例如:$("input[name$='man']")

·[attribute=value] 匹配給定的屬性是某個特定值的元素。例如:$("input[name='man']");

·[attribute] 匹配包含給定屬性的元素。例如:$("div[id]")

·[attribute^=value] 匹配給定的屬性是以某些值開始的元素。例如:$("input[name^='man']")

·[selector1][selector2][selectorn] 同時滿足多個條件。例如:$("input[id][name$='man']")

·:hidden 匹配所有的不可見元素。例如:$("tr:hidden")

·:visible 匹配所有的可見元素。例如:$("tr:visible")

·:checked 匹配所有選中的被選中元素(核取方塊、單選框等,不包括select中的option)。例如:$("input:checked")

·:disabled 匹配所有不可用元素。例如:$("input:disabled")

·:enabled 匹配所有可用元素。例如:$("input:enabled")

·:selected 匹配所有選中的option元素。例如:$("select option:selected")

2).內容篩選

·:contains(text) 匹配包含給定文字的元素。例如:$("div:contains('john')")

·:empty 匹配所有不包含子元素或者文字的空元素。例如:$("td:empty")

·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如:$("div:has(p)");

·:parent 匹配含有子元素或者文字的元素。例如:$("td:parent")

3).層級篩選

·ancestor descendant 在給定的祖先元素下匹配所有的後代元素。例如:$("form input")

·parent > child 在給定的父元素下匹配所有的子元素。例如:$("form > input")

·prev + next 匹配所有緊接在 prev 元素後的 next 元素。例如:$("label + input")

·prev ~ siblings 匹配 prev 元素之後的所有 siblings 元素。例如:$("form ~ input")

·:first-child 匹配第乙個子元素。例如:$("ul li:first-child")

·:last-child 匹配最後乙個子元素。例如:$("ul li:last-child")

·:nth-child(index/even/odd/equation) 匹配其父元素下的第n個子或奇偶元素。例如:$("ul li:nth-child(2)")

·:only-child 如果某個元素是父元素中唯一的子元素,那將會被匹配。例如:$("ul li:only-child")

4).方法篩選

·:animated 匹配所有正在執行動畫效果的元素。例如:$("div:animated");

·:eq(index) 匹配乙個給定索引值的元素。例如:$("tr:eq(1)")

·:even 匹配所有索引值為偶數的元素,從 0 開始計數。例如:$("tr:even")

·:first 匹配找到的第乙個元素。例如:$("tr:first")

·:gt(index) 匹配所有大於給定索引值的元素,從 0 開始計數。例如:$("tr:gt(0)")

·:last 匹配找到的最後乙個元素。例如:$("tr:last")

·:lt(index) 匹配所有小於給定索引值的元素。例如:$("tr:lt(2)")

·:not(selector) 去除所有與給定選擇器匹配的元素。例如:$("input:not(:checked)")

·:odd 匹配所有索引值為奇數的元素,從 0 開始計數。例如:$("tr:odd") 

jQ內容篩選選擇器

jq內容篩選選擇器 1.查詢所有class div 中dom元素中包含 contains 的元素節點 並且設定顏色 div contains contains css color cd00cd 2.查詢所有class div 中dom元素中包含 span 的元素節點 並且設定顏色 div has s...

JQ樣式篇 篩選選擇器

篩選選擇器的用法與css中的偽元素相似,選擇器用冒號 開頭,通過乙個列表,看看基本篩選器的描述 注意事項 eq lt gt even,odd 用來篩選他們前面的匹配表示式的集合元素,根據之前匹配的元素在進一步篩選,注意jquery合集都是從0開始索引 eq 在匹配的集合中選擇索引值為index的元素...

JQ常用入口函式 選擇器 篩選選擇器 方法整理

獲取型 布局有鏈式程式設計 設定型 具有鏈式程式設計 當操作是設定型元素 可以一直鏈式程式設計 當操作是獲取型元素 不可以一直鏈式程式設計 斷鏈 1.jq的入口函式 1.function 2.document ready function 3.jquery function 2.dom與就jq互 d...