DOM库

使用闭包的方式来封装：功能，兼容性的处理

1. 类数组转数组：markArray-----类数组有两种：arguments（兼容所有的浏览器）和htmlCollection（只兼容标准浏览器）有时候也称为nodeList 元素集合
2. json格式的字符串转为json格式的对象（一定是大括号里面有有双引号）：jsonParse，JSON还有一个方法：就是把json格式的对象转为字符串：JSON.stringify(对象)，JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理JSON数据不需要任何特殊的 API 或工具包。eval(({'aa':11,'ccc':'csc','age':11}))得到的结果是：Object {aa: 11, ccc: "csc", age: 11}或者是var jsonStr = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}'; JSON.parse(jsontext);
3. 生成随机数的函数rnd，给定一个范围，产生随机数，当传入错误的时候，返回一个0到1之间的随机数
4. 求有定位元素到body的距离的函数offset，一层一层往上找，返回一个对象{left:xxx,top:xxx}，距离body的左边和上边的距离，这个也要注意，IE8浏览器计算的时候不需要加上边框clientLeft和clientTop
5. 对JS盒子模型一系列的offset，client，scorll,这样的属性值和设置的兼容处理：win，两个功能：获取属性值或者为属性设置值；求可视区的高度或者是被浏览器卷去的高度和宽度
6. 获取非行间样式，也可以拿到行间样式：getCss，获取元素身上的某个样式值，这个也要处理兼容，对于浏览器，获取样式的方式是不一样的，getComputStyle和currentStyle，前面是标准浏览器后面是非标准浏览器。
7. 限定容器的通过className来获取元素：getByClass，最后通过一个数组返回，获取容器下面所有类名的标签元素。
8. 判断元素上面是否有这个类名：hasClass，返回一个布尔值，传入元素和类名
9. 给元素身上添加类名：addClass，类名可以有多个
10. 移除元素身上的某些类名：removeClass，传入元素，要删除的元素身上的类名，要注意多个类名之间的空格
11. 获取元素上面的样式值：getCss，传入元素，元素身上的属性 返回对应的属性值
12. 给元素设置样式值：setCss，传入的参数，元素，属性，属性值
13. 给当前元素设置一组样式值：setGroupCss，传入的参数，元素，样式组对象
14. 一个综合的方法：css，即可以设置样式值也可以获取样式值，参数是未知的，所以要通过arguments来判断，包含前面的三个方法，三个方法都有ele元素，核心是在于后面的参数个数不同，如果是对象，则是设置一组；如果是字符串，可能是获取也可能是设置一个
15. 获取当前容器下，所有的孩子节点，getChildren，以一个数组返回，参数当前容器，容器下的元素名
16. 求上一个哥哥元素prev，参数，当前的元素，返回这个元素的哥哥元素
17. 求下一个弟弟元素next，
18. 求这个元素的所有哥哥元素prevAll
19. 求这个元素的所有哥哥元素nextAll
20. 求当前元素的相邻元素sibling
21. 求当前元素的所有兄弟元素siblings
22. 当前元素的所有索引next
23. 求当前容器下的第一个子元素firstChild，参数当前容器，返回第一个子元素
24. 求当前元素的最后一个元素lastChild
25. 把元素插入到父容器的末尾appendChild
26. 把元素插入到父容器的前面prependChild
27. 把元素插到到指定元素的前面insertBefore
28. 把元素插到指定元素的后面insertAfter

        var utils=(function(){
            // 判断是否标准浏览器 要是在window上面有这个属性getComputedStyle 就说明是标准的浏览器，不是IE6-8 惰性思想
            var frg='getComputedStyle' in window;
            
        // 类数组转数组 参数 类数组  返回 数组
            function makeArray(arg){
                var ary=[]; // 返回一个数组
                if(frg){
                    //说明是标准浏览器，可以直接调用Array的原型上面的slice方法去克隆arg上面的数据，返回一个数组
                    // arguments兼容所有的浏览器，但是htmlCollection只兼容标准浏览器 ，此时说明是标准浏览器,支持slice.call
                    ary=Array.prototype.slice.call(arg);
                }else{
                // 非标准的浏览器
                    for(var i=0;im){
                    var tem=m;
                    m=n;
                    n=tem;
                }
                return Math.round(Math.random()*(m-n)+n);
            }
            
        //  获取元素到body的距离 参数：元素  返回：一个对象到body的left和top的距离
            function offset(ele){
                // 首先获取元素到定位父级的距离
                var l=ele.offsetLeft;
                var t=ele.offsetTop;
                var par=ele.offsetParent;
                // 如果有定位父级 就会一级一级往上面找
                while(par){
                    if(window.navigator.userAgent.toUpperCase().indexOf('MSIE 8.0')== -1){
                        // 不是IE8 浏览器 需要加上边框的宽度
                        l+=par.clientLeft;
                        t+=par.clientWidth;
                    }
                    // IE8 浏览器不需要添加边框宽度
                    l+=par.offsetLeft;
                    r+=par.offsetTop;
                    par=par.offsetParent;
                    
                    
                }
                return {left:l,top:t};
            }
            
        // 获取或者设置元素的属性值 对js盒子模型的兼容处理；第二个参数来区别是获取还是设置
            function win(attr,value){
                if(typeof value === 'undefined'){
                // if(value == null)
                    // 说明是获取 有返回值 兼容浏览器，前面是标准后面是非标准
                    return document.documentElement[attr]||document.body[attr];
                }
                // 设置属性
            document.documentElement[attr]=document.body[attr];
            }
            
        // 获取指定容器中的className 参数：指定容器 className
            function getByClass(strClass,parent){
                parent=parent||document;
                if(frg){
                // 通过className获取元素可能有多个，返回的是一个类数组 .toString()可以查看----> [object HTMLCollection]，转成数组好操作
                    return this.makeArray(parent.getElementsByClassName(strClass));
                }
                var ary=[];
                // 通过空格来分割类名
                var aryClass=strClass.split(/\s+/g);
                // 获取父容器下面的所有对象标签元素 整个html页面的标签 
                var nodeList=parent.getElementsByTagName('*');
                for(var i=0;i