自己根据js的兼容封装了一个小小的js库

  1 var gys = function () { }
  2 //oParent父节点
  3 //获取所有的子元素
  4 gys.prototype.getElementChildren = function (oParent) {
  5     return oParent.children;
  6 }
  7 //arr获取的数组,jsonCss是修改属性css的json数据
  8 // gys.setElementCss(aLi, {"color":"red","backgroundColor":"yellow","backgroundImage":"url(../img/test.jpg)"});
  9 //设置元素的css
 10 gys.prototype.setElementCss = function (arr, jsonCss) {
 11     var length = arr.length;
 12     if (length == 0) return; //没有元素
 13     else if (!length) { //单个元素   
 14         for (var key in jsonCss) {
 15             arr.style[key] = jsonCss[key];
 16         }
 17     }
 18     else { //元素集合
 19         for (var i = 0; i < arr.length; i++) {
 20             for (var key in jsonCss) {
 21                 arr[i].style[key] = jsonCss[key];
 22             }
 23         }
 24     }
 25 }
 26 //获取第一个子元素
 27 gys.prototype.getElementFirstChildren = function (oParent) {
 28     if (oParent.firstElementChild)//高版本浏览器,
 29     {
 30         return oParent.firstElementChild;
 31     }
 32     else //IE6,7,8
 33         return oParent.firstChild;
 34 }
 35 //获取最后一个子元素
 36 gys.prototype.getElementLastChildren = function (oParent) {
 37     if (oParent.lastElementChild)//高版本浏览器,
 38     {
 39         return oParent.lastElementChild;
 40     }
 41     else //IE6,7,8
 42         return oParent.lastChild;
 43 }
 44 //获取下一个元素
 45 gys.prototype.getElementNext = function (element) {
 46     if (element.nextElementSibling) { //高版本浏览器
 47         return element.nextElementSibling;
 48     }
 49     else { //IE6,7,8
 50         return element.nextSibling;
 51     }
 52 }
 53 //获取上一个元素
 54 gys.prototype.getElementPrev = function (element) {
 55     if (element.previousElementSibling) {
 56         return element.previousElementSibling
 57     }
 58     else {
 59         return element.previousSibling; 
 60     }
 61 }
 62 
 63 //ajax
 64 /*
 65 gys.ajax({ type: "get", url: "gps.txt", success: function (data) {
 66                   alert("成功" + data);
 67               }, error: function (data) {
 68                   alert(data);
 69               }
 70   });
 71 */
 72 gys.prototype.ajax = function (json) {
 73     //1.创建服务器
 74     var oAjax = null;
 75     if (window.XMLHttpRequest) {
 76         oAjax = new XMLHttpRequest();
 77     }
 78     else { //IE6
 79         oAjax = new ActiveXObject("Microsoft.XMLHTTP");
 80     }
 81     /*2.连接服务器
 82     open(方法,文件名,异步传输);
 83     */
 84     //oAjax.open("GET", "gys.txt?=" + new Date().getTime(), true); //这里的date是为了去除缓存
 85     oAjax.open(json.type.toUpperCase(), json.url, true);
 86     //3.发送请求
 87     oAjax.send();
 88     //4.接受返回
 89     oAjax.onreadystatechange = function () {
 90         /*
 91         oAjax.readyState:浏览器和服务器交互经行到哪一步了
 92         0:未初始化.还没有调用open()方法.
 93         1:载入.已调用send()方法,正在发送请求
 94         2:载入完成.send()方法完成,已收到全部响应内容,这个时候的数据是可能没法使用,因为这个数据是加密过的,也有可能是为了节省带宽,进行压缩过的.
 95         3:解析.正在解析相应内容
 96         4:完成.响应内容解析完成,可以在客户端调用了.                  
 97         */
 98         if (oAjax.readyState == 4) {//读取完成(并不代表成功)
 99             if (oAjax.status == 200) { //成功
100                 //alert("成功" + oAjax.responseText);
101                 json.success(oAjax.responseText);
102             }
103             else {
104                 //alert("失败");
105                 //json.error(oAjax.responseText);
106                 if (json.error) {
107                     json.error("错误:"+oAjax.status);
108                 }
109             }
110         }
111     }
112 }
113 
114 //获取浏览器窗口位置
115 gys.prototype.getScreenPos = function () {
116     /*
117     IE,Safari,Opera,Chrome提供screenLeft和screenTop
118     Safari,Chrome,Firefox支持screenX和screenY(Opera对这个属性支持有差异)
119     */
120     var left = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
121     var top = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
122     return { left: left, top: top };
123 }
124 gys.prototype.addHandler = function (element, type, handler) {//注册事件
125     if (element.addEventListener) {//非IE
126         element.addEventListener(type, handler, false);
127     }
128     else if (element.attachEvent) {//IE
129         element.attachEvent("on" + type, handler);
130     }
131     else {//dom0级
132         element["on" + type] = handler;
133     }
134 }
135 gys.prototype.removeHandler = function (element, type, handler) { //取消注册事件
136     if (element.removeEventListener) {//非IE
137                 element.removeEventListener(type, handler, false);
138             }
139             else if (element.detachEvent) {//IE
140                 element.detachEvent("on" + type, handler);
141             }
142             else {//dom0级
143                 element["on" + type] = null;
144             }
145         }
146 gys.prototype.getEvent=function (event) {//返回event的引用
147         return event ? event : window.event;
148     }
149 gys.prototype.getTarget=function (event) {//返回鼠标单击的目标对象
150         return event.target || event.srcElement;
151     }
152 gys.prototype.preventDefault=function (event) {//取消默认事件(a的href,radio,checkbox,)
153         if (event.preventDefault) {
154             event.preventDefault();
155         }
156         else {
157             event.returnValue = false;
158         }
159     }
160 gys.prototype.stopPropagation= function (event) {//因为这个EventUtil只支持冒泡,不支持事件捕获,所以这个方法只能阻止冒泡
161         if (event.stopPrapagation) {
162             event.stopPropagation();
163         }
164         else {
165             event.cancelBubble = true;
166         }
167     }
168 gys.prototype.getRelatedTarget=function (event) {//获取相关元素
169         /*
170         页面中有一个div;当鼠标离开这个div时,事件的主目标是div,而相关元素是body.
171         mouseover:事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素.
172         mouseout:事件的主目标是失去光标的元素,而相关元素使获得光标的那个元素.
173         */
174         if (event.relatedTarget) { return event.relatedTarget; }
175         else if (event.toElement) { return event.toElement; }
176         else if (event.fromElement) { return event.fromElement; }
177         else { return null; }
178     }
179 gys.prototype.getButton= function (event) {//获取鼠标按钮的点击方式
180         if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; }
181         else {
182             switch (event.button) {
183                 case 0:
184                 case 1:
185                 case 3:
186                 case 5:
187                 case 7:
188                     return 0; //左击
189                 case 2:
190                 case 6:
191                     return 2; //中间键
192                 case 4:
193                     return 1; //右击
194             }
195         }
196     }
197 gys = new gys();

 

posted @ 2014-03-03 17:55  思思博士  阅读(815)  评论(0编辑  收藏  举报