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

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

我們知道在很多編輯器中都會(huì)有自動(dòng)插入h1這個(gè)標(biāo)簽，比如wordpress的默認(rèn)編輯器的一級(jí)標(biāo)題其實(shí)就是在文本上套個(gè)h1標(biāo)簽。那么如果是一個(gè)單純的h1標(biāo)簽，要實(shí)現(xiàn)自動(dòng)編號(hào)以及加上附加的風(fēng)格似乎有點(diǎn)兒?jiǎn)栴}。比如上面一部分的標(biāo)題風(fēng)格如果讓我們寫靜態(tài)的html+css文檔，我們會(huì)這么寫(當(dāng)然CSS部分針對(duì)不同的地方具體的屬性及值不同，而且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>

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

<h1>講授課程</h1>

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

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

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