jQuery父級以及同級元素查找

一、jQuery父級以及同級元素查找

1、獲取父節(jié)點

注意與parents的區(qū)別,parents()從自身的父節(jié)點開始向上遍歷,返回所有祖先節(jié)點,并根據(jù)選擇器對這些節(jié)點進行篩選,最終返回的jQuery對象可能包含0、1或者多個對象??,而parent它只向上搜索一層。

closest()從自身開始向上遍歷,直到找到一個適合的節(jié)點(一般只找到與其臨近的父級節(jié)點),返回的jQuery對象包含0個或者1個對象;

2、兄弟節(jié)點 siblings??/next??(都是往下獲取節(jié)點)

$(function(){

$('.one').siblings().css({background:'red'})

// $('.one').next().css({background:'red'})????//next只返回一個節(jié)點,即下一個

// $('.one').nextAll().css({background:'red'})????//nextAll返回所有之后的兄弟節(jié)點,在nextAll()里可以進行傳參 ,進行過濾。

// $('.one').nextUntil('.b').css({background:'green'})???//可傳參亦可不傳參,若傳參直到哪一個終止,不包括傳參的那個值

// $('li').css({background:'orange'}).filter('.b').css({background:'pink'})

// $('li').not('.b').css({background:'pink'})

})

<ul>

? <li class="one"></li>

? <li class="b"></li>

?<li></li>

往前獲取節(jié)點:prev(),返回上一個兄弟節(jié)點,不是所有的兄弟節(jié)點,而prevAll()返回所有之前的兄弟節(jié)點

3、獲取子節(jié)點?

children()? 返回所有子節(jié)點,該方法只返回直接的孩子節(jié)點,不會返回所有的子孫節(jié)點。如果我們沒有應用選擇器表達式,返回的 jQuery 對象包含了所有子元素。如果應用一個選擇器的話,那么只會包括匹配的項目。

fin的()是遍歷當前元素集合中每個元素的后代。只要符合,不管是兒子輩,孫子輩都可以;與其他的樹遍歷方法不同,選擇器表達式對于 .find() 是必需的參數(shù)。如果我們需要實現(xiàn)對所有后代元素的取回,可以傳遞通配選擇器 '*'。find只在后代中遍歷,不包括自己。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲取DOM節(jié)點,從而進行一系列的DOM操作。但實際上...
    阿r阿r閱讀 1,043評論 0 9
  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 670評論 0 3
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關注...
    前端進階之旅閱讀 16,679評論 18 503
  • 第1章 簡介 第2章 DOM節(jié)點的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 833評論 0 8
  • 在每個人的社交圈子里,都會有這樣一類人,他們做事情并沒有什么實際行動,只憑借著一張伶牙俐齒的嘴贏得一切。 我之前覺...
    巴黎有朵瑜閱讀 432評論 1 5