Jquery實(shí)現(xiàn)獲取子元素的方法分析
本文實(shí)例講述了Jquery實(shí)現(xiàn)獲取子元素的方法。分享給大家供大家參考,具體如下:
Jquery獲取子元素的方法有2種,分別是children()方法和find()方法。下面我們分別來使用這兩種方法,看看它們有何差異。
1.children()方法:獲取該元素下的直接子集元素
2.find()方法:獲取該元素下的所有子集元素
分別以以下HTML代碼為例:
<ul> <li> list1 <ul> <li> list1-1 </li> <li> list1-2 </li> </ul> </li> <li> list2 <ul> <li> list2-1 </li> <li> list2-2 </li> </ul> </li> <li> list3 <ul> <li> list3-1 </li> <li> list3-2 </li> </ul> </li> </ul>
3、children()方法獲取ul下面直接子集元素li:$("ul").children("li")
需要注意的是,如果li元素下還有l(wèi)i元素,children方法將不會(huì)被獲取。我們可以用length來測(cè)試獲取的個(gè)數(shù)“$("ul").children("li").length
”,最后輸出結(jié)果為3
4、find()方法獲取ul下所有元素li:$("ul").find("li")
需要注意的是,find方法會(huì)無限循環(huán)查找ul標(biāo)簽節(jié)點(diǎn)下的li,一直找到?jīng)]有為止,用length來測(cè)試獲取個(gè)數(shù)“$("ul").find("li").length
”,最后輸出結(jié)果為9
5、children和find的區(qū)別:children只會(huì)查找直接子集,而find會(huì)跨越層級(jí)查找,一直找到?jīng)]有為止。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery查找父元素、子元素(個(gè)人經(jīng)驗(yàn)總結(jié))
- 使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
- jQuery獲得子元素個(gè)數(shù)的方法
- jquery中獲取元素里某一特定子元素的代碼
- jQuery獲取所有父級(jí)元素及同級(jí)元素及子元素的方法(推薦)
- jquery使用remove()方法刪除指定class子元素
- Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例
- jquery判斷元素的子元素是否存在的示例代碼
- jquery刪除指定子元素代碼實(shí)例
- 輕松掌握jQuery獲取第二個(gè)子元素集合的技巧!
相關(guān)文章
jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02jQuery選擇器源碼解讀(四):tokenize方法的Expr.preFilter
這篇文章主要介紹了jQuery選擇器源碼解讀(四):tokenize方法的Expr.preFilter,本文用詳細(xì)的注釋解讀了tokenize方法的Expr.preFilter的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03jQuery動(dòng)態(tài)添加刪除select項(xiàng)(實(shí)現(xiàn)代碼)
以下是對(duì)jQuery動(dòng)態(tài)添加刪除select項(xiàng)的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下2013-09-09詳解jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)
AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁(yè)的情況下,能夠更新部分網(wǎng)頁(yè)的技術(shù)。下面通過本文給大家分享jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù),需要的的朋友參考下2017-07-07jquery實(shí)現(xiàn)多條件篩選特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)多條件篩選特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08