jQuery的一些“亂用”

最近網站要做一些版面微調,如去掉首頁文章欄目列表後面的日期修正文章列表長度大於欄目寬度引起的換行在文章頁面特地位置加入圖片和鏈接……

本來說,直接修改網頁後臺源碼、html及樣式表很容易解決,但問題是由於網站不是本人編寫,文章調用用的是自定義標籤(已經封裝),加上網站已經編譯,源碼不在我手裏,所以無法直接通過修改源碼解決。

後來我想到了用腳本來做,主要步驟是:

  1. 直接分析生成頁面的html;
  2. 選擇確定修改位置的最近選擇器;
  3. 通過獲取修改位置的節點,向該節點加入、修改或刪除相應的代碼達到頁面微調的目的。

這幾個步驟的說明:

1.我喜歡用firebug進行進行頁面分析,用firebug進行頁面代碼分析特別方便,可以直接從網頁定位到某一位置對應的代碼,相應的css也會在後邊列出,如果想進行css微調,直接可以在右邊的css框進行修改,修改完馬上就可以看到效果。

2.修改位置的定位,無非就是jQuery的幾個選擇器結合使用就可以快速定位出要修改的節點了。

3.jQuery加入代碼可以直接用html()函數,非常方便,修正文章列表長度大於欄目寬度引起的換行在文章頁面特地位置加入圖片和鏈接就可以直接用html(function(index, html))函數進行修改。而去掉首頁文章欄目列表後面的日期則還需要結合正則表達式,把後面緊接着的日期2010-09-01去掉,根據日期的格式對應的正則表達式爲:^/d{4}-/d{2}-/d{2}$ ,這樣就可以準確無誤地把日期定位並去掉。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章