JQuery學(xué)習(xí)筆記 nt-child的使用
更新時(shí)間:2011年01月17日 17:39:24 作者:
在使用JQuery的時(shí)候如果你想尋找某個(gè)容器(諸如div或者是table中的某些子元素),那么很容易就使用find方法。
在使用JQuery的時(shí)候如果你想尋找某個(gè)容器(諸如div或者是table中的某些子元素),那么很容易就使用find方法。find將使用迭代的方式尋找所有符合條件的子元素,并且可以統(tǒng)一、批量的設(shè)置css等內(nèi)容。
比如有這樣一個(gè)table:
<table id="outer">
<tr>
<td>
<table id="nested">
<tr>
<td>
內(nèi)嵌Table,行1列1
</td>
<td>
內(nèi)嵌Table,行1列2
</td>
</tr>
<tr>
<td>
內(nèi)嵌Table,行2列1
</td>
<td>
內(nèi)嵌Table,行2列2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
第一個(gè)Table,行2列1
</td>
<td>
第一個(gè)Table,行2列2
</td>
</tr>
</table>
現(xiàn)在要求把所有的字體設(shè)置成藍(lán)色,直接這樣做即可。
$("table").css("color", "blue");
注意:$("table")表示頁面上“每一個(gè)table“都這樣設(shè)置。
下面看一個(gè)復(fù)雜的例子——
【把每個(gè)table的第二行第二列的字體設(shè)置成紅色】
或許你可能為這樣思考——因?yàn)?("table")表示“每一個(gè)table”,因此如果寫成“$(table tr:eq(1) td:eq(1)).css("color","red");就可以大功告成(每一個(gè)table的第二行第二列)……
真的是這樣嗎?你如果運(yùn)行一下結(jié)果,便大吃一驚——因?yàn)橹挥小皟?nèi)嵌Table,行1列1“變成了紅色!這根本不是我們預(yù)期的結(jié)果。
為什么呢?道理很簡單——因?yàn)镴Query如果通過空格分割html標(biāo)簽或者其它相關(guān)屬性,意味著是從“父標(biāo)簽”中逐個(gè)尋找自標(biāo)簽,滿足條件為止。結(jié)果就變成了“在父table中尋找所有的tr,找出滿足條件的第二個(gè)tr,然后尋找第二個(gè)tr中的第一個(gè)td,并且染成紅色!”
下面給出完整定義——
$("HTML標(biāo)簽,html子標(biāo)簽:eq(n) html子子標(biāo)簽:eq(n)……):從HTML標(biāo)簽(父)尋找滿足條件的第n+1個(gè)子標(biāo)簽,然后在第n+1個(gè)子標(biāo)簽中尋找第n+1個(gè)子標(biāo)簽……直到全部遍歷為止。
因此這種方法是錯(cuò)誤的,初學(xué)者尤其容易犯哦。
那么應(yīng)該怎么辦呢?有人想到了這個(gè)方法——
$("table").each(function () {
$(this).find("tr:eq(1) td:eq(1)").css("color", "red");
});
他的理由是:遍歷每一個(gè)table,然后把每一個(gè)table的第二行第二列設(shè)置顏色。
相比第一個(gè)答案,第二個(gè)人似乎聰明了一點(diǎn),他感悟到“table”父標(biāo)簽不會(huì)自行重復(fù)尋找(JQuery在前套標(biāo)簽的時(shí)候只會(huì)深度遍歷最里邊的那個(gè)標(biāo)簽,也就是藍(lán)色定義的“……”那個(gè)無窮大的部分)。因此想到用each——誠然,each的確解決了深度遍歷table的問題,但是第一個(gè)table的find依舊是按照藍(lán)色部分思路執(zhí)行(依舊尋找父table中第二個(gè)tr,第二個(gè)tr中的第二個(gè)td),所以find也是只有末尾HTML進(jìn)行深度遍歷。
此時(shí)我們只能使用這樣的方法:
$("tr:nth-child(2) td:nth-child(2)").css("color", "red");
nth-child(n)是CSS偽類的一個(gè)方法,可以用于JQuery,這個(gè)代碼的意思是:尋找離開第n個(gè)tr最近的容器元素,然后對(duì)自己進(jìn)行設(shè)置。
這樣一來,“tr:nth-child(2)”將分別對(duì)應(yīng)兩個(gè)<table>。從而可以設(shè)置樣式了。
比如有這樣一個(gè)table:
復(fù)制代碼 代碼如下:
<table id="outer">
<tr>
<td>
<table id="nested">
<tr>
<td>
內(nèi)嵌Table,行1列1
</td>
<td>
內(nèi)嵌Table,行1列2
</td>
</tr>
<tr>
<td>
內(nèi)嵌Table,行2列1
</td>
<td>
內(nèi)嵌Table,行2列2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
第一個(gè)Table,行2列1
</td>
<td>
第一個(gè)Table,行2列2
</td>
</tr>
</table>
現(xiàn)在要求把所有的字體設(shè)置成藍(lán)色,直接這樣做即可。
$("table").css("color", "blue");
注意:$("table")表示頁面上“每一個(gè)table“都這樣設(shè)置。
下面看一個(gè)復(fù)雜的例子——
【把每個(gè)table的第二行第二列的字體設(shè)置成紅色】
或許你可能為這樣思考——因?yàn)?("table")表示“每一個(gè)table”,因此如果寫成“$(table tr:eq(1) td:eq(1)).css("color","red");就可以大功告成(每一個(gè)table的第二行第二列)……
真的是這樣嗎?你如果運(yùn)行一下結(jié)果,便大吃一驚——因?yàn)橹挥小皟?nèi)嵌Table,行1列1“變成了紅色!這根本不是我們預(yù)期的結(jié)果。
為什么呢?道理很簡單——因?yàn)镴Query如果通過空格分割html標(biāo)簽或者其它相關(guān)屬性,意味著是從“父標(biāo)簽”中逐個(gè)尋找自標(biāo)簽,滿足條件為止。結(jié)果就變成了“在父table中尋找所有的tr,找出滿足條件的第二個(gè)tr,然后尋找第二個(gè)tr中的第一個(gè)td,并且染成紅色!”
下面給出完整定義——
$("HTML標(biāo)簽,html子標(biāo)簽:eq(n) html子子標(biāo)簽:eq(n)……):從HTML標(biāo)簽(父)尋找滿足條件的第n+1個(gè)子標(biāo)簽,然后在第n+1個(gè)子標(biāo)簽中尋找第n+1個(gè)子標(biāo)簽……直到全部遍歷為止。
因此這種方法是錯(cuò)誤的,初學(xué)者尤其容易犯哦。
那么應(yīng)該怎么辦呢?有人想到了這個(gè)方法——
復(fù)制代碼 代碼如下:
$("table").each(function () {
$(this).find("tr:eq(1) td:eq(1)").css("color", "red");
});
他的理由是:遍歷每一個(gè)table,然后把每一個(gè)table的第二行第二列設(shè)置顏色。
相比第一個(gè)答案,第二個(gè)人似乎聰明了一點(diǎn),他感悟到“table”父標(biāo)簽不會(huì)自行重復(fù)尋找(JQuery在前套標(biāo)簽的時(shí)候只會(huì)深度遍歷最里邊的那個(gè)標(biāo)簽,也就是藍(lán)色定義的“……”那個(gè)無窮大的部分)。因此想到用each——誠然,each的確解決了深度遍歷table的問題,但是第一個(gè)table的find依舊是按照藍(lán)色部分思路執(zhí)行(依舊尋找父table中第二個(gè)tr,第二個(gè)tr中的第二個(gè)td),所以find也是只有末尾HTML進(jìn)行深度遍歷。
此時(shí)我們只能使用這樣的方法:
$("tr:nth-child(2) td:nth-child(2)").css("color", "red");
nth-child(n)是CSS偽類的一個(gè)方法,可以用于JQuery,這個(gè)代碼的意思是:尋找離開第n個(gè)tr最近的容器元素,然后對(duì)自己進(jìn)行設(shè)置。
這樣一來,“tr:nth-child(2)”將分別對(duì)應(yīng)兩個(gè)<table>。從而可以設(shè)置樣式了。
相關(guān)文章
jquery UI Datepicker時(shí)間控件沖突問題解決
這篇文章主要介紹了jquery UI Datepicker時(shí)間控件沖突問題的解決,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12jquery text,radio,checkbox,select操作實(shí)現(xiàn)代碼
學(xué)習(xí)jquery的朋友看參考下,對(duì)form等文本框的一些控制實(shí)現(xiàn)代碼。2009-07-07使用jQuery實(shí)現(xiàn)的網(wǎng)頁版的個(gè)人簡歷(可換膚)
點(diǎn)擊姓名會(huì)顯示她的基本詳細(xì)信息,點(diǎn)擊切換皮膚,會(huì)更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實(shí)現(xiàn)的網(wǎng)頁版的個(gè)人簡歷2013-04-04jquery ajax,ashx,json的用法總結(jié)
本篇文章主要是對(duì)jquery ajax,ashx,json的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02jQuery窗口拖動(dòng)功能的實(shí)現(xiàn)代碼
本文通過jquery代碼實(shí)現(xiàn)窗口拖動(dòng)功能以及jQuery 鼠標(biāo)拖拽移動(dòng)窗口的實(shí)現(xiàn)代碼,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02jQuery UI 實(shí)例講解 - 日期選擇器(Datepicker)
下面小編就為大家?guī)硪黄猨Query UI 實(shí)例講解 - 日期選擇器(Datepicker)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09基于jQuery實(shí)現(xiàn)點(diǎn)擊同時(shí)更改兩個(gè)iframe的網(wǎng)址
最近寫了兩個(gè)管理后臺(tái)的前端頁面,其中有一個(gè)管理后臺(tái),左側(cè)菜單導(dǎo)航和右側(cè)內(nèi)容頁是兩個(gè)iframe,需求是,點(diǎn)擊上面的主導(dǎo)航時(shí),左側(cè)iframe和右側(cè)iframe調(diào)用不同的鏈接.2010-07-07