common.js-优快云博客

本文介绍了一系列JavaScript编程中的实用技巧，包括自定义窗口打开、表单操作、AJAX请求处理、DOM操作及事件处理等方面的方法，帮助开发者提高编程效率。

function openwinx(url,name,w,h)
{
    window.open(url,name,"top=100,left=400,width=" + w + ",height=" + h + ",toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no");
}

function Dialog(url,name,w,h)
{
    return showModalDialog(url, name, 'dialogWidth:'+w+'px; dialogHeight:'+h+'px; help: no; scroll: yes; status: no');
}

//表单常用docform=document.forms[i]
function loadURLAction(url, docform, method) {
    docform.action = url;
    docform.method = method;   //设置提交方式
    docform.submit();
}

function doSubmit (docform,url){
    docform.action = url;
    docform.submit();
}

function doReset (docform){
    docform.reset();
}

function doRefresh (){
    self.location.reload();
}
// AJAX请求效果
$('#J_ajax_loading').ajaxStart(function () {
    $(this).show();
}).ajaxSuccess(function () {
    $(this).hide();
});

表中不填还原默认值，提交调用验证（适合新增页面 ,不适合修改）

//如果input为空，还原input 默认值
function resetFields(whichform) {
    for (var i=0; i<whichform.length; i++) {
        var element = whichform.elements[i];
        if (element.type == "submit") continue;
        if (element.type == "radio") continue;
        if (element.type == "checkbox") continue;
        if (!element.defaultValue) continue;

        element.onfocus = function() {
            if (this.value == this.defaultValue) {
                this.value = "";
            }
        }
        element.onblur = function() {
            if (this.value == "") {
                this.value = this.defaultValue;
            }
        }
    }
}

function prepareForms() {
    for (var i=0; i<document.forms.length; i++) {
        var thisform = document.forms[i];
        resetFields(thisform);
        /*  thisform.onsubmit = function() {
         return validataForm(this);
         }*/
    }
}

addLoadEvent(prepareForms);

class attribute

/**
 * 为对象添加 className
 * @param {Object} 需要添加className的节点
 * @param {String}  要添加的 className
 */
function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    }else {
        newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
    }   
}

/**
 * 为对象删除 className
 * @param {Object} 需要删除className的节点
 * @param {String}  要删除的 className
 */
function removeClass(el, cls) {
	var el = $(el);
	if(!el) return;
	el.className = el.className.replace(new RegExp("(^|\\s+)" + cls + "(\\s+|$)"), ' ');
}

/**
 * 判断对象是否存在该 className
 * @param {Object} 需要判断className的节点
 * @param {String}  要判断的 className
 */
function hasClass(node, className) {
	var elementClassName = node.className;
	return (elementClassName.length > 0 && (elementClassName == className || new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
}	

/* grab Elements from the DOM by className */
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;
}

浏览器检测

var BROWSER = {};
var USERAGENT = navigator.userAgent.toLowerCase();
browserVersion({'ie':'msie','firefox':'','chrome':'','opera':'','safari':'','maxthon':'','mozilla':'','webkit':''});
if(BROWSER.safari) {
	BROWSER.firefox = true;
}
BROWSER.opera = BROWSER.opera ? opera.version() : 0;
function browserVersion(types) {
	var other = 1;
	for(i in types) {
		var v = types[i] ? types[i] : i;
		if(USERAGENT.indexOf(v) != -1) {
			var re = new RegExp(v + '(\\/|\\s)([\\d\\.]+)', 'ig');
			var matches = re.exec(USERAGENT);
			var ver = matches != null ? matches[2] : 0;
			other = ver !== 0 ? 0 : other;
		}else {
			var ver = 0;
		}
		eval('BROWSER.' + i + '= ver');
	}
	BROWSER.other = other;
}
if(BROWSER.ie){alert('232');}else{alert('ff');}

sdfsd

/* quick getElement reference */
function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}

function getParameter(name){
    var search = document.location.search;
    var pattern = new RegExp("[?&]"+name+"\=([^&]+)", "g");
    var matcher = pattern.exec(search);
    var items = null;
    if(null != matcher){
        items = decodeURIComponent(matcher[1]);
        //items = unescape(matcher[1]);
    }
    return items;
}

function isUndefined(variable) {
    return typeof variable == 'undefined' ? true : false;
}

function dwrite(ht_str) {
	document.write(ht_str);
}

function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {   // Mozilla系列
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (elm.attachEvent) {   //IE系列
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		elm['on' + evType] = fn;
	}
}

