对原生js的一些小尝试

意图仿造JQ操作以及弄个个人工具箱,不断完善中,代码均为个人摸索,所以肯定会有不少不足的地方,希望读者们能提出来。

 1 var xzhUtils = {
 2   //-----DOM对象添加类-----
 3   //--@param: obj  DOM对象
 4   //--@param: cls  添加的类
 5   addClass : function (obj, cls){
 6     var ocls = obj.className;
 7     if(!ocls){
 8       obj.className = cls;
 9     } else{
10       ocls += " "+cls;
11       obj.className = ocls;
12     }
13   },
14   //-----DOM对象移除类-----
15   //--@param: obj  DOM对象
16   //--@param: cls  移除的类
17   removeClass : function (obj, cls){
18     var ocls = obj.className;
19     if(ocls){
20       var arr = ocls.split(" ");
21       for(var i in arr){
22         if(arr[i]==cls){
23           arr.splice(i,1);
24           break;
25         }
26       }
27       ocls = arr.join(" ");
28       obj.className = ocls;
29     }
30   },
31   //-----计算上卷值-----
32   scrollPos : function() {
33     var scrollPos; 
34     if (typeof window.pageYOffset != 'undefined'){ 
35       scrollPos = window.pageYOffset; 
36     }else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){ 
37       scrollPos = document.documentElement.scrollTop; 
38     }else if (typeof document.body != 'undefined'){ 
39       scrollPos = document.body.scrollTop; 
40     }
41     return scrollPos;
42   },
43   //-----获取下一个兄弟节点-----
44   //--@param: eventObj  要获取下一兄弟节点的DOM对象
45   //--@return: x  eventObj的下一兄弟节点
46   next : function(eventObj){
47     var e = eventObj;
48     var x = e.nextSibling;
49     while(x.nodeType!=1){
50       x = x.nextSibling;
51     }
52     return x;
53   }
54 }
View Code

-----2014/09/01 微改版

 1 window.onload = function(){
 2     (function() {
 3         var xzh = {};
 4         //-----DOM对象添加类-----
 5         //--@param: obj  DOM对象
 6         //--@param: cls  添加的类
 7         Object.prototype.addClass = function (cls){
 8             var obj = this;
 9             var ocls = obj.className;
10             if(!ocls){
11                 obj.className = cls;
12             } else{
13                 ocls += " "+cls;
14                 obj.className = ocls;
15             }
16         },
17         //-----DOM对象移除类-----
18         //--@param: obj  DOM对象
19         //--@param: cls  移除的类
20         Object.prototype.removeClass = function (cls){
21             var obj = this;
22               var ocls = obj.className;
23               if(ocls){
24                 var arr = ocls.split(" ");
25                 for(var i in arr){
26                       if(arr[i]==cls){
27                         arr.splice(i,1);
28                         break;
29                       }
30                 }
31                 ocls = arr.join(" ");
32                 obj.className = ocls;
33               }
34         },
35         //-----计算上卷值-----
36         scrollPos = function() {
37             var scrollPos; 
38             if (typeof window.pageYOffset != 'undefined'){ 
39                 scrollPos = window.pageYOffset; 
40             }else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){ 
41                 scrollPos = document.documentElement.scrollTop; 
42             }else if (typeof document.body != 'undefined'){ 
43                 scrollPos = document.body.scrollTop; 
44             }
45             return scrollPos;
46         },
47         //-----获取下一个兄弟节点-----
48         //--@param: eventObj  要获取下一兄弟节点的DOM对象
49         //--@return: x  eventObj的下一兄弟节点
50         Object.prototype.next = function(){
51             var obj = this;
52             var x = obj.nextSibling;
53             while(x.nodeType!=1){  // 因为FF下会把空格也当作DOM
54                 x = x.nextSibling;
55             }
56             return x;
57         }
58     })();
59 
60     var item = document.getElementById("item");
61     item.addClass("demo");
62 }
原文地址:https://www.cnblogs.com/xzhang/p/3927535.html