JavaScript和jquery獲取父級(jí)元素、子級(jí)元素、兄弟元素的方法
更新時(shí)間:2016年06月05日 09:44:30 投稿:hebedich
本文給大家簡(jiǎn)單總結(jié)了下JavaScript和jquery獲取父級(jí)元素、子級(jí)元素、兄弟元素的方法,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下
最近工作中總遇到取各種父啊子啊兄弟姐妹啊,每次都得查,這次整理個(gè)全乎的~
先給大家上干貨:
【js的獲取方式】
<div id = "dom">
<div></div>
<div></div>
<div></div>
</div> function dom(){ var a = document.getElementByIdx_x_x("dom"); var b = a.childNodes; 獲取a的全部子節(jié)點(diǎn) var c = a.parentNode; 獲取a的父節(jié)點(diǎn) var d = a.nextSbiling; 獲取a的下一個(gè)兄弟節(jié)點(diǎn) var e = a.previousSbiling;獲取a的上一個(gè)兄弟節(jié)點(diǎn) var f = a.firstChild; 獲取a的第一個(gè)子節(jié)點(diǎn) var g = a.lastChild; 獲取a的最后一個(gè)子節(jié)點(diǎn) }
【jQuery的獲取方式】
jQuery.parent(expr) 找父親節(jié)點(diǎn),可以傳入expr進(jìn)行過(guò)濾,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),類(lèi)似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子節(jié)點(diǎn),這個(gè)方法只會(huì)返回直接的孩子節(jié)點(diǎn),不會(huì)返回所有的子孫節(jié)點(diǎn) jQuery.contents(),返回下面的所有內(nèi)容,包括節(jié)點(diǎn)和文本。這個(gè)方法和children()的區(qū)別就在于,包括空白文本,也會(huì)被作為一個(gè) jQuery對(duì)象返回,children()則只會(huì)返回節(jié)點(diǎn) jQuery.prev(), 返回上一個(gè)兄弟節(jié)點(diǎn),不是所有的兄弟節(jié)點(diǎn) jQuery.prevAll(),返回所有之前的兄弟節(jié)點(diǎn) jQuery.next(), 返回下一個(gè)兄弟節(jié)點(diǎn),不是所有的兄弟節(jié)點(diǎn) jQuery.nextAll(),返回所有之后的兄弟節(jié)點(diǎn) jQuery.siblings(), 返回兄弟姐妹節(jié)點(diǎn),不分前后 jQuery.find(expr),跟jQuery.filter(expr)完全不一樣。jQuery.filter()是從初始的jQuery對(duì)象集合中篩選出一部分,而jQuery.find()的返回結(jié)果,不會(huì)有初始集合中的內(nèi)容,比如$("p"),find("span"),是從p元素開(kāi)始找,等同于$("p span")
相關(guān)文章
IE瀏覽器下JS腳本提交表單后,不能自動(dòng)提示問(wèn)題解決方法
這篇文章主要介紹了IE瀏覽器下JS腳本提交表單后,不能自動(dòng)提示問(wèn)題解決方法,涉及IE瀏覽器配置與javascript事件處理操作技巧,需要的朋友可以參考下2019-06-06JavaScript設(shè)置IFrame高度自適應(yīng)(兼容各主流瀏覽器)
IFrame高度的設(shè)置問(wèn)題一直都是前端的噩夢(mèng)而且還要兼容各主流瀏覽器更是難上加難了,下面與大家分享下一個(gè)不錯(cuò)的技巧,感興趣的你可以參考下哈2013-06-06JavaScript代碼實(shí)現(xiàn)春晚劉謙魔術(shù)的模擬程序
昨晚春晚上劉謙的兩個(gè)魔術(shù)表演都非常精彩,尤其是第二個(gè)魔術(shù),他演繹了經(jīng)典的約瑟夫環(huán)問(wèn)題!約瑟夫環(huán)是一個(gè)經(jīng)典的數(shù)學(xué)問(wèn)題,本文給出了完整的 JavaScript 代碼實(shí)現(xiàn),感興趣的同學(xué)可以自己動(dòng)手實(shí)現(xiàn)一下2024-02-02JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果,涉及javascript結(jié)合鼠標(biāo)事件對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-09-09