jQuery選擇器的常用方法(節點擊擇)

2021-09-02 19:41:49 字數 2255 閱讀 4263

1.查詢所有符合條件的元素 find()

$('ul').find('li').addclass('tmpexample');
查詢頁面中ul元素下的所有li元素,並為查詢到的li元素增加tmpexample樣式。

2.查詢指定元素的兄弟節點 siblings()

$('li#tmpcarrot').slblings().addclass('tmpexample');
查詢id為tmpcarrot的li元素所有的兄弟節點,並為查詢到的兄弟節點增加tmpexample樣式。

可以在slblings()的括號中新增選擇器來查詢指定條件的兄弟節點。如:slblings('.tmpclass'),就是查詢類為tmpclass的兄弟節點。

3.查詢指定節點的下乙個兄弟節點 next()

$('li#tmpbroccoli').next().addclass('tmpexample');
查詢id為tmpbroccoli的li節點的下一兄弟節點。並為查詢到的兄弟節點增加tmpexample樣式。

4.查詢指定節點的後面的所有兄弟節點 nextall()

$('li#tmpbroccoli').nextall().addclass('tmpexample');
查詢id為tmpbroccoli的li節點後面的所有兄弟節點。並為查詢到的兄弟節點增加tmpexample樣式。

5.查詢指定節點的前乙個兄弟節點 prev()

$('li#tmpbroccoli').prev().addclass('tmpexample');
查詢id為tmpbroccoli的li節點的前乙個兄弟節點。並為查詢到的兄弟節點增加tmpexample樣式。

6.查詢指定節點的前面所有的兄弟節點 prevall()

$('li#tmpbroccoli').prevall().addclass('tmpexample');
查詢id為tmpbroccoli的li節點的前面所有的兄弟節點。並為查詢到的兄弟節點增加tmpexample樣式。

可以在prevall()的括號中新增選擇器來查詢指定條件的兄弟節點。如:prevall('li.tmpclass'),就是查詢當前節點前面所有類為tmclass的兄弟節點。

7.查詢所有符合條件的上級節點 parents()

$('li#tmpcarrot').parents('div#tmpselection').addclass('tmpexample');
查詢id為tmpcarrot的li節點所有id為tmpselection的div上級節點。並為查詢到的節點增加tmpexample樣式。

8.查詢上級節點 parent()

$('li#tmpcarrot').parent().addclass('tmpexample');
查詢id為tmpcarrot的li節點的上級節點。並為查詢到的節點增加tmpexample樣式。

9.查詢子節點 children()

$('div.tmplist').children('h4').addclass('tmpexample');
查詢class為tmplist的div下面的子節點中為h4標籤的。並為查詢到的節點增加tmpexample樣式。

10.查詢到的節點集合中反選 not()

$('ul li').not('li.tmpvegetables').addclass('tmpexample');
查詢到的li集合中,除了class為tmpvegetables的節點,都增加乙個tmpexample樣式。

11.選擇節點集合中的片段 slice()

$('ul li').slice(1,4).addclass('tmpexample');
查詢到的li集合中,選擇從第1個(從0計數,第乙個其實是第二個)節點開始的,向後4個節點,並為這4個節點增加tmpexample樣式。

12.向查詢的結果集中新增節點 add()

$('ul#tmpanimals li').add('li#tmpbrocoli,li#tmppepper').addclass('tmpexample');
id為tmpanimals的ul節點下的li節點集,新增id為tmpbrocoli的li節點和新增id 為tmppepper的li節點。並將組合後的集合中所有li節點增加tmpexample樣式。

13.結果集中選擇指定元素 eq()

$('ul li').eq(10).addclass('tmpexample');
頁面ul下面的li集合中,給第10元素增加tmpexample樣式。

jQuery選擇器常用方法

children 返回被選元素的所有直接子元素 selector children filter filter 可選,選擇器表示式 parents 返回被選元素的所有祖先元素 selector parents filter find 返回被選元素的後代元素 selector find filter ...

jQuery 選擇器與常用的方法

2 jquery中的常規選擇器 1 jquery中有的選擇器 class類 元素類 id類 群組選擇器 後代選擇器 通配 選擇器 2 jquery中的選擇器與css中的選擇器非常相似 只是有些許的不同 3 class類與元素類都可以選擇多個進行設定 4 id類只能選擇乙個 若乙個頁面中出現多個id值...

jquery 常用選擇器

myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用myclass類的css的所有元素 選擇文件中的所有的元素,可以運用多種的選擇方...