最近网站要做一些版面微调,如去掉首页文章栏目列表后面的日期,修正文章列表长度大于栏目宽度引起的换行,在文章页面特地位置加入图片和链接……
本来说,直接修改网页后台源码、html及样式表很容易解决,但问题是由于网站不是本人编写,文章调用用的是自定义标签(已经封装),加上网站已经编译,源码不在我手里,所以无法直接通过修改源码解决。
后来我想到了用脚本来做,主要步骤是:
- 直接分析生成页面的html;
- 选择确定修改位置的最近选择器;
- 通过获取修改位置的节点,向该节点加入、修改或删除相应的代码达到页面微调的目的。
这几个步骤的说明:
1.我喜欢用firebug进行进行页面分析,用firebug进行页面代码分析特别方便,可以直接从网页定位到某一位置对应的代码,相应的css也会在后边列出,如果想进行css微调,直接可以在右边的css框进行修改,修改完马上就可以看到效果。
2.修改位置的定位,无非就是jQuery的几个选择器结合使用就可以快速定位出要修改的节点了。
3.jQuery加入代码可以直接用html()函数,非常方便,修正文章列表长度大于栏目宽度引起的换行和在文章页面特地位置加入图片和链接就可以直接用html(function(index, html))函数进行修改。而去掉首页文章栏目列表后面的日期则还需要结合正则表达式,把后面紧接着的日期2010-09-01去掉,根据日期的格式对应的正则表达式为:^/d{4}-/d{2}-/d{2}$ ,这样就可以准确无误地把日期定位并去掉。