转载网下一篇关于javascript常用函数兼容各浏览器的东东 _JavaScript

转载网上一篇关于javascript常用函数兼容各浏览器的东东。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div, input { border:1px #0f0 dotted; margin:10px; }
</style>
<script type="text/javascript">
/*$这是个使用频率超高的自定义函数,非常实用,主要是能省很多力气,很多人都喜欢只返回一个document.getElementById,是比较省事,不过我喜欢多点功能*/
var $=function(){
?if(arguments.length==0)
??return document;
?else
?if(arguments.length==1)
??return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
?else return arguments;
};
/*getCookie(),setCookie(),deleteCookie()正如他们的名字一样,这是三个对cookie操作的函数,各个参数对应cookie的参数,仔细看看吧*/
function getCookie( name ) {
?var start = document.cookie.indexOf( name + "=" );
?var len = start + name.length + 1;
?if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
??return null;
?}
?if ( start == -1 ) return null;
?var end = document.cookie.indexOf( ';', len );
?if ( end == -1 ) end = document.cookie.length;
?return unescape( document.cookie.substring( len, end ) );
}
function setCookie( name, value, expires, path, domain, secure ) {
?var today = new Date();
?today.setTime( today.getTime() );
?if ( expires ) {
??expires = expires * 1000 * 60 * 60 * 24;
?}
?var expires_date = new Date( today.getTime() + (expires) );
?document.cookie = name+'='+escape( value ) +
??( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
??( ( path ) ? ';path=' + path : '' ) +
??( ( domain ) ? ';domain=' + domain : '' ) +
??( ( secure ) ? ';secure' : '' );
}
function deleteCookie( name, path, domain ) {
?if ( getCookie( name ) ) document.cookie = name + '=' +
???( ( path ) ? ';path=' + path : '') +
???( ( domain ) ? ';domain=' + domain : '' ) +
???';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}
/*inArray Prototype Array object返回一个字符串是否在一个数组中,php里的函数功能,不过js里也经常用到*/
Array.prototype.inArray = function (value) {
?var i;
?for (i=0; i < this.length; i++) {
??if (this[i] === value) {
???return true;
??}
?}
?return false;
};
/*insertAfter(),js已经自带了insertBefore,不过逻辑习惯不同,其实是一样的*/
function insertAfter(newElement,targetElement) {
? var parent = targetElement.parentNode;
? if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素，则直接添加。因为默认是最后
??? parent.appendChild(newElement);
? } else {
??? parent.insertBefore(newElement,targetElement.nextSibling);//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。
? }
}
//toggle()这是个简单的开关函数
function toggle(obj) {
?var el = document.getElementById(obj);
?if ( el.style.display != 'none' ) {
??el.style.display = 'none';
?}
?else {
??el.style.display = '';
?}
}
/*getElementsByClass by Dustin Diaz
js里没有这个函数实在是遗憾啊,其实非常强大,跟getElementsByTagName一样返回一个dom数组,只不过是通过class属性获得
*/
function getElementsByClass(searchClass,node,tag) {
?var classElements = new Array();
?if ( node == null )
??node = document;
?if ( tag == null )
??tag = '*';
?var els = node.getElementsByTagName(tag);
?var elsLen = els.length;
?var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
?for (i = 0, j = 0; i < elsLen; i++) {
??if ( pattern.test(els[i].className) ) {
???classElements[j] = els[i];
???j++;
??}
?}
?return classElements;
}
/*addLoadEvent() by Simon Willison
为window.onload添加多个处理函数,目前我还不怎么用*/
function addLoadEvent(func) {
?var oldonload = window.onload;
?if (typeof window.onload != 'function') {
??window.onload = func;
?}
?else {
??window.onload = function() {
???oldonload();
???func();
??}
?}
}
/*Scott Andrew’s original addEvent() function
强大的事件绑定兼容函数,对应参数分别是事件源对象,绑定事件,事件处理函数和事件捕捉方式,详细参考手册addEventListener和attachEvent的说明
*/
function addEvent(elm, evType, fn, useCapture) {
?if (elm.addEventListener) {
??elm.addEventListener(evType, fn, useCapture);
??return true;
?}
?else if (elm.attachEvent) {
??var r = elm.attachEvent('on' + evType, fn);
??return r;
?}
?else {
??elm['on' + evType] = fn;
?}
}
//函数实例
function test1(){
?alert($('test1').innerHTML);
}
function test2(){
?setCookie('str',$('cookies').value);
}
function test3(){
?var arr=['this','is','a','test'];
?alert("is the word 'this' in the Array?"+arr.inArray('this'));
}
function test4(){
?var div=document.createElement('div');
?var txt=document.createTextNode('this is another /学习学习再学习/');
?div.appendChild(txt);
?insertAfter(div,$('after'));
}
function test5(){
?var cls=getElementsByClass('test');
?for(var i=0;i<cls.length;i++)alert(cls[i].innerHTML);
}
addLoadEvent(test1);
addLoadEvent(test3);
//addEvent($('test6'),'click',function(){alert(/学习学习再学习/)},true);
</script>
</head>
<body>
<div id="test1" onclick="test1()"><strong>测试$取元素</strong>>>>点我this is a $ test./学习学习再学习/</div>
<strong>测试Cookies</strong><input id="cookies" type="text" value="学习学习再学习" />
<button onclick="test2()">setCookie</button>
<button onclick="alert('cookie:str='+getCookie('str'))">getCookie</button>
<button onclick="deleteCookie('str')">delCookie</button>
<div onclick="test3()"><strong>测试是否在数组里？</strong>>>>点我this is a test./学习学习再学习/</div>
<div id="after" onclick="test4()"><strong>测试向后插入</strong>>>>点我this is a test./学习学习再学习/</div>
<div onclick="toggle('toggle')">>>>点我this is a toggle test.<span id="toggle" style="display:none">/学习学习再学习路过/</span></div>
<strong>测试取class元素</strong>
<div class="test" onclick="test5()">>>>点我this is a test./学习学习再学习/</div>
<div class="test" onclick="test5()">>>>点我this is another test./学习学习再学习/</div>
<div id="test6"><strong>测试绑定事件</strong>>>>点我this is a $ test./学习学习再学习/</div>
<script>addEvent($('test6'),'click',function(){alert(/学习学习再学习/)},true);</script>
</body>
</html>