var EventCache = function(){
	var listEvents = [];
	return {
		listEvents : listEvents,
		add : function(node, sEventName, fHandler){
			listEvents.push(arguments);
		},
		flush : function(){
			var i, item;
			for(i = listEvents.length - 1; i >= 0; i = i - 1){
				item = listEvents[i];
				if(item[0].removeEventListener){
					item[0].removeEventListener(item[1], item[2], item[3]);
				};
				if(item[1].substring(0, 2) != "on"){
					item[1] = "on" + item[1];
				};
				if(item[0].detachEvent){
					item[0].detachEvent(item[1], item[2]);
				};
				item[0][item[1]] = null;
			};
		}
	};
}();
addEvent(window,'unload',EventCache.flush);

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;   
    }else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

/**
* 获取Event对象
* @method getEvent
* @return {Event} event对象	
* getEvent();
*/
function getEvent() { //ie && ff
	if(document.all) return window.event;
	func = getEvent.caller;
	while(func != null) {
		var arg0 = func.arguments[0];
		if (arg0) {
			if((arg0.constructor  == Event || arg0.constructor == MouseEvent) || (typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
				return arg0;
			}
		}
		func=func.caller;
	}
	return null;
}

/*阻止浏览器默认操作*/
function stopDefault() {
	var ev = getEvent();
	if(ev.stopPropagation){ //firefox
		ev.preventDefault();
	}else{ //ie 
		ev.returnValue = false;
	}
}

/*功能:停止事件冒泡*/
function stopBubble() {
	var ev = getEvent();
	if(ev.stopPropagation){ //firefox
		ev.stopPropagation();  
	}else{ //ie 
		ev.cancelBubble = true;
	}
}

/**
 * 禁止Event事件冒泡,阻止默认行为
 * @method stopEvent
 * stopEvent();
*/
function stopEvent() {
	stopDefault();
	stopBubble();
}

function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'none' ) {
        el.style.display = 'none';
    }else {
        el.style.display = 'block';
    }
}

/* insert an element after a particular node */
function insertAfter(parent, node, referenceNode) {
	parent.insertBefore(node, referenceNode.nextSibling);
}

isUndefined

function ajaxmenu(ctrlObj, timeout, cache, duration, pos, recall) {
    if(isUndefined(pos)) pos = '43';
}

addEvent : 注释:elm元素evType时调用fn函数,useCapture参数:true时为事件捕获(Event capturing) false时为事件冒泡(Event bubblin)，默认为false;

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>调用演示</title>
     <script type="text/javascript" language="javascript">
     function addEvent(elm, evType, fn, useCapture) {...}
     function show() {
             alert("Message!"); 
     }
     addEvent(window,"load",show)
     </script>
   </head>
   <body>
      调用演示  
   </body>
  </html>

注释:我们有getElementById() , getElementsByName() , getElementsByTagName() , 现在终于有了getElementsByClass(),它的作用是找到node中具有相同Class的tag元素;

<html>
<head>
   <title>getElementsByClass()调用演示</title> 
   <script type="text/javascript">
        function getElementsByClass(searchClass,node,tag) {...}
   </script>
</head>
 <body> 
    <input class="aa" value="0"  />
    <div id="wrapper">
        <input class="aa" value="1"  />
        <input class="aa" value="2"  />
        <input class="aa" value="3"  />
        <input class="aa" value="4"  />
        <input class="bbb" value="5"  />
     </div>
    <input  type="button" value="调用函数"  οnclick="alert(getElementsByClass('aa',wrapper,'input').length)"/>
</body></html>

toggler

<html><head> <title>toggle调用演示</title> 
 <script type="text/javascript">
      function toggle(obj) {...}
 </script>
 </head><body> 
    <div id="wrapper">
          xx,到此一游
   </div>
     <input  type="button" value="show"  οnclick="toggle('wrapper')"/>
</body></html>

注释:很奇怪，DOM中给出了insertBefore()方法，却没有insertAfter()方法,不过现在有了这个函数.在目标元素后面插入新的元素

<html>
<head>
<title>insertAfter()调用演示</title> 
 <script type="text/javascript">
      function insertAfter(newElement, targetElement){...}
      window.οnlοad=function(){   
             var new =document.createElement("span");   
             var b =document.createTextNode("new text!");   
             new.appendChild(b);   
             var target = document.getElementById("b");   
             insertAfter(new,target);     
}
 </script>
 </head>
 <body>
     <div id="b">bbb</div>  
</body>
</html>

阻止浏览器默认操作

<script type="text/javascript">  
function stopDefault( e ) {
    //适用于火狐等实现了W3C规范的浏览器     
    if ( e && e.preventDefault )
        e.preventDefault();
    //适用于IE    
    else
        window.event.returnValue = false;
    return false;
}
</script>  
<a href="http://www.google.com" id="testLink">Google</a>  
<script type="text/javascript"> 
var test = document.getElementById('testLink');
test.onclick = function(e) {
    alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');
    stopDefault(e);
}
</script>