Dangbao's Blog

做一个专题页需求是点击后弹出一个层，然后再层上点关闭。弄个插件觉得不太值得，就写了个简易弹出层，原理是通过点击事件显示和隐藏新层，新层通过绝对定位显示在水平居中位置。
点击查看简单jquery弹出层
<script type="text/javascript">
$(document).ready(function () {
  $("#clickbox").click(function(){
     $(".showbox").addClass("block")
  });
  $("#closebox").click(function(){
     $(".showbox").removeClass("block")
  });
});
</script>


简洁，易用。
想要鼠标滑过切换内容的话，把click改成hover就可以了。
点击查看效果：jquery简易选项卡DEMO

不多说了，常见的效果。
slideUp和slideDown在有边框的情况下导致内容块短暂抽搐，可以改为hide无特效隐藏内容。
点击查看效果：juqery竖向折叠菜单DEMO

老问题了，IE6的BUG，selcet的z-index值比较大，div得z-index设多大都无法盖住它，而iframe的默认z-index值比selcet大,刚好能遮住selcet,而div设置z-index值就能盖住iframe。selcet < iframe < div

由于需求是一个头部弹出层，涉及的项目多，所以在每个页面都加个iframe不现实。所以找到了bgiframe这个jquery插件，原理是在弹出层后面插入一个iframe来遮盖住selcet。网上有人反映这个插件在IE9下会报错，那么就需要加个IE6的条件判断。
<!--[if IE 6]>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>  
<script type="text/javascript" >      
    $(function() {        
        $('弹出层ID).bgiframe();          
     });        
</script>
< ![endif]-->

bgiframe官方插件地址

目前jQuery比较流行，很多时候甚至已经成了考验前端人员的Javascript水平的一个标准了。jQuery以体积小、代码简洁幽雅而闻名。经过我一段时间的学习，今天站在前端人员的角度来谈谈jQuery的特点。

• 1.体积小。jQuery的体积小，加载速度快，这是它最吸引前端人员的地方之一。
• 2.代码简洁。一些用JS写稍微复杂的脚本效果用jQuery仅仅需要几行代码。比如隔行变色。
• 3.查找页面元素的机制构建于CSS选择符上。查找和锁定元素更简单，取得页面元素很简单。
• 4.无需更改xhtml和css，就可以修改页面外观，改变页面内容。
• 5.事件处理的良好兼容性。这个不消多说，jQuery的代码很好的解决了浏览器的不一致性。
• 6.内置动态效果。如淡入、擦除。

当然，jQuery还有很多的优点，而以上几点足以令每个前端向往jQuery。