javascript 常用的方法.....

Dear 丶 2022-08-24 04:29 255阅读 0赞

记录一些常用的javascript方法   常用  常用 哈哈(都是个人理解....如果觉得我理解错了,请指正 )

function Each(list, fun)\{  
    for (var i = 0, len = list.length; i < len; i++) \{fun(list\[i\], i); \}  
\};

作用 :

让list里面的集合都执行一次fun(这么说应该不大对,大概是这个意思拉)

解释 :

list  为引用集 可以是元素集  也可以是数组;

fun 是函数 是让那个元素集里的每个东西都完成一次他;可以带参数如 上面的list\[i\](元素集的第i个元素),i索引值了;

Examples

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd] ">  
<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml] ">  
<head>  
<title>Command Function</title>  
<style type="text/css">  
div\{height:30px; width:400px; background-color:\#0000FF; margin-top:20px;\}  
</style>  
</head>  
<script language="JavaScript" type="text/javascript">  
function Each(list, fun)\{  
    for (var i = 0, len = list.length; i < len; i++) \{fun(list\[i\], i); \}  
\};  
window.onload = function()\{  
 Each(document.body.getElementsByTagName("div"),function(obj,i)\{  
  obj.onclick = function()\{alert(i)\}  
 \});  
\}  
</script>  
<body>  
<div></div>  
<div></div>  
<div></div>  
<div></div>  
</body>  
</html>

--------------------

var Bind = function(object, fun) \{  
    var args = Array.prototype.slice.call(arguments).slice(2);  
    return function() \{  
        return fun.apply(object, args);  
    \}  
\}

作用 :让obj执行fun方法,fun里面的this指向obj(大概就是这个意思),其实Bind的意思就是绑定.

解释 :

Array.prototype.slice是Array原型上的一个方法,截取数组并返回一个截取后的新数组

Array.prototype.slice.call(arguments)就是 对象arguments调用Array.prototype.slice方法了

参数为空 所以就是把arguments转成数组了

然后数组在执行slice(2);  就是返回一个没有前2个的新数组.

\----------------------------------------------------------------------------------

有点奇怪啊 Array.prototype.slice.call(arguments)这里已经是执行一次,会何后面要要写.slice(2)了????

我也不明白  写成这样不是更简单效率更高吗 Array.prototype.slice.call(arguments,2);

一个例子来证明他们是一样的(如果哪位仁兄知道他们是不一样的,麻烦告诉小弟一下)

\----------------------------------------------------------------------------------

知道了这个Array.prototype.slice.call(arguments).slice(2);是把参数转为数组,那

return function() \{  
        return fun.apply(object, args);  
    \}

就是返回一个函数了 我来分析下他的过程啊

如:bind(obj,fun,arg1)

bind(obj,fun,arg1)执行后就变成了

function()\{

return fun.apply(object, \[arg1\]);

因为闭包的原因arg1还存在

因为apply的关系 所以前面把参数转成数组的原因也出来了

当执行上面的那个函数的时候,

先执行fun.apply(object, \[arg1\]); 在返回这个执行后的东西.

Examples(其实例子并好举,关键是如何让他有说服力了,我找不到,我也不举了)

\-----------------------------------------------------------------------------------------------------------------------------------------

var BindAsEventListener = function(object, fun)\{  
    var args = Array.prototype.slice.call(arguments).slice(2);  
    return function(e) \{  
        return fun.apply(object, \[e||window.event\].concat(args));  
    \}  
\}

这个和上面的那个例子一样的啊,在返回函数的参数第一个为event.

\-----------------------------------------------------------------------------------------------------------------------------------------

function getobjpos(o)\{  
  var x = 0, y = 0;  
  do\{x += o.offsetLeft;y += o.offsetTop;\}while((o=o.offsetParent));  
  return \{'x':x,'y':y\};  
 \}

作用 :

计算元素相对于浏览器所在的x的坐标和y的坐标

解释:

其实对于offsetParent的说明我也不是很明白.这个写法还是很容易看懂

当o.offsetParent不存在的时候结束循环,将没一次元素的offsetLeft or offsetTop累加

这么写在有些情况下会出错的

比如:当其中一个元素设置了scroll,并且有Top或者Left的时候就得加上top和left...............l

\-----------------------------------------------------------------------------------------------------------------------------------------

绑定事件和删除事件

这个是原创噢

绑定事件  这个要和删除事件配合使用的

好处就是不需要在程序外面拿变量来引用绑定的函数  操作都在函数里面完成

例子

<div id='cc' style="width:100px; height:120px; background-color:\#000000"></div>  
<br><br><br>  
<div id='ccc' style="width:100px; height:120px; background-color:\#000000" οnclick='xx()'></div>  
<script>  
var $ = function(id)\{  
    return document.getElementById(id);  
\}  
var addListener = function(element,e,fn)\{  
    !element.events&&(element.events = \{\});  
    element.events\[e\]&&(element.events\[e\]\[addListener.id++\]=fn)||(element.events\[e\] = \{'0':fn\});  
    element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);  
\};  
addListener.id = 1;  
var removeListener = function(element,e,fn)\{  
    var handlers = element.events\[e\],type;  
    if(fn)\{  
        for(type in handlers)  
            handlers\[type\]===fn&&(element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn));  
    \}else\{  
        for(type in handlers)  
            element.removeEventListener?element.removeEventListener(e,handlers\[type\],false):element.detachEvent("on" + e,handlers\[type\]);  
    \}         
\};  
var vb =function()\{  
    alert(1)  
\}  
var vc =function()\{  
    alert(2)  
\}  
window.οnlοad=function()\{  
    addListener($('cc'),'click',vb)  
    addListener($('cc'),'click',vc)  
\}  
  
