好程序员分享javascript中的常见的兼容写法
好程序员分享javascript中的常见的兼容写法
1 .获取后一个兄弟节点的兼容写法
var nextElement=oLi3.nextElementSibling||oLi3.nextSibling;
- 获取前一个兄弟节点兼容写法
var previousElement = oLi3.previousElementSibling || oLi3.previousSibling; - childNodes的兼容使用
function getChildNodes(ele) {
//1.定义一个空的数组
var arr = [];
//2.获取指定元素
var oEle = document.querySelector(ele);
//3.将元素下边的所有儿子拿到
for (var i = 0; i < oEle.childNodes.length; i++) {
//4.变量判断真的儿子(元素节点nodeType==1)
if (oEle.childNodes[i].nodeType == 1) {
//5.将真儿子添加到数组里
arr.push(oEle.childNodes[i])
}
}
//6.返回数组
return arr;
}
4.拿到第一个儿子
var No1 = oBox.firstElementChild || oBox.firstChild;
5.拿到最后 个儿子
var oLast = oBox.lastElementChild || oBox.lastChild;
6.事件目标对象兼容
var t = event.target || event.srcElement;
滚动条的兼容写法
一 简单兼容写法
document.documentElement.scrollTop||document.body.scrollTop
二 高级兼容写法
function myScroll() {
// ie9以上, google,火狐都能用
if (window.pageXOffset != undefined) {
return {
"left": window.pageXOffset,
"top": window.pageYOffset
}
} else if (document.compatMode == "CSS1Compat") {
// 标准 DTD (有声明头)
return {
"left": document.documentElement.scrollLeft,
"top": document.documentElement.scrollTop
}
}
// 非标准 没有 DTD (没有声明头)
return {
"left": document.body.scrollLeft,
"top": document.body.scrollTop
}
}
html5的新标签在 ie 6 7 8 下有兼容问题,解决原理是 动态创建标签 document.createElement,我可以是快速使用html5shiv插件
事件对象的兼容写法
var e=evt||window.event;
键盘事件
var keyCode = e.keyCode || e.which;
获取样式的兼容写法
function getStyle(obj, attr) {
// 非ie,google,火狐
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
}
//ie 6 8 9
return obj.currentStyle[attr];
}
阻止冒泡的兼容
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
阻止默认行为
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false;
}
事件监听的兼容写法
oBtn.addEventListener("click", function () {
alert("长沙千锋老罗最帅");
}, {
once: true, // 只能被点一次 useCapture: true // true||false
})
//obj 给指定的元素添加事件
//type 事件的类型(click,mouseenter..)
//fn 函数名称
//useCapTure 捕获还是冒泡
function addEvent(obj, type, fn, useCapTure) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, useCapTure)
} else {
obj.attachEvent("on" + type, fn)
}
}
事件监听移除兼容写法
function removeEvent(obj, type, fn, useCapTure) {
if (obj.removeEventListener) {
obj.removeEventListener(type, fn, useCapTure);
} else {
obj.detachEvent("on" + type, fn);
}
}
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
好程序员Python教程系列分享之Python语言元素之变量
好程序员Python教程系列分享之Python语言元素之变量,经常被外行问到两个问题,其一是“什么是(计算机)程序”,其二是“写(计算机)程序能做什么”,这里我们先来回答这两个问题。程序是指令的集合,写程序就是用指令控制计算机做我们想让它做的事情。那么,为什么要用Python语言来写程序呢?因为Python语言简单优雅,相比C、C++、Java这样的语言,Python对初学者更加友好,当然这并不是说Python不像其他语言那样强大,Python几乎是无所不能的,还能用来粘合其他语言开发的系统,所以也被戏称为“胶水语言”。一些计算机常识计算机的硬件系统通常由五大部件构成,包括:运算器、控制器、存储器、输入设备和输出设备。其中,运算器和控制器放在一起就是我们通常所说的中央处理器,它的功能是执行各种运算和控制指令。刚才说过了,程序是指令的集合,写程序就是将一系列的指令按照某种方式组织到一起,然后通过这些指令去控制计算机做我们想让它做的事情。今天我们大多数人使用的计算机都是“冯·诺依曼体系结构”的计算机,这种计算机有两个关键点:一是要将存储设备与中央处理器分开;二是将数据以二进制方式编码。二进...
- 下一篇
【云栖号案例 | 新零售】O2O电商服务平台上云 完美控制预算 业务准时上线
云栖号案例库:【点击查看更多上云案例】不知道怎么上云?看云栖号案例库,了解不同行业不同发展阶段的上云方案,助力你上云决策! 公司介绍 陕西集群物联网服务管理股份有限公司旗下的“集群e家”是专注于社区商圈O2O服务的平台,为社区(乡村)家庭提供创新的家庭消费服务及消费体验。集群e家智慧生活是以社区(乡村)为中心,以“互联网+”的思维为指导,打造线上与线下高度融合的O2O电商平台,实现智慧生活在线、在店、在手、在途的功能应用,依托社区(乡村)体验馆商圈,促进企业,商户进社区,直接与用户零距离互动,满足用户需求,精准定向服务,注重消费体验,专注平台建设,促进城市与乡村的双向互动与交流,为社区(乡村)居民提供全方位、多层次、方便、快捷、省时、省钱、省心的居家生活服务。 目前在阿里云上线的项目,是我们公司以打造社区家庭为对象,提供线上线下相结合的电商服务平台。 业务痛点 目前处于项目初期,预算不是特别高,需要进行成本控制。 测试发现其他云厂商服务器的稳定性和数据库性能无法满足我们的业务需求,但是业务上线时间紧迫。 我们公司的电商服务平台涉及到营收数据,对数据安全性比较敏感。 解决方案 架构细节:...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS关闭SELinux安全模块
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Red5直播服务器,属于Java语言的直播服务器