jQuery選擇器的靈活用法

2021-08-31 05:37:33 字數 3891 閱讀 8679

jquery中選擇器很強大,可以根據元素名稱、id、class等多種方式進行選擇,

$("div"),

選則所有div元素

nihaochina!!!

,china!!!

$("#id"),

選擇id="id"的元素

$(".classname"), 

選擇class="classname"的所有元素

china!!!

也可以多個方式一起使用,提高效率,

$("#id  div  .classname")  ,      

選擇id="id"的元素下面class="classname"的所有div

china!!!

亦可以同時選取多個元素進行操作,

$("#id , .classname"),          

選擇id="id"的元素,以及class="classname"的元素

,china!!!

注意通過$選取獲得的是jquery物件而不是dom元素,若想轉換成dom元素可以採用get()方法。

層級選擇器:

$("#id  div  .classname")        

選擇父元素下面的所有子元素,這裡要選擇的是#id 下面的所有的div中的所有class名為classname的元素。

$("body>div")

選擇父元素的下一級別且僅為下一級別的子元素。

nihaochina!!!

。$("prev+next")

緊跟在prev後面的元素。(找兄弟節點)

$("ul~input")

找出所有與ul同輩的input元素。

其他一些特殊的匹配規則:

john

resig

george martin

malcom john sinclair

$("div:contains(george)") ,

匹配包含指定文字的元素,

george martin

$("div:has(p)"),

匹配包含指定元素"p"的元素,

john

resig

$("div:first"),

獲取第乙個元素,

john

resig

$("div:last"),

獲取最後乙個元素,

malcom john sinclair

。$("div:even"),

匹配所有索引為偶數的元素,

john

resig

,malcom john sinclair

$("div:odd"),

匹配所有索引為奇數的元素,

george martin

基本選擇器

$(」#mydiv」) 匹配唯一的具有此id值的元素

$(」div」) 匹配指定名稱的所有元素

$(」.myclass」) 匹配具有此class樣式值的所有元素

$(」*」) 匹配所有元素

$(」div,span,p.myclass」) 聯合所有匹配的選擇器

層疊選擇器

$(」form input」) 後代選擇器,選擇ancestor的所有子孫節點

$(」#main > *」) 子選擇器,選擇parent的所有子節點

$(」label + input」) 臨選擇器,選擇prev的下乙個臨節點(同級別節點)

$(」#prev ~ div」) 同胞選擇器,選擇prev的所有同胞節點

基本過濾選擇器

$(」tr:first」) 匹配第乙個選擇的元素

$(」tr:last」) 匹配最後乙個選擇的元素

$(」input:not(:checked) + span」)從原元素集合中過濾掉匹配selector的所有元素(這裡有是乙個臨選擇器)

$(」tr:even」) 匹配集合中偶數字置的所有元素(從0開始)

$(」tr:odd」) 匹配集合中奇數字置的所有元素(從0開始)

$(」td:eq(2)」) 匹配集合中指定位置的元素(從0開始)

$(」td:gt(4)」) 匹配集合中指定位置之後的所有元素(從0開始)

$(」td:gl(4)」) 匹配集合中指定位置之前的所有元素(從0開始)

$(」:header」) 匹配所有標題

$(」div:animated」) 匹配所有正在執行動畫的所有元素

內容過濾選擇器

$(」div:contains(』john』)」) 匹配含有指定文字的所有元素

$(」td:empty」) 匹配所有空元素(只含有文字的元素不算空元素)

$(」div:has(p)」) 從原元素集合中再次匹配所有至少含有乙個selector的所有元素

$(」td:parent」) 匹配所有不為空的元素(含有文字的元素也算)

$(」div:hidden」) 匹配所有隱藏的元素,也包括表單的隱藏域

$(」div:visible」) 匹配所有可見的元素

屬性過濾選擇器

$(」div[id]」) 匹配所有具有指定屬性的元素

$(」input[name=』newsletter』]」) 匹配所有具有指定屬性值的元素

$(」input[name!=』newsletter』]」) 匹配所有不具有指定屬性值的元素

$(」input[name^=』news』]」) 匹配所有指定屬性值以value開頭的元素

$(」input[name$=』letter』]」) 匹配所有指定屬性值以value結尾的元素

$(」input[name*=』man』]」) 匹配所有指定屬性值含有value字元的元素

$(」input[id][name$=』man』]」) 匹配同時符合多個選擇器的所有元素

子元素過濾選擇器

$(」ul li:nth-child(2)」),

$(」ul li:nth-child(odd)」), 匹配父元素的第n個子元素

$(」ul li:nth-child(3n + 1)」)

$(」div span:first-child」) 匹配父元素的第1個子元素

$(」div span:last-child」) 匹配父元素的最後1個子元素

$(」div button:only-child」) 匹配父元素的唯一1個子元素

表單元素選擇器

$(」:input」) 匹配所有的表單輸入元素,包括所有型別的input, textarea, select 和button

$(」:text」) 匹配所有型別為text的input元素

$(」:password」) 匹配所有型別為password的input元素

$(」:radio」) 匹配所有型別為radio的input元素

$(」:checkbox」) 匹配所有型別為checkbox的input元素

$(」:submit」) 匹配所有型別為submit的input元素

$(」:image」) 匹配所有型別為image的input元素

$(」:reset」) 匹配所有型別為reset的input元素

$(」:button」) 匹配所有型別為button的input元素

$(」:file」) 匹配所有型別為file的input元素

$(」:hidden」) 匹配所有型別為hidden的input元素或表單的隱藏域

表單元素過濾選擇器

$(」:enabled」) 匹配所有可操作的表單元素

$(」:disabled」) 匹配所有不可操作的表單元素

$(」:checked」) 匹配所有已點選的元素

$(」select option:selected」) 匹配所有已選擇的元素

jQuery選擇器的靈活用法

jquery中選擇器很強大,可以根據元素名稱 id class等多種方式進行選擇,div 選則所有div元素 nihaochina china id 選擇id id 的元素 classname 選擇class classname 的所有元素 china 也可以多個方式一起使用,提高效率,id div...

jQuery選擇器的靈活用法

摘自 jquery中選擇器很強大,可以根據元素名稱 id class等多種方式進行選擇,div 選則所有div元素 nihaoclass classname china class classname china id 選擇id id 的元素 classname 選擇class classname ...

jquery 選擇器的常見的用法

最常用的選擇器 id,class 其中 為找到每乙個元素 其他的選擇器 animated 匹配所有正在執行動畫效果的元素,div not animated animate 1000 not selector 去除所有與給定選擇器匹配的元素,selector用於篩選的選擇器。button 匹配所有按鈕...