俗話說內(nèi)行看門道、外行看熱鬧，對于外行來說寫代碼是一件自己感覺高大上但又感覺枯燥乏味的事情，自己總是覺得程序猿寫代碼很酷，但自己去嘗試的時候就會感覺太犯暈了。相信很多人都在曾想過，是神馬讓程序猿攻城獅堅持下去，當(dāng)然首當(dāng)其沖的理由肯定是為了生活，但除此之外我覺得更重要的就是自己的喜好。下面就一個只要稍微接觸程序設(shè)計的朋友都能看得懂的一個問題，來聊聊這些。

看到上面這張圖片會想到什么？當(dāng)然大家想不到，我就告訴大家吧，其實這種風(fēng)格大家見過，知識有所差異的，那就是百度百科的詞條，當(dāng)然這個例子沒百度百科那個復(fù)雜。也就是給文章中的標(biāo)題排上序號，并自動加上一些風(fēng)格。

我們知道在很多編輯器中都會有自動插入h1這個標(biāo)簽，比如wordpress的默認(rèn)編輯器的一級標(biāo)題其實就是在文本上套個h1標(biāo)簽。那么如果是一個單純的h1標(biāo)簽，要實現(xiàn)自動編號以及加上附加的風(fēng)格似乎有點兒問題。比如上面一部分的標(biāo)題風(fēng)格如果讓我們寫靜態(tài)的html+css文檔，我們會這么寫(當(dāng)然CSS部分針對不同的地方具體的屬性及值不同，而且html結(jié)構(gòu)也可以不同)。

<style>
h1 {margin: 15px 0 15px 0;text-align: left;margin-bottom: 20px;font-size: 16px;line-height: 1em;background: url(images/titleEditLine.png) center;}
h1 i {padding: 0 8px;background: #0096A5;font-size: 14px;color: #fff;}
em {padding: 0 15px 0 8px;background: #fff;}
</style>
<h1><i>1</i><em>講授課程</em></h1>

但實際上我們一個普通的編輯器默認(rèn)情況下html的結(jié)構(gòu)不太可能這樣，因為現(xiàn)在的狀態(tài)是h1里面包含了i和em，而實際上更多的時候編輯器出來的結(jié)果是這樣的。

<h1>講授課程</h1>

也就是我們得想個法子讓編輯器里面出來的結(jié)果快速處理后呈現(xiàn)給用戶加了i和em并自動編號，那么從前端來講我們自然想到無孔不入的javascript了。其實使用到的技術(shù)很簡單，可以說是入門級別的技術(shù)，但重要的是要想得到，我覺得這個過程就是感覺特別好的一個過程。
首先我們來講下基本原理：我們應(yīng)該獲取到文章中h1的節(jié)點，因為我們要改變的文章中的h1，頁面其他的地方的h1我們不需要改變；然后我們得在在這個h1里面加上兩個標(biāo)簽，同時在其中的一個標(biāo)簽中加入序號。下面就以jquery代碼來演示。

<script>
var h1=$(".article .cont h1"); //獲取到文章中所有的h1節(jié)點
h1.wrapInner("<em></em>");  //為獲取到的所有節(jié)點的文本套上<em>
for(i=0;i<h1.length;i++){
h1.eq(i).prepend("<i>"+(i+1)+"</i>"); //遍歷節(jié)點并依次加上序號
}
</script>

微構(gòu)網(wǎng)絡(luò)雖然是長沙地區(qū)剛剛成立的網(wǎng)絡(luò)公司，但是我們會用我們的實力認(rèn)真對待每一個項目，因為我們的發(fā)展需要得到更多客戶的認(rèn)可；如果大家有網(wǎng)站建設(shè)（不是套模版的需求，定制的需求）請與我們?nèi)〉寐?lián)系喲。