web前端使用技巧

1、focus和blur事件不支持冒泡,但是它支持捕获,所以在事件代理中我们可以使用捕获,但是ie不支持捕获,ie可以通过focusin和focusout这两个专有事件来代替,它们是支持冒泡的

2需要做页面刷新的时候推荐使用location.replace和location.href两个方法,而不推荐使用location.reload和history.go(0),因为这两个刷新相当于按F5刷新,有表单提交的页面很容易会给出是否重复提交表单的提示。

3使用Array.join在Internet Explorer中进行字符串连接操作是最快的;而+= 或者 String.prototype.concat.apply(object, arguments) 在其他浏览器中表现得更好。

4、判断中英文字符长度 if (string.match(/[^\x00-\xff]/ig) != null) //全角 

5、计算某年某月共有多少天函数: 

function days_in_month(y, m)  {

return 32 - new Date(y, m - 1, 32).getDate();

}

6、jquery使所有ajax请求不缓存方法:$.ajaxSetup({cache: false}); 

7、取数组最大和最小值

Math.max.apply(Math, [1,2,3]) //3

Math.min.apply(Math, [1,2,3]) //1

8、 行内元素设置padding,只有padding-left和padding-right生效,padding-top和padding-bottom无效。

比如行内元素<a>应用了padding:50px,只影响了左右,但没有影响上下。

9、js操作iframe

获得iframe的window对象 :

chrome:iframeElement. contentWindow 
firefox: iframeElement.contentWindow 

ie6:iframeElement.contentWindow

获得iframe的document对象 :

chrome:iframeElement.contentDocument
firefox:iframeElement.contentDocument

ie:element.contentWindow.document 

10、ie6 出现横向滚动条解决方法
html{_overflow-x:hidden;}

11、定位左右不动的滚动条
<style type="text/css">
#bannerLeft { width: 100px; height: 600px; float: left; position: relative; left: -100px; background: #ccc;}
#bannerRight {width: 100px; height: 600px; float: right; position: relative; right: -100px; background: #ccc;}
</style>
<div class="wrap" style="position:fixed;_position:absolute; top:0; left:50%; margin-left:-495px; ">
<div id="bannerLeft">banner left</div>
<div id="bannerRight">banner right</div>
</div>

12、在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复 的触发mouseover和mouseout事件。因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover 事件。 

为了阻止mouseover和mouseout的反复触发,这里要用到event对象的一个属性relatedTarget,这个属性就是用来判断 mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时,relatedTarget属性代 表的就是鼠标刚刚离开的那个节点,当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性,不过它有代替的属性,分别是 fromElement和toElement。
return e.relatedTarget || (e.fromElement && e.fromElement === e.srcElement ? e.toElement: e.fromElement);

13JavaScript音频/视频播放器
html5media(官网:http://html5media.info/)是一个JavaScript音频/视频播放器能够让每一个浏览器都能够播放在HTML5多媒体标签中定义的多媒体文件。 对于不兼容的浏览器,该播放将采用支持Flash的FlowPlayer播放器来代替。

14、解决iframe里半透明的图片,在IE下不显示半透明问题。
在IE下,iframe里有半透明图片,却不能显示半透明效果。
这个时候可以在html中给iframe添加一个属性:allowtransparency="true"。
如:<iframe scrolling="no" allowtransparency="true" src="test.htm"></iframe>

posted @ 2012-04-13 11:41  吊儿郎当  阅读(861)  评论(0编辑  收藏  举报