OOP & DOM
OOP & DOM
let Dom = Dom || {};
Dom = {
checkValType(val) {
let typeString = Object.prototype.toString.call(val);
switch (typeString) {
case '[object String]':
return 'String';
case '[object Boolean]':
return 'Boolean';
case '[object Function]':
return typeof val === 'symbol' ? 'Symbol' : 'Function';
case '[object Array]':
return 'Array';
case '[object Error]':
return 'Error';
case '[object Date]':
return 'Date';
case '[object RegExp]':
return 'RegExp';
case '[object Object]':
return 'Object';
case '[object Null]':
return 'Null';
case '[object Underfined]':
return 'Underfined';
default:
break;
}
},
setStyle(elem, obj) { //批量设置样式,elem要设置的元素,obj={'height':'5px','color':'red'}等样式集合
for (let key in obj) {
elem.style[key] = obj[key];
}
return this; //返回上下文方便链式调用
},
getStyle(elem, styleName, pseudoElt = null) { //pseudoElt伪元素例如getStyle(ele,'height',':after'),这样就匹配ele伪元素的样式
return (window || document.defaultView).getComputedStyle(elem, pseudoElt)[styleName];
},
addClass(elem, className) {
if (this.checkValType(className) === 'String') { //单个时传入字符串
elem.classList.add(className);
} else if (this.checkValType(className) === 'Array') { //多个时传入数组
elem.classList.add(...className);
}
return this;
},
removeClass(elem, className) {
if (this.checkValType(className) === 'String') { //单个时传入字符串
elem.classList.remove(className);
} else if (this.checkValType(className) === 'Array') { //多个时传入数组
elem.classList.remove(...className);
}
return this;
},
hasClass(elem, className) {
if (this.checkValType(className) === 'String') { //单个时传入字符串
elem.classList.contains(className);
} else if (this.checkValType(className) === 'Array') { //多个时传入数组
elem.classList.contains(...className);
}
return this;
},
toggleClass(elem, className) { //只操作单个class
elem.classList.toggle ? elem.classList.toggle(className) : (this.hasClass(elem, className) ? this.removeClass(elem, className) : this.addClass(elem, className));
return this;
},
siblings(elem){
let matched=[];
let n = (elem.parentNode || {}).firstChild;
for(;n;n= n.nextSibling){
if(n.nodeType===1&&n!==elem){
matched.push(n);
}
}
return matched;
},
sibling(cur,dir){//工具函数
while((cur=cur[dir])&&cur.nodeType!==1){}
return cur;
},
next(elem){
return this.sibling(elem,"nextSibling");
},
prev(elem){
return this.sibling(elem,"previousSibling");
}
};
OOP & DOM的更多相关文章
- js基础例子dom+原型+oop基础知识记录01
//oo:概念是计算机中对于现实世界的理解和抽象的方法 //由计算机利用编程技术发展到现在的产物 //面向对象几要素 //对象:由属性和方法组成的集合 //属性:保存数据,存储在对象内存空间中的唯一的 ...
- oop的三大特性和传统dom如何渲染
OOP的三大特性是什么: 封装 :就是将一个类的使用和实现分开,只保留部分接口和方法与外部联系继承:子类自动继承其父级类中的属性和方法,并可以添加新的属性和方法或者对部分属性和方法进行重写.继承增加了 ...
- 面向对象的OOA、OOD、OOP
OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构化分析有较大的区别.OOA所强调的 ...
- OOP感想
OOP是面向对象编程(Object Oriented Programming).集于一身,最终目的是各司其职,让每个职责的只关注自己那块,其他的不管丢给下一个人.比如说,一个页面,对于客户,只要能看到 ...
- DOM(四)事件流
1.冒泡型事件 浏览器的事件模型分两种:捕获型事件和冒泡型事件.由于ie不支持捕获型事件,所以以下主要以冒泡型事件作为讲解.(dubbed bubbling)冒泡型指事件安装最特定的事件到最不特定的事 ...
- OOA/OOD/OOP(了解)
Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构化分析有较大的区别.OOA所强调的是在系统 ...
- OOA、OOD、OOP
复习 OOA.OOD.OOP OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构 ...
- 复习面向对象的OOA、OOD、OOP
复习 OOA.OOD.OOP OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,依照面向对象的思想来分析问题. OOA与结构化 ...
- OOA/OOD/OOP(转)
OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构化分析有较大的区别.OOA所强调的 ...
随机推荐
- Windows环境下的Chocolatey安装使用
Chocolatey是一个软件包管理工具,类似于Ubuntu下面的apt-get,不过是运行在Windows环境下面 电脑 Powershell 方法/步骤 安装 Chocolatey的安装需要: P ...
- 【洛谷2257】YY的GCD(莫比乌斯反演)
点此看题面 大致题意: 求\(\sum_{x=1}^N\sum_{y=1}^MIsPrime(gcd(x,y))\). 莫比乌斯反演 听说此题是莫比乌斯反演入门题? 一些定义 首先,我们可以定义\(f ...
- 2018.5.22 Oracle安装配置在虚拟机中外部电脑连接服务
1.拷贝老师的集成文件(win系统和oracle服务) 2.安装虚拟机,并且打开镜像文件 3.启动监听程序(实例服务[自动].监听服务) 4.查看虚拟机ip,此ip要主机ip在同一个网段 5.检查虚拟 ...
- python_35_进度条
import sys for i in range(50): sys.stdout.write("+")#此命令不会像print语句执行一次,换行一次\ sys.stdout.fl ...
- python_20_列表
#1 names=["QiZhiguang","DaiYang","HuZhongtao","ZhangDong"] p ...
- IntelliJ IDEA中激活JRebel插件
1. 下载激活软件:https://github.com/ilanyu/ReverseProxy/releases/tag/v1.0 我下载的是 2. 双击文件运行 3. 点击change licen ...
- 使TextBox的内容换行
首先你把TextBox控件的MultiLine属性设置为True,然后把TextBox控件的Text属性根据程序需要,在需要换行的地方加入\r\n这样就可实现换行了
- Python_循环判断表达式
一.if判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. if判断结构: if 条件: 动作 elif 条件: 动作 else: 动作 if判断年龄: age_of_princal ...
- GoF23种设计模式之结构型模式之桥接模式
一.概述 将类的抽象部分与实现分部分离开来,使它们都可以独立地变化. 二.适用性 1.你不希望在抽象和实现之间有一个固定的绑定关系的时候.例如:在程序运行时实现部分应可以被选择或切换. ...
- 动态拼接SQL语句
1.参考官方文档 ? if:字符判断 ? choose (when, otherwise):分支选择 ? trim (where, set):字符串截取:其中where标签封装查询条件,set标签封装 ...