function xx()\{  
    removeListener($('cc'),'click',vc)  
\}  
</script>  
</body>

\-----------------------------------------------------------------------------------------------------------------------------------------

设置元素的样式

setStyle( elems, style, value) )

可以设置单个 或者多个元素的样式

style可是是字符川串 如果是字符串 且value有值  则elem.style\[ style \] = value;

若果单独是style没有value 则按elem.style.cssText = style  
style也可以是对象

var setStyle = function(elems, style, value)\{

//如果elems不是集合 就转换成数组  elems可以是数组  也可以是元素集合  
    if( !elems.length ) elems = \[elems\];

//如果style是字符串  把style转成对象 属性是style 值是value  
    if( typeof style == "string")\{         
        style = value === undefined?\{cssText:style\}:(function(o)\{  
            return (o\[style\] = value,o);             
        \})(\{\});  
    \};

//   遍历elems 透明度 float比较特殊 所以单独出来

each(elems,function(i,elem,style)\{  
        var value,name,ie=Sys.ie ;  
        for(name in style)\{  
            value = style\[name\];  
            if (name === "opacity" && ie) \{  
                elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha/(\[^)\]\*/)/, "" ) + "alpha(opacity=" + value \* 100 + ")";  
            \}else if(name === "float")\{  
                elem.style\[ ie ? "styleFloat" : "cssFloat" \] = value;  
            \}else\{  
                name = name.replace(/-(\[a-z\])/ig, function(all, letter)\{  
                    return letter.toUpperCase();  
                \});  
                elem.style\[name\] = value;  
            \}  
        \}  
    \},style);  
\};

Test

<!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>  
</head>  
<body>  
<div id='ss' style="width:20px; border:1px solid \#000000"></div>  
<div id='sss'></div>  
<div id='ssss'></div>  
<script language="javascript">  
  
var Sys = function (ua)\{  
    var b = \{  
        ie: /msie/.test(ua) && !/opera/.test(ua),  
        opera: /opera/.test(ua),  
        safari: /webkit/.test(ua) && !/chrome/.test(ua),  
        firefox: /firefox/.test(ua),  
        chrome: /chrome/.test(ua)  
    \},vMark = "";  
    for (var i in b) \{  
        if (b\[i\]) \{ vMark = "safari" == i ? "version" : i; break; \}  
    \}  
    b.version = vMark && RegExp("(?:" + vMark + ")\[///: \](\[//d.\]+)").test(ua) ? RegExp.$1 : "0";  
    b.ie6 = b.ie && parseInt(b.version, 10) == 6;  
    b.ie7 = b.ie && parseInt(b.version, 10) == 7;  
    b.ie8 = b.ie && parseInt(b.version, 10) == 8;    
    return b;  
\}(window.navigator.userAgent.toLowerCase());  
var each =  function ( object, callback, args ) \{    
    var name, i = 0, length = object.length;    
    if ( args ) \{  
        args = Array.prototype.slice.call(arguments).slice(2);  
        if ( length === undefined ) \{    
            for ( name in object )    
                if ( callback.apply( object\[ name \],\[name,object\[ name \]\].concat(args) ) === false )    
                    break;    
        \} else   
            for ( ; i < length; i++)    
                if ( callback.apply( object\[ i \],\[i,object\[ i \]\].concat(args)) === false )   //  
                    break;    
    \} else \{       
        if ( length === undefined ) \{    
            for ( name in object )    
                if ( callback.call( object\[ name \], name, object\[ name \] ) === false )    
                    break;    
        \} else   
            for ( var value = object\[0\];    
                i < length && callback.call( value, i, value ) !== false; value = object\[++i\] )\{\}    
    \}    
    return object;    
\};    
var setStyle = function(elems, style, value)\{  
    if( !elems.length ) elems = \[elems\];  
    if( typeof style == "string")\{         
        style = value === undefined?\{cssText:style\}:(function(o)\{  
            return (o\[style\] = value,o);             
        \})(\{\});  
    \};  
    each(elems,function(i,elem,style)\{  
        var value,name,ie=Sys.ie ;  
        for(name in style)\{  
            value = style\[name\];  
            if (name === "opacity" && ie) \{  
                elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha/(\[^)\]\*/)/, "" ) + "alpha(opacity=" + value \* 100 + ")";  
            \}else if(name === "float")\{  
                elem.style\[ ie ? "styleFloat" : "cssFloat" \] = value;  
            \}else\{  
                name = name.replace(/-(\[a-z\])/ig, function(all, letter)\{  
                    return letter.toUpperCase();  
                \});  
                elem.style\[name\] = value;  
            \}  
        \}  
    \},style);  
\};  
window.onload = function()\{  
    setStyle(document.getElementById('ss'),'height','20px');  
    setStyle(document.getElementById('sss'),"width:20px;height:20px; border:1px solid \#000000");  
    setStyle(document.getElementById('ssss'),\{width:"20px",height:"20px",border:"1px solid \#000000"\});  
\}  
</script>  
</body>  
</html>

[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml