首页 > Web开发 > 详细

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

时间:2016-03-18 23:13:21      阅读:420      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:http://www.cnblogs.com/yijinc/p/5293885.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!