jQuery元素選擇

2021-05-26 12:34:49 字數 2286 閱讀 8626

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、查詢指定節點的後面的所有兄弟節點 next()

舉例:$('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選擇元素

參考 jquery基礎教程 雖然我個人覺得這本書的講解順序毫無邏輯,瞎搞 1.基於列表項的級別新增樣式 selected plays li addclass horizontal 查詢id為selected plays的元素的子元素中所有的列表項 selected plays li not hori...

JQuery元素選擇

1.基本元素選擇器 p 選取元素 p.info 選取所有class info 的元素 p demo 選取id demo 的第乙個元素 分層選擇器 使用這種選擇器時,需要傳入多個值,並用空格或大於號分隔。例如 div input 選擇div下所有的input div input 選擇父元素 div 下...

jquery 選擇相鄰元素 jQuery學習

不甘於 本該如此 多選引數 值得關注 選擇器名稱 描述返回 例項 id id選擇器 根據給定的id匹配乙個元素。單個元素 box 選取id為box元素 element 元素選擇器 根據給定的元素名匹配所有元素 集合元素 span 選取所有元素 class 類選擇器 根據給定的類匹配元素。集合元素 b...