jQuery 樹(shù)形結(jié)構(gòu)的選擇器
DOM結(jié)構(gòu)其實(shí)也是一種樹(shù)形結(jié)構(gòu),jQuery提供的樹(shù)形選擇器可以用來(lái)選擇DOM Tree里的節(jié)點(diǎn)。這些樹(shù)形選擇器的方法包括:children(), parent(), parents(), next(), prev(), siblings().
選擇某個(gè)元素的"孩子" - children()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#parent").children().length //得到所有的”孩子“(li)的個(gè)數(shù),“3”
$("#parent").children("#son1").text(); //得到第一個(gè)”孩子“(li)的值 - “第一列”
選擇某個(gè)元素的“父母” - parent()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son1").parent().attr("id");//得到ul的ID - "parent"
選擇某個(gè)元素的“祖先”-parents() (注意:一級(jí)一級(jí)向上選擇直到<html>)
<div id="grand">
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
</div>
$("#son2").parents().each(function(i){
if(i<3) //只顯示3代祖先
alert($(this).html());
});
選擇某個(gè)元素的“弟弟” - next()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").next().text(); //選擇#son3選擇某個(gè)元素的“哥哥”
prev()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").prev().text(); //選擇#son1選擇某個(gè)元素的“兄弟”
siblings()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").siblings().text(); //選擇#son1和#son3
- jquery實(shí)現(xiàn)自定義樹(shù)形表格的方法【自定義樹(shù)形結(jié)構(gòu)table】
- jQuery 利用ztree實(shí)現(xiàn)樹(shù)形表格的實(shí)例代碼
- 推薦8款jQuery輕量級(jí)樹(shù)形Tree插件
- jQuery樹(shù)形控件zTree使用小結(jié)
- jquery ztree實(shí)現(xiàn)下拉樹(shù)形框使用到了json數(shù)據(jù)
- json+jQuery實(shí)現(xiàn)的無(wú)限級(jí)樹(shù)形菜單效果代碼
- jquery實(shí)現(xiàn)樹(shù)形菜單完整代碼
- jQuery ztree實(shí)現(xiàn)動(dòng)態(tài)樹(shù)形多選菜單
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹(shù)形菜單
- jQuery實(shí)現(xiàn)樹(shù)形員工信息表
相關(guān)文章
jQuery實(shí)現(xiàn)的下雪動(dòng)畫(huà)效果示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的下雪動(dòng)畫(huà)效果,涉及jQuery插件結(jié)合setInterval、animate進(jìn)行動(dòng)畫(huà)操作的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-02-02jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
這篇文章主要介紹了jQuery中bind(),live(),delegate(),on()綁定事件方法,結(jié)合實(shí)例形式詳細(xì)分析了bind(),live(),delegate(),on()方法綁定事件的具體使用技巧,并對(duì)比分析了四種方式的異同點(diǎn),需要的朋友可以參考下2016-01-01很棒的學(xué)習(xí)jQuery的12個(gè)網(wǎng)站推薦
jQuery是目前最流行的 JavaScript 庫(kù)。對(duì)于初學(xué)者來(lái)說(shuō),有的時(shí)候很難找到一個(gè)好的學(xué)習(xí)jQuery的網(wǎng)站,今天本文收集了12個(gè)很棒的 jQuery 學(xué)習(xí)網(wǎng)站推薦給大家。2011-04-04JQuyer $.post 與 $.ajax 訪(fǎng)問(wèn)WCF ajax service 時(shí)的問(wèn)題需要注意的地方
我注意到,當(dāng)在jquery中使用$.post()后,默認(rèn)的contentType是application/x-www-form-urlencoded 形式進(jìn)行了urlencoded - 當(dāng)我的asp.net MVC代碼需要的contentType=application/json2011-09-09Jquery實(shí)戰(zhàn)_讀書(shū)筆記2 選擇器
jQuery相對(duì)于其他的javascript框架優(yōu)秀的特點(diǎn)之一就是元素選擇功能,通過(guò)簡(jiǎn)單的一條件語(yǔ)句可以查詢(xún)一些復(fù)雜的元素2010-01-01JQuery 操作select標(biāo)簽實(shí)現(xiàn)代碼
我們經(jīng)常遇到要操作DOM元素,例如<select>,在Asp.net中Dropdownlist原型就是select。2010-05-05jquery獲取復(fù)選框checkbox的值的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery獲取復(fù)選框checkbox的值的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05