jquery和css3中的選擇器nth-child使用方法和用途示例
nth-child(),是CSS3中的一個(gè)偽類選擇符,JQuery選擇器繼承了CSS的部分語法,允許通過標(biāo)簽名、屬性名、內(nèi)容對DOM元素進(jìn)行快速、準(zhǔn)確的選擇。
本文通過對如下html中的div內(nèi)容作處理改變,來講解jquery和css3中的選擇器nth-child使用方法和用途。
<div id="content"> <p>標(biāo)題1</p> <p>內(nèi)容1</p> <p>標(biāo)題2</p> <p>內(nèi)容2</p> <p>標(biāo)題3</p> <p>內(nèi)容3</p> <p>標(biāo)題4</p> <p>內(nèi)容4</p> </div>
CSS3偽類選擇器:nth-child()
:nth-child(n) 選擇器匹配父元素中的第 n 個(gè)子元素,元素類型沒有限制。
n 可以是一個(gè)數(shù)字,一個(gè)關(guān)鍵字,或者一個(gè)公式。
nth-child()的幾種用法
一:nth-child(number) 直接匹配第number個(gè)元素。參數(shù)number必須為大于0的整數(shù)。
二:nth-child(an)匹配所有倍數(shù)為a的元素。其中參數(shù)an中的字母n不可缺省,它是倍數(shù)寫法的標(biāo)志,如3n、5n
三:nth-child(an+b) 與 :nth-child(an-b) 先對元素進(jìn)行分組,每組有a個(gè),b為組內(nèi)成員的序號,其中字母n和加號+不可缺省,位置不可調(diào)換,這是該寫法的標(biāo)志,其中a,b均為正整數(shù)或0。如3n+1、5n+1。但加號可以變?yōu)樨?fù)號,此時(shí)匹配組內(nèi)的第a-b個(gè)。
四:nth-child(-an+b) 此處一負(fù)一正,均不可缺省,否則無意義。這時(shí)與:nth-child(an+1)相似,都是匹配第1個(gè),但不同的是它是倒著算的,從第b個(gè)開始往回算,所以它所匹配的最多也不會(huì)超過b個(gè)。
五:nth-child(odd) 與 :nth-child(even) 分別匹配序號為奇數(shù)與偶數(shù)的元素。奇數(shù)(odd)與(2n+1)結(jié)果一樣;偶數(shù)(even)與(2n+0)及(2n)結(jié)果一樣。
css3實(shí)現(xiàn)隔行變色
加入css,四處標(biāo)題全部變?yōu)榧t色,代碼如下:
#content p:nth-child(2n+1) { background-color: red; }
jQuery :nth-child() 選擇器
:nth-child(n) 選擇器選取屬于其父元素的不限類型的第 n 個(gè)子元素的所有元素。
語法
:nth-child(n|even|odd|formula)
參數(shù) | 描述 |
---|---|
n | 要匹配的每個(gè)子元素的索引。 必須是一個(gè)數(shù)字。第一個(gè)元素的索引號是 1。 |
even | 選取每個(gè)偶數(shù)子元素。 |
odd | 選取每個(gè)奇數(shù)子元素。 |
formula | 規(guī)定哪個(gè)子元素需通過公式 (an + b) 來選取。 實(shí)例:p:nth-child(3n+2) 選取每個(gè)第三段,從第二個(gè)子元素開始。 |
jQuery實(shí)現(xiàn)隔行變色
<script type="text/javascript"> $(function(){ $("#content p:nth-child(odd)").css("color","red"); }); </script>
jQuery替換p標(biāo)簽為h2標(biāo)簽,內(nèi)容不變
<script type="text/javascript"> $(function(){ $("#content p:nth-child(odd)").each(function(){ $(this).replaceWith('<h2>'+$(this).html()+'</h2>'); }); }); </script>
到此這篇關(guān)于jquery和css3中的選擇器nth-child使用方法和用途示例的文章就介紹到這了,更多相關(guān)jquery和css3中的nth-child內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時(shí)可以對不同進(jìn)制進(jìn)行操作
這篇文章主要介紹了js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時(shí)可以對不同進(jìn)制進(jìn)行操作,需要的朋友可以參考下2014-03-03javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換
本節(jié)主要介紹了javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換,需要的朋友可以參考下2014-07-07json_decode 索引為數(shù)字時(shí)自動(dòng)排序問題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù),結(jié)果順序不對,經(jīng)debug調(diào)試,發(fā)現(xiàn)是json_encode 函數(shù)的問題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03Javascript動(dòng)態(tài)伸縮+淡出淡入
一種不錯(cuò)代碼應(yīng)用實(shí)例,大家可以根據(jù)這個(gè)代碼,拓寬出更好的代碼2009-02-02JavaScript 組件之旅(三):用 Ant 構(gòu)建組件
我們走到哪兒了?前兩期思考了太多東西,你是否已有倦意?別擔(dān)心,本期的話題很輕松,你只需要簡單了解一些語法,寫幾行配置,就能驅(qū)使系統(tǒng)按你預(yù)設(shè)的方式自動(dòng)完成一些工作。2009-10-10GitHub上一些實(shí)用的JavaScript的文件壓縮解壓縮庫推薦
這篇文章主要介紹了GitHub上一些實(shí)用的JavaScript的文件壓縮解壓縮庫推薦,推薦的這幾個(gè)都是支持zip格式的,需要的朋友可以參考下2016-03-03JSON是什么?有哪些優(yōu)點(diǎn)?JSON和XML的區(qū)別?
這篇文章主要介紹了JSON是什么?有哪些優(yōu)點(diǎn)?JSON和XML的區(qū)別?下面就來詳細(xì)的介紹兩種的區(qū)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04layui實(shí)現(xiàn)table加載的示例代碼
今天小編就為大家分享一篇layui實(shí)現(xiàn)table加載的示例代碼,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08令按鈕懸浮在(手機(jī))頁面底部的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄畎粹o懸浮在(手機(jī))頁面底部的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05