10个常用自定义JavaScript函数
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="调用函数" onclick="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" onclick="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.onload=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中。