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

本文链接：https://blog.csdn.net/xiongyuefei/article/details/83672092

<!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" οnclick="test1()"><strong>测试$取元素</strong>>>>点我this is a $ test./学习学习再学习/</div>
<strong>测试Cookies</strong><input id="cookies" type="text" value="学习学习再学习" />
<button οnclick="test2()">setCookie</button>
<button οnclick="alert('cookie:str='+getCookie('str'))">getCookie</button>
<button οnclick="deleteCookie('str')">delCookie</button>
<div οnclick="test3()"><strong>测试是否在数组里？</strong>>>>点我this is a test./学习学习再学习/</div>
<div id="after" οnclick="test4()"><strong>测试向后插入</strong>>>>点我this is a test./学习学习再学习/</div>
<div οnclick="toggle('toggle')">>>>点我this is a toggle test.<span id="toggle" style="display:none">/学习学习再学习路过/</span></div>
<strong>测试取class元素</strong>
<div class="test" οnclick="test5()">>>>点我this is a test./学习学习再学习/</div>
<div class="test" οnclick="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>