• 一些常用的原生js方法(函数)


    1. addLoadEvent解决window.onload=fn在页面加载执行一次,addLoadEvent(fn)可以直接绑定多个函数在加载后执行

     1 function addLoadEvent(fn) {
     2         var oldLoad = window.onload; //把之前window.onload调用的函数保存起来
     3         if( typeof window.onload != "function") { //如果window.onload还未指向function
     4             window.onload = fn ;
     5         } else {
     6             window.onload = function() { //
     7                 oldLoad();
     8                 fn();
     9             }
    10         }
    11     }

    2.getElementsByClassName ,HTML5新增了此方法,使用这个方法可以带多个类名,如getElementsByClassName(" sale active ") 顺序不重要,为了使用老浏览器

     1 function getElementsByClassName(node,className) {
     2     if(node.getElementsByClassName) {
     3         //使用h5现有方法
     4         return node.getElementsByClassName(className);
     5     } else {
     6         var result = new Array();
     7         var elems = node.getElementsByTagName("*");
     8         for( var i=0; i<elems.length; i++) {
     9             if(elems[i].className.indexOf(className) != -1) {
    10                 result[result.length] = elems[i]; // 或result.push(elems[i]);
    11             }
    12         }
    13         return result;
    14     }
    15 }

    3.getStyle(obj,attr)获取对象属性

    1 function getStyle(obj,attr){
    2         if(obj.currentStyle){
    3             return obj.currentStyle[attr];
    4         }
    5         else{
    6             return getComputedStyle(obj,false)[attr];
    7         }
    8     }

    4.css(obj,attr,valve),上面的增强版,获取和设置一个对象的CSS属性 

     1 function css(obj, attr, value)
     2 {
     3     switch (arguments.length)
     4     {
     5         case 2:     
     6             if(typeof arguments[1] == "object") //2个参数,第一个参数为obj,第二个参数为json(对象)格式{attr:value,attr2:value}
     7             {    
     8                 for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
     9             }
    10             else     //否则,2个参数一般为获取obj.attr值
    11             {    
    12                 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
    13             }
    14             break;
    15         case 3:     //3个参数为直接设置属性 obj.style[attr] = value
    16             attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
    17             break;
    18     }
    19 };

    5. insertAfter,DOM有insertBefore方法,没有 insertAfter方法。我们完全可以利用已有DOM方法和属性编写一个insertAfter()函数

     1 function insertAfter(newElement, targetElement) {
     2         var parent = targetElement.parentNode ;
     3         // 如果父元素最后的子节点就是 目标节点 , 则直接追加到父元素后面
     4         if( parent.lastChild == targetElement ) {
     5             parent.appendChild(newElement);
     6         } else {
     7             //否则将新元素插入到目标元素的下一个元素之前
     8             parent.insertBefore(newElement,targetElement.nextSibling);
     9         }
    10     }

    6.借助call或apply用其它对象的方法来操作某个函数,

    1 function bind(obj,fn) {
    2     return function(){
    3         fn.apply(obj,arguments); //相当于obj.fn 
    4     }
    5 }

    7.事件对象绑定与解除

     1 /*-------------------------- +
     2   事件绑定, 删除
     3  +-------------------------- */
     4 var EventUtil = {
     5     addHandler: function (oElement, sEvent, fnHandler) {
     6         oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler] = function () {oElement["_" + sEvent + fnHandler]()}, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))
     7     },
     8     removeHandler: function (oElement, sEvent, fnHandler) {
     9         oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, oElement[sEvent + fnHandler])
    10     },
    11     addLoadHandler: function (fnHandler) {
    12         this.addHandler(window, "load", fnHandler)
    13     }
    14 };

    8.万能运动方法

     1 function startMove(obj,json,endFn){
     2     
     3         clearInterval(obj.timer);
     4         
     5         obj.timer = setInterval(function(){
     6             
     7             var bBtn = true;
     8             
     9             for(var attr in json){
    10                 
    11                 var iCur = 0;
    12             
    13                 if(attr == 'opacity'){
    14                     if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
    15                     iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
    16                     
    17                     }
    18                     else{
    19                         iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
    20                     }    
    21                 }
    22                 else{
    23                     iCur = parseInt(getStyle(obj,attr)) || 0;
    24                 }
    25                 
    26                 var iSpeed = (json[attr] - iCur)/8;
    27             iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    28                 if(iCur!=json[attr]){
    29                     bBtn = false;
    30                 }
    31                 
    32                 if(attr == 'opacity'){
    33                     obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
    34                     obj.style.opacity = (iCur + iSpeed)/100;
    35                     
    36                 }
    37                 else{
    38                     obj.style[attr] = iCur + iSpeed + 'px';
    39                 }
    40                 
    41                 
    42             }
    43             
    44             if(bBtn){
    45                 clearInterval(obj.timer);
    46                 
    47                 if(endFn){
    48                     endFn.call(obj);
    49                 }
    50             }
    51             
    52         },30);
    53     
    54     }
  • 相关阅读:
    新学期,新起点
    判断整数的正负零特性
    C# 静态类与非静态类、静态成员的区别
    适配器模式:类适配器和对象适配器
    设计模式学习笔记
    C# 全局变量的实现
    设计模式
    Tuples in .Net 4 (System.Tuple)
    EnableViewState
    HashMap 、HashTable、HashSet的区别
  • 原文地址:https://www.cnblogs.com/yijinc/p/5293885.html
Copyright © 2020-2023  润新知