jQuery中:nth-child選擇器用法實(shí)例
本文實(shí)例講述了jQuery中:nth-child選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器匹配其父元素下的第N個(gè)子或奇偶元素。
:eq(index)選擇器只匹配一個(gè)元素，而:nth-child選擇器將為每一個(gè)父元素匹配子元素。
:nth-child從1開(kāi)始的，而:eq()是從0開(kāi)始。
語(yǔ)法結(jié)構(gòu):
此選擇器一般也要和其他選擇器配合使用，比如類選擇器、元素選擇器等等。例如:
以上代碼能夠?qū)⒏冈叵碌诙€(gè)li元素中的字體顏色設(shè)置為藍(lán)色。也可以計(jì)算父元素的奇偶子元素。例如:
以上代碼能夠?qū)⒏冈叵碌呐判驗(yàn)榕紨?shù)的li元素中的字體顏色設(shè)置為藍(lán)色。
注意:這里有必要結(jié)合上面的代碼再對(duì)概念進(jìn)行一下說(shuō)明。這里所說(shuō)的父元素并不是li，而是li的父元素。
很多人往往誤以為是匹配li元素的子元素中的最后一個(gè)元素。
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>:nth-child選擇器-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li:nth-child(2)").css("color","blue")
})
})
</script>
</head>
<body>
<div>
<ul>
<li class="houtai" title="asp">ASP教程</li>
<li class="houtai" title="net">ASP.NET教程</li>
<li class="houtai" title="php">;PHP教程</li>
</ul>
<ul>
<li class="qiantai" title="html">html教程</li>
<li class="qiantai" title="div">DIV+CSS教程</li>
<li class="qiantai" title="jquery">jQUERY教程</li>
<li class="qiantai" title="js">jAVAScript教程</li>
</ul>
</div>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- 淺析jQuery事件之on()方法綁定多個(gè)選擇器,多個(gè)事件
- jQuery移動(dòng)端日期(datedropper)和時(shí)間(timedropper)選擇器附源碼下載
- jQuery插件實(shí)現(xiàn)適用于移動(dòng)端的地址選擇器
- jquery通過(guò)closest選擇器修改上級(jí)元素的方法
- NodeJS使用jQuery選擇器操作DOM
- jQuery選擇器querySelector的使用指南
- JQuery選擇器綁定事件及修改內(nèi)容的方法
- jQuery大于號(hào)(>)選擇器的作用解釋
- jQuery中:selected選擇器用法實(shí)例
- jQuery中:first-child選擇器用法實(shí)例
- jQuery選擇器總結(jié)之常用元素查找方法
相關(guān)文章
jQuery使用ajax_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery使用ajax的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
我們就中和下利用JQuery來(lái)和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用2011-01-01
這篇文章主要介紹了jQuery表單驗(yàn)證功能,涉及jquery針對(duì)表單項(xiàng)的讀取與正則判定技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
淺談如何實(shí)現(xiàn)easyui的datebox格式化
這篇文章主要和大家一起聊一聊如何實(shí)現(xiàn)easyui的datebox格式化的方法，感興趣的小伙伴們可以參考一下2016-06-06
jQuery的選擇器非常強(qiáng)大,使你可以輕松選取頁(yè)面中任何一個(gè)對(duì)象,下面我們就主要針對(duì)DOM操作來(lái)看一下jQuery中選擇器的基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05
Jquery拖拽并簡(jiǎn)單保存的實(shí)現(xiàn)代碼
今閑著無(wú)聊 順便看了下jquery ui的拖拽插件，實(shí)現(xiàn)拖拽的方法很簡(jiǎn)單，看到效果后興奮小下...2010-11-11
Lazy Load是一個(gè)用 JavaScript 編寫的jQuery插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 本文對(duì)它進(jìn)行實(shí)例介紹，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12![JQuery 無(wú)廢話系列教程(一) jquery入門 [推薦]](http://img.jbzj.com/images/xgimg/bcimg7.png)
JQuery 無(wú)廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會(huì)用點(diǎn)JQuery的那一類型, 在學(xué)習(xí)過(guò)程中也遇到挺多問(wèn)題,特別是在開(kāi)始入門的時(shí)候.一直準(zhǔn)備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯(cuò)誤或者不合適的理解望廣大朋友直接指出批評(píng).2009-06-06
jquery京東商城雙11焦點(diǎn)圖多圖廣告特效代碼分享
這篇文章主要介紹了jquery京東商城雙11焦點(diǎn)圖多圖廣告特效，一個(gè)精致的焦點(diǎn)圖會(huì)吸引用戶的注意力，讓用戶產(chǎn)生瀏覽網(wǎng)站的興趣至關(guān)重要，現(xiàn)在小編推薦給大家一款特別棒的焦點(diǎn)圖，感興趣的小伙伴可以參考下。2015-09-09
JQuery中$.each 和$(selector).each()的區(qū)別詳解
這篇文章主要介紹了JQuery中$.each 和$(selector).each()的區(qū)別詳解,本文給出了多個(gè)例子講解了它們之間的不同之處,需要的朋友可以參考下2015-03-03