CSS清除浮动

<p>“90%的CSS布局的兼容问题都是浮动布局引起的”,这是我无意中听到某位前端人员的抱怨。</p>
<p>某位新手朋友经常问起我浮动布局的时候该如何清除浮动,我回答过N次,但这位新手朋友好像始终记不住,总是会在这里出问题,包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确,但也反映出了前端人员在这个问题上或多或少的要纠结一番,新手会时常犯难,老手也不一定就不犯傻。</p>
<p>我总结了一下以往几种清除浮动的方法,发觉方法还是挺多的,那么有没有一种最优的方法可以实现一劳永逸呢?且看下面的几种方法先。</p>
<h3>空标签法</h3>
<p>在浮动元素后加一个空标签,空标签上定义一个清除浮动的类:</p>
<pre class="brush: c-sharp">
&lt;style type="text/css"&gt;
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
&lt;/style&gt;
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<div class="clear"></div>
</pre>

阅读全文 »

jQuery常用选择器性能测试

<p>一直想知道jQuery的选择器到底哪个性能更好,却一直苦于没有顺手的测试工具。直到前不久同事老马开发了一款测试JavaScript性能的给力小插件<a href="http://www.kacakong.com/archives/300" target="_blank">FireJSPT</a>,这个插件是基于Firebug的,可以灵活的对页面中的JS代码片断进行测试,使用的时候只要将FireJSPT的类库文件导入即可:</p>
<pre class="brush: c-sharp">
&lt;script type="text/javascript" src="firejspt.js"&gt;&lt;/script&gt;
</pre>
<p>使用FireJSPT,本博对jQuery的常用的选择器在Firefox下做了一个测试,测试环境如下:</p>
<ul>
<li>操作系统:Windows 7旗舰版本</li>
<li>浏览器:Firefox 3.6.13</li>
<li>插件:Firebug 1.60(未安装其他插件)</li>
<li>jQuery版本:1.44</li>
</ul>
<h3>层级选择器(ul li)和find的对比</h3>
<p>HTML结构如下:</p>
<pre class="brush: c-sharp">
&lt;ul class="list"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;<!–省略455个li标签–>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

阅读全文 »

jQuery TAB插件

最近的项目用到TAB效果的地方较多,于是自己稍微封装了下,写成了jQuery插件,方便以后使用,顺便重温下jQuery插件的实现机制。

在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果。插件力求简单易用,只要能实现常见的功能即可。

参数说明:

  • event
  • 触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover。
  • timeout
  • 事件延迟,单位为毫秒,默认为0。
  • auto
  • 自动切换,单位为毫秒,默认为0。
  • callback
  • 回调函数,触发TAB时执行,函数的参数返回的是this。
阅读全文 »