面向对象练习
来源：互联网 发布：围棋入门那个软件 编辑：程序博客网 时间：2024/06/03 21:56
抽空写的 不是很完善 主要用整理知识点用的
切记！ 勿喷(function(win,undefined){ var $ = function(){ this.init(); } $.prototype={ init:function(){ this.fnExtend() }, //函数扩展 fnExtend:function(){ //给函数对象添加方法 Function.prototype.before = function(fn){ var _self = this; return function(){ if(fn.apply(this,arguments) == false){ return false } return _self.apply(this,arguments) } }, Function.prototype.after = function(fn){ var _self = this; return function(){ var _set = _self.apply(this,arguments); if(_set == false){ return false } fn.apply(this,arguments); return _set } } }, //函数扩展 strExtend:function(){}, //函数扩展 arrayExtend:function(){}, //函数扩展 DateExtend:function(){}, //函数扩展 numExtend:function(){}, //去除左边空格 ltrim:function(str){ return str.replace(/(^\s*)/g,'') }, //去除右空格 rtrim:function(str){ return str.replace(/(\s*$)/g,'') }, //去除空格 trim:function(str){ return str.replace(/(^\s*)|(\s*$)/g,'') }, //ajax封装 ajax:function(json){ //判断 要是传入的参数为空或者不是JSON if(!json || (!Object.prototype.toString(json).toLowerCase() == '[object object]' && !json.length)){ return } //配置参数 var options = { "url": json.url || '', "method": json.method.toUpperCase() || "POST", "async":json.asunc || true, "data":json.data || '', "requestData": '', "success":json.success || function(){} } //创建对象 var xmlHttp = null; if(XMLHttpRequest){ xmlHttp = new XmlHttpRequest(); }else{ xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } //判断请求类型 对data进行处理 var params = []; for(var key in options.data){ params.push(key +'='+ options.data[key]) } var postData = params.join('&'); //判断请求类型 发起请求 if(options.method == "POST"){ xmlHttp.open(options.method,options.url,options.async); xmlHttp.setRequestHeader('Content-Type','appliaction/x-www-from-urlencoded;charset=UTF-8'); xmlHttp.send(postData) }else if(options.method == 'GET'){ xmlHttp.open(options.method,options.url+'?'+postData,options.async); xmlHttp.send(); } xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4 && (xmlHttp.status == 200 || xhr.status == 304)){ options.success(xmlHttp.responseText); }else{ alert('报错啦') } } }, //tab 组件封装 tab:function(){ }, //给对象添加一个方法 extendMany:function(){ var key,i=0,len = arguments.length,target=null,copy; if(len === 0){ return }else if(len === 1){ target = this }else{ target = arguments[0] i++; } for(;i <len;i++){ for(key in arguments[i]){ copy = arguments[i][key]; target[key]= copy; } } return target }, //copy extend:function(tar,source){ for(var key in source){ tar[key] = source[key] } }, //数据类型转换 isNumber:function(val){ return typeof val === 'number' && isFinite(val) }, isBoolean:function(val){ return typeof val === 'boolean' }, isString:function(val){ return typeof val === 'string' }, isUndefined:function(val){ return typeof val === 'undefined' }, isObj:function(str){ if(str === null || typeof str === 'undefined'){ return false } return typeof str === 'object' }, isJson:function(val){ if(Object.prototype.toString(val).toLowerCase() && !val.length){ return true } return false } , isNull:function(val){ return val === null }, isArray:function(arr){ if(arr === null || typeof arr === 'undefined'){ return false } return arr.constructor === Array }, isElem:function(obj){ return !!(obj && typeof window != 'undefined' && (obj === window || obj.nodeType)) } } //在框架中实例化，这样外面使用的使用就不用实例化了 win.$ = $ = new $(); //封装选择框架 $.extend($,{ //id 选择器 doc :document, $$:function(){ var dom,arr=[],i=0; if(arguments.length===0){ return } arr = $.trim(arguments[0]).split(' '); if(arr.length == 1){ return this._checkSelector(arr[0]) }else{ for(;i<arr.length;i++){ dom = this._checkSelector(arr[i]) } } }, $id:function(str){ return this.doc.getElementById(str) }, //html5实现的选择器 $all:function(selector,context){ context = context || document; return context.querySelectorAll(selector); }, $tag:function(){ if(arguments.length === 1){ return this.doc.getElementsByTagName(arguments[0]); }else{ return arguments[0].getElementsByTagName(arguments[1]) } }, //class选择器 $class:function(className,context){ var i=0,len,dom=[],arr=[]; //如果传递过来的是字符串 ，则转化成元素对象 if($.isString(context)){ context = _checkSelector(context); }else{ context = this.doc; } // 如果兼容getElementsByClassName if(context.getElementsByClassName){ return context.getElementsByClassName(className); }else{ //如果浏览器不支持 dom = context.getElementsByTagName('*'); for(i;len=dom.length,i<len;i++) { if(dom[i].className) { arr.push(dom[i]); } } } return arr; }, _checkSelector:function(str){ var _str = str.slice(0,1); if(_str === '#'){ return $.$id(str.slice(1)) }else if(_str === '.'){ return $.$class(str.slice(1)) }else{ return $.$tag(str) } } }), //封装css content：dom元素数组【选择器】 opt：需要设置【获取】的css属性 $.extend($,{ css:function(content,opt,val){ var i=0,key='',val= val || '',arr=[],dom=null,arg=arguments; //判断传入的是一个数组 还是字符串 if($.isString(content)){ arr = $$(content) }else if($.isArray(content)){ arr = content }else if(isElem(content)){ arr.push(content) } _setCss=function(dom,opt,val){console.log('setCss') if($.isJson(opt)){ for(var pop in opt){ dom.style[pop] = opt[pop]; } }else{ dom.style[opt] = val; } return dom } _getCss=function(dom,key){console.log('getCss') if(dom.currentStyle){ return dom.currentStyle[key] }else{ return getComputedStyle(dom,null)[key] } } _checkOpt=function(opt){ if(arg.length >=3 || $.isJson(opt)){ return _setCss }else if($.isString(opt)){ return _getCss } } var fn = _checkOpt(opt); for(;i< arr.length;i++){ fn(arr[i],opt,val) } }, cssNum:function (context, key){ return parseFloat($$.css(context, key))},//显示show:function (content){var doms = $.$all(content)for(var i= 0,len=doms.length;i<len;i++){$.css(doms[i], 'display', 'block');}},//隐藏和显示元素hide:function (content){var doms = $$.$all(content)for(var i= 0,len=doms.length;i<len;i++){$.css(doms[i], 'display', 'none');}},//元素高度宽度概述//计算方式：clientHeight clientWidth innerWidth innerHeight//元素的实际高度+border，也不包含滚动条Width:function (id){return $.$$(id).clientWidth},Height:function (id){return $.$$(id).clientHeight }, //元素的滚动高度和宽度 //当元素出现滚动条时候，这里的高度有两种：可视区域的高度 实际高度（可视高度+不可见的高度） //计算方式 scrollwidth scrollWidth:function (id){ return$.$$(id).scrollWidth }, scrollHeight:function (id){ return$.$$(id).scrollHeight }, //元素滚动的时候 如果出现滚动条 相对于左上角的偏移量 //计算方式 scrollTop scrollLeft scrollTop:function (id){ return$.$$(id).scrollTop }, scrollLeft:function (id){ return$.$$(id).scrollLeft }, //获取屏幕的高度和宽度 screenHeight:function (){ return window.screen.height }, screenWidth:function (){ return window.screen.width }, //文档视口的高度和宽度 wWidth:function (){ return document.documentElement.clientWidth }, wHeight:function (){ return document.documentElement.clientHeight }, //文档滚动区域的整体的高和宽 wScrollHeight:function () { return document.body.scrollHeight }, wScrollWidth:function () { return document.body.scrollWidth }, //获取滚动条相对于其顶部的偏移 wScrollTop:function () { var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop; return scrollTop }, //获取滚动条相对于其左边的偏移 wScrollLeft:function () { var scrollLeft = document.body.scrollLeft || (document.documentElement && document.documentElement.scrollLeft); return scrollLeft } }) //封装事件框架 $.extend($,{ on:function(elem,type,fn){ var arr =[],i=0,len=0; arr = this._checkEl(elem) for(len=arr.length;i< len;i++){ this._bind(arr[i],type,fn); } }, un:function(elem,type,fn){ var arr =[],i=0,len=0; arr = this._checkEl(elem) for(len=arr.length;i< len;i++){ this._unbind(arr[i],type,fn); } }, /*检查传入的参数elem 进行处理*/ _checkEl:function(elem){ if($.isString(elem)){ return $.$$(elem); }else if($.isArray(elem)){ return elem }else if(isElem(elem)){ return [elem] } }, _bind:function(elem,type,fn){ //如果支持 //W3C版本 --火狐 谷歌 等大多数浏览器 //如果你想检测对象是否支持某个属性，方法，可以通过这种方式 if(document.addEventListener){console.log(elem,type,fn,'bind') elem.addEventListener(type,fn,false) }else if(document.attachEvent){ //如果是IE浏览器 elem.attachEvent('on'+type,fn) } }, _unbind:function(elem,type,fn){ //如果支持 //W3C版本 --火狐 谷歌 等大多数浏览器 //如果你想检测对象是否支持某个属性，方法，可以通过这种方式 if(document.addEventListener){ elem.removeEventListener(type,fn,false) }else if(document.detachEvent){ //如果是IE浏览器 elem.detachEvent(type,fn) } }, trigger: function(content,type){ var dom = $.$$(content); // 事件触发器 // 现代浏览器 if(dom.dispatchEvent){ // 创建事件 var evt = document.createEvent('Event'); // 定义事件的类型 evt.initEvent(type, true, true); // 触发事件 dom.dispatchEvent(evt); // IE } else if(dom.fireEvent){ dom.fireEvent('on' + type); } }, //事件基础 getEvent:function(event){ return event?event:window.event; }, //获取目标 GetTarget :function(event){ var e = $$.getEvent(event);return e.target|| e.srcElement;},//组织默认行为preventDefault:function(event){var event = $$.getEvent(event);if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}},//组织冒泡stopPropagation:function(event){var event = $$.getEvent(event); if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } }) //内容框架 $.extend($,{ html:function(content,value){ var i =0,arr=[],len=0; /*检查传入的参数elem 进行处理*/ checkEl=function(elem){ if($.isString(elem)){ return $.$$(elem); }else if($.isArray(elem)){ return elem }else if(isElem(elem)){ return [elem] } if(value){} } arr = checkEl(content); if(value){ arr[0].innerHTML = value; return true }else{ return arr[0].innerHTML } } }) //封装JSOn框架 $.extend($,{ JSON:function(json){ return JSON.parse(json) }, sJson:function(json){ return JSON.stringify(json) } }) //缓存框架 $.cache = { data: [], get:function(key){ var value = null; console.log(this.data) for(var i=0,len = this.data.length; i<len ;i++){ if(key == this.data[i].key){ value = this.data[i].value } } return value }, set:function(key,value){ var json = {key:key,value:value}; this.data.push(json); }, delete:function(key){ var status = false; for(var i = 0, len=this.data.length;i<len;i++){ if(this.data[i].key == key){ this.slice(i,1); status = true; break; } } return status }, updata:function(key,value){ var status = false,i=0,len=0; for(len=this.data.length;i<len;i++){ if(this.data[i].key.trim() == key.trim()){ this.data[i].value = value status = true; break; } } return status }, isHas:function(key){ var status = false,i=0,len=0,item=null; for(len=this.data.length;i<len;i++){ if(this.data[i].key.trim() == key.trim()){ status = true; break; } } return status } } // cookie 框架 $.cookie = { //设置cookie set:function(key,value,days,path){ var key = escape(key), value = escape(value), _expires = null, expires = new Date(); expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); path = path == ''? '' : ';paht='+path; _expires = (typeof hours) == "string" ? '' : ';expires=' + expires.toUTCString() document.cookie = name + '=' + value + _expires + path; }, //获取cookie get:function(name){ var allCookies='', name = escape(name), pos=''; //读取cookie 这里将返回文档所有的cookie allCookies = document.cookie; //查找名为name的cookie的开始位置 name += '='; pos = allCookies.indexOf(name); //如果找到了具有该名字的cookie，那么提取并使用它的值 if(pos != -1){//如果pos值为-1则说明搜索"version="失败 var statr = pos + name.length; //cookie值开始的位置 var end = allcookies.indexOf(';',start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置 if(end == -1){//如果end值为-1说明cookie列表里只有一个cookie end = allcookies.length; var value = allcookies.substring(start,end); return unescape(value)//对它解码 } }else{//搜索失败，返回空字符串 return '' } }, //删除cookie delete:function(name,path){ var name = escape(name), expires = new Date(0), path = path == '' ? '' : ';path='+path; document.cookie = name + '=' + ';expires=' + expires.toUTCString() + path; } } //本地存储框架 $.store = (function(){ var api = {}, win = window, doc = document, localStorageName = 'localStorage', globalStorageName = 'globalStorage', stroage; api.set = function(key,value){}; api.get = function(key){}; api.remove = function(key){}; api.clear = function(){}; if(localStorageName in win && win[localStorageName]){ stroage = win[localStorageName]; api.set = function(key,val){stroage.setItem(key,val)}; api.get = function(key){return stroage.getItem(key)}; api.remove=function(key){stroage.removeItem(key);} api.clear =function(){stroage.clear()} }else if(globalStorageName in win && win[globalStorage]){ storage = win[globalStorage]; api.set = function(key,val){storage[key] = val}; api.get = function(key){storage[key] = val}; api.remove = function(key){delete storage[key]}; api.clear = function(){for(var key in storage){ delete storage[key]}} }else if(doc.documentElement.addBehavior){ function getStorage(){ if(storage){return storage}; storage = doc.body.appendChild(doc.createElement('div')); storage.style.display = 'none'; // See http://msdn.microsoft.com/en-us/library/ms531081(v=VS.85).aspx // and http://msdn.microsoft.com/en-us/library/ms531424(v=VS.85).aspx storage.addBehavior('#default#userData'); storage.load(localStorageName); return storage; } api.set = function(key,val){ var storage = getStorage(); storage.setAttribute(key,val); storage.save(localStorageName) } api.get = function(key){ var storage = getStorage(); return storage.getAttribute(key) } api.remove = function(key){ var storage =getStorage(); storage.removeAttribute(key); storage.save(localStorageName) } api.clear = function () { var storage = getStorage(); var attributes = storage.XMLDocument.documentElement.attributes;; storage.load(localStorageName); for (var i=0, attr; attr = attributes[i]; i++) { storage.removeAttribute(attr.name); } storage.save(localStorageName); } return api } })(); //封装DOM框架 -- 放在后面 $.extend($,{ //选择 eq:function(){}, first:function(){}, last:function(){}, //元素的插入和删除 克隆 append:function(){}, empty:function(){}, remove:function(){}, clone:function(){} }) })(window,undefined) 0 0
- 面向对象小练习
- 面向对象小练习
- js 面向对象练习
- 面向对象练习
- 面向对象练习
- 面向对象练习
- 面向对象练习
- 面向对象练习
- 面向对象练习
- 面向对象练习
- 面向对象练习
- 面向对象练习
- Java面向对象练习
- 面向对象练习
- 面向对象练习
- JavaSE面向对象练习
- JAVA面向对象练习
- java面向对象-练习四
- Linux中普通文件到底是什么
- android 声卡音频策略小记
- 关于synchronized、wait、notify已经notifyAll的使用
- JAVA产生任意范围的随机数
- 解决Android studio 2.3 小米手机不能调试
- 面向对象练习
- PAT算法笔记(六)————反转链表（需要修改）
- hdu 4496 D-City 并查集
- Python常用标准库 --- os
- 学习docker（一）
- 【Java】《Java疯狂讲义》自学笔记-第三章
- HTTP请求头与响应头
- C++ 在.h文件中包含头文件和在.cpp文件中包含头文件有什么区别？
- OWASP——SQL注入（二）
