10个常用自定义JavaScript函数

最新推荐文章于 2021-10-18 11:50:46 发布

tanlei514088573

最新推荐文章于 2021-10-18 11:50:46 发布

阅读量138

点赞数

文章标签： JavaScript IE HTML CSS prototype ViewUI

10) addEvent()

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

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;
	}
}

这个函数有更好的实现，请看最好的addEvent/removeEvent

  <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>

9) addLoadEvent()

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

效果同:

addEvent(window,'load',func,false);

8) getElementsByClass()

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

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;
}

<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>

7) cssQuery()

css选择器太长了，就不post了，有兴趣的同学可以自己在网上搜搜！(*^__^*)

6) toggle()

注释：很简单的元素显示和隐藏的实现

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

<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>

5) insertAfter()

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

function insertAfter(newElement, targetElement){
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
   parent.appendChild(newElement);
   //如果targetElement是parent最后一个子元素，插入newElement
  }else{
   parent.insertBefore(newElement, targetElement.nextSibling);
    //如果不是，插入到targetElement下一个兄弟节点的前面     
  }
}

<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>

4) inArray()

注释:判断值是否在array内

Array.prototype.inArray = function (value) {
	var i;
	for (i=0; i < this.length; i++) {
		if (this[i] === value) {
		        return true;
		}
	}
	return false;
};

 //调用演示
 var arr = ['aa', 'bb', 'cc'];
 alert(arr.inArray('桔子'));

3),2),1) getCookie(), setCookie(), deleteCookie()

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';
}

终极函数

注释:是不是很熟悉呢，对，这就是我们再熟悉不过的美元函数，(*^__^*)

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;
}

原文： Top 10 custom JavaScript functions of all time

附件是把这些函数合并在一个js中。

tanlei514088573

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10个常用自定义JavaScript函数

10) addEvent() 注释:elm元素evType时调用fn函数,useCapture参数:true时为事件捕获(Event capturing) false时为事件冒泡(Event bubblin)，默认为false;function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener)...
复制链接

扫一扫