javascript 10 most commonly used custom functions [recommended]_javascript skills

(10)addEvent
The most popular version on the Internet is Scott Andrew's. It is said that the javascript community once held a competition (we can see this event on page 100 of Pro Javascript Techniques) or browse PPK's The website asked for functions to add events and remove events, and he was the winner. The following is his implementation:

Copy code The code is as follows:

function addEvent(elm, evType , fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' evType, fn);//IE5
return r;
}
else {
elm['on' evType] = fn;//DOM 0
}
}

The following is Dean Edwards’ version

Copy code The code is as follows:

// addEvent/removeEvent written by Dean Edwards, 2005
// with input from Tino Zijdel
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler) {
//Dispatch a unique event handler for each event ID
if (!handler.$$guid) handler.$$guid = addEvent.guid ;
//Create a hash table for the event type of the element
if (!element.events) element. events = {};
//Create a hash table of event handlers for each "element/event" pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
//Storage existing event handlers (if any)
if (element["on" type]) {
handlers[0 ] = element["on" type];
}
}
//Save the event handler function into the hash table
handlers[handler.$$guid] = handler;
/ /Assign a global event handler to do all the work
element["on" type] = handleEvent;
};
//Counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
//Remove event handler function from hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
var returnValue = true;
//Capture the event object ( IE uses global event objects)
event = event || fixEvent(window.event);
//Get a reference to the hash table of the event handling function
var handlers = this.events[event.type] ;
//Execute each handler function
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) = == false) {
returnValue = false;
}
}
return returnValue;
};
//Add some "missing" functions to IE's event object
function fixEvent(event) {
//Add standard W3C method
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};

The function is very powerful and solves IE's this pointing problem. event is always passed in as the first parameter, and cross-browser is no problem.
In addition, I also treasured a version of the HTML5 working group:

Copy code The code is as follows :

var addEvent=(function(){
if(document.addEventListener){
return function(el,type,fn){
if(el.length) {
for(var i=0;iaddEvent(el[i],type,fn);
}
}else{
el. addEventListener(type,fn,false);
}
};
}else{
return function(el,type,fn){
if(el.length){
for(var i=0;iaddEvent(el[i],type,fn);
}
}else{
el.attachEvent('on ' type,function(){
return fn.call(el,window.event);
});
}
};
}
})();

(9) addLoadEvent()
I have discussed this function before. Without going into details, it is just a little slow. Major libraries basically ignore it and implement domReady by themselves. Version. The following is Simon Willison's implementation:

Copy code The code is as follows:

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

(8) getElementsByClass()
I have a collecting habit and have many versions on hand, and finally I brainstormed and implemented one myself. The following is my implementation:

Copy code The code is as follows:

var getElementsByClassName = function (searchClass , node,tag) {
if(document.getElementsByClassName){
return document.getElementsByClassName(searchClass)
}else{
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while(--i >= 0){
patterns.push(new RegExp("(^|\s)" classes[i] "(\s|$)"));
}
var j = elements.length;
while( --j >= 0){
current = elements[j];
match = false;
for(var k=0, kl=patterns.length; kmatch = patterns[k].test(current.className);
if (!match) break;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}

(7) cssQuery()
The alias is getElementsBySeletor, first implemented by Dean Edwards, Prototype.js , JQuery and other class libraries have corresponding implementations. Among them, JQuery integrated it into the $() selector, and its reputation exceeds that of its predecessors. However, cutting-edge browsers such as IE8 have already implemented the querySelector and querySelectorAll methods. When IE6 and IE7 are scrapped, they will be useless. Wuyou has an explanation of its implementation principles. Because it's too long, it won't stick out. You can check the original author's website for details.
(6) toggle()
is used to show or hide a DOM element.

Copy code The code is as follows:

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

(5) insertAfter()
DOM only provides insertBefore, which is necessary for us Implement insertAfter yourself. But I think insertAdjacentElement is a better choice. Now all browsers except Firefox implement this method. Here is Jeremy Keith’s version:

Copy code The code is as follows:

function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}

(4) inArray()
is used for judgment Check whether a certain value exists in the array. The following method is taken from the Prototype class library.

Copy code The code is as follows:

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

Another version:

Copy code The code is as follows:

var inArray = function (arr,value) {
for (var i=0,l = arr.length ; i if (arr[i] === value) {
return true;
}
}
return false;
};

(3) getCookie(), setCookie(), deleteCookie()
It should be used frequently by BBS and commercial websites. There is no reason to ask users to enter their password to log in every time. We need to use cookies to implement the automatic login function.

Copy code The code is as follows:

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

（2）getStyle()与setStyle()
所有UI控件都应该存在的函数，动态设置样式与获取样式。这个可以写得很短，也可以写得很长，但要精确取得样式，一个字：难！但我发现许多问题都是发端于IE，微软的开发人员好像从来不打算给出getComputedStyle这样的函数，与之相近的currentStyle会返回auto，inhert， ' '等让你哭笑不得的值，这还没有算上IE怪癖模式带来的难度呢！各类库的实现是非常长与难分离出来的，下面是我实现的版本：

复制代码 代码如下:

function setStyle(el,prop,value){
if(prop == "opacity" && ! "v1"){
//IE7 bug:filter 滤镜要求 hasLayout=true 方可执行（否则没有效果）
if (!el.currentStyle || !el.currentStyle.hasLayout) el.style.zoom = 1;
prop = "filter";
if(!!window.XDomainRequest){
value ="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" value*100 ")";
}else{
value ="alpha(opacity=" value*100 ")"
}
}
el.style.cssText = ';' (prop ":" value);
}
function getStyle(el, style){
if(! "v1"){
style = style.replace(/-(w)/g, function(all, letter){
return letter.toUpperCase();
});
return el.currentStyle[style];
}else{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}

有关setStyle还可以看我另一篇博文，毕竟现在设置的样式都是内联样式，与html混杂在一起。
（1）$()
实至名归，最值钱的函数，可以节省多少流量啊。最先由Prototype.js实现的，那是洪荒时代遗留下来的珍兽，现在有许多变种。

复制代码 代码如下:

function $() {
var elements = [];
for (var i = 0; i var